Hola acaser:
Se puede hacer pero es algo trabajoso...
. Hace poco respondí este mensaje:
http://www.forosdelweb.com/s6aa06d0c...msg185737.html, y como podrás ver, se trata de una imagen grande y otra imagen más pequeña, y creo que es la solución.
La solución: según creo, necesitas ese mapa de Madrid y una imagen (o una capa con un punto... sea como sea) que se muestre u oculte según el evento del ratón... puedes crear una función (método) que posicione y muestre el punto, y otra que lo oculte...
function mostrarPunto(x, y) {
with (document.getElementById("punto").style) {
left = x;
top = y;
visibility = "visible";
}
}
function ocultarPunto() {
document.getElementById("punto").style.visibility = "hidden";
}
Suponiendo que la imagen de madrid sea imagen.gif y el punto sea punto.gif...
<div style="position: relative">
<img src=madrid.gif style="position: aboslute; left: 0; top: 0" />
<img src=punto.gif style="position: aboslute; left: 0; top: 0" />
<div>
... si Madrid tuviera las coordenadas (20, 20)...
<p>Pongamos que hablo de
<span onmouseover="mostrarPunto(20, 20)" onmouseout="ocultarPunto()"> Madrid</span></p>
Lo puse "a capella", así que puede no ser correcto, pero espero que al menos te valga la idea.
Saludos