Le dije: Dime un numero del uno al cuatro, si coincide con el que sale en mi programa te quedas con el regalo, si no me lo quedo yo. Para no arriesgarme que no adivine el numero, he echo un programa que siempre lo adivinará, porque no he puesto un botón sino una imagen, y con un mapa de bits es como consigo "engañar" a mi amigo.
El HTML:
<!DOCTYPE html>
<html>
<head>
<title>Tabla fracionada</title>
</head>
<body>
<table style="margin: 0 auto;" WIDTH=1000 border="1px">
<tr>
<td bgcolor="#FF0000" WIDTH="300" HEIGHT="200"></td>
<td bgcolor="#FF0000" WIDTH="100" HEIGHT="100"></td>
<td bgcolor="#FFFF00" WIDTH="100" HEIGHT="100"></td>
<td bgcolor="#FFFF00" WIDTH="300" HEIGHT="200"></td>
</tr>
<tr>
<td bgcolor="#FF0000" WIDTH="100" HEIGHT="100"></td>
<td WIDTH="100" HEIGHT="100" rowspan="2" COLSPAN="2"><img src="https://magnitopic.github.io/edujs/tablasComplejas/random.jpg" alt="Prueba de mapa de imágenes" width="85" height="20" usemap="#Boton">
<input type="text" size="15" maxlength="30" value="" name="0">
<map name="boton">
<area alt="Numero 1" shape="RECT" coords="X0,Y0,X21.25,Y20" href="https://magnitopic.github.io/edujs/tablasComplejas/paginas/numero1.html">
<area alt="Numero 2" shape="RECT" coords="X21.25,Y0,X42.5,Y20" href="https://magnitopic.github.io/edujs/tablasComplejas/paginas/numero2.html">
<area alt="Numero 3" shape="RECT" coords="X42.5,Y0,X63.75,Y20" href="https://magnitopic.github.io/edujs/tablasComplejas/paginas/numero3.html">
<area alt="Numero 4" shape="RECT" coords="X63.75,Y0,X85,Y20" href="https://magnitopic.github.io/edujs/tablasComplejas/paginas/numero4.html">
</map>
</td>
<td bgcolor="#FFFF00" WIDTH="100" HEIGHT="100"></td>
</tr>
<tr>
<td bgcolor="#008000" WIDTH="100" HEIGHT="100"></td>
<td bgcolor="#0000FF" WIDTH="100" HEIGHT="100"></td>
</tr>
<tr>
<td bgcolor="#008000" WIDTH="300" HEIGHT="200"></td>
<td bgcolor="#008000" WIDTH="100" HEIGHT="100"></td>
<td bgcolor="#0000FF" WIDTH="100" HEIGHT="100"></td>
<td bgcolor="#0000FF" WIDTH="300" HEIGHT="200"></td>
</tr>
</table>
</body> Lo que hace un mapa de bits es que puedes dividir una imagen en secciones y al cliquear en una de las partes llevarte a un enlace. Con esto puedo llevar a mi amigo a una pagina idéntica y cambiar lo que quiera.
Pruebalo tu mismo: https://magnitopic.github.io/edujs/tablasComplejas/
No hay comentarios:
Publicar un comentario