Foros del Web - Ver Mensaje Individual

bookmaster · #2 (**permalink**) 13/04/2009, 13:08

Yo haria lo siguiente:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Documento sin título</title>
 
<style type="text/css">
.estilo1 {
        border:2px #003333 solid;
}
</style></head><body>
<map name="mapa1">
<area alt="MSN" shape="rect" coords="-3,99,98,203" href="http://www.msn.com/"
onmouseover="Imagen.src='mapadeimagenes_files/buscamsn.jpg'"
onmouseout="Imagen.src='mapadeimagenes_files/buscamsn.jpg'">
 
<area alt="AOL" shape="rect" coords="96,99,201,203" href="http://www.aol.com/"
onmouseover="Imagen.src='mapadeimagenes_files/buscaaol.jpg'"
onmouseout="Imagen.src='mapadeimagenes_files/buscamsn.jpg'">
 
<area alt="Yahoo" shape="rect" coords="96,0,202,101" href="http://www.yahoo.com/"
onmouseover="Imagen.src='mapadeimagenes_files/buscayahoo.jpg'"
onmouseout="Imagen.src='mapadeimagenes_files/buscamsn.jpg'">
 
<area alt="Google" shape="rect" coords="0,0,98,101" href="http://www.google.com/"
onmouseover="Imagen.src='mapadeimagenes_files/buscagoogle.jpg'"
onmouseout="Imagen.src='mapadeimagenes_files/buscamsn.jpg'">
  
</map>
<img id="Imagen" src="mapadeimagenes_files/busca.jpg" class="estilo1" usemap="#mapa1" height="200" width="200">
 
</body></html>

Crearía una imagen con cada zona marcada y con onmouseover y onmouseout me encargaría de cambiarlas.

Te dejo el enlace para que lo veas funcionando:
http://fdw.lohacemosweb.net/mapadeimagenes.php