HTML - coordenadas sobre imagen

Hola amigos.

Me gustaría que me pudierais hechar una mano con una duda que tengo.
Estoy haciendo una página con dreamweaver, y necesito hacer que sobre una imagen, al pasar el ratón por encima, sobre determinadas áreas me diga las coordenadas relativas a esa imagen.

Es muy dificil??

un saludo

PD, he llegado hasta aquí

<area shape="rect" coords="247,519,372,598" href="#" onMouseOver="" alt="publi 1">

pero en el onMouseOver="" ya no se que tengo que poner.

PD2, no se si estaré sobre el buen camino, o si me estoy inventado cosas ajaja..

un saludo y gracias de antemano!

Saludos Emilio,

en HTML hay una forma sencilla de verlo:

<a href="#">
<img src="img.jpg" ismap="ismap" width="200" height="200" border="0" />
</a>

En la barra de estado del Navegador, aparecen las coordenadas después de la URL y el signo de interrogación. Se pueden enviar al Servidor vía URL query string...

Espero sea útil.

Si, más o menos, pero lo que necesito es que salga una etiqueta al lado del ratón con las coordenadas.

Gracias por la respuesta

No he conseguido hacer que aparezcan solo las coordenadas. El atributo, parámetro "ismap" lo interpreta el Navegador, pero no es manejable directamente como lo es: width, height, etc. y sus valores.

En lo referente al ToolTip, yo utilizo este script:

<style type="text/css">
<!--
#toolTipBox {
display: none;
padding: 4;
font-size: 12px;
border: black solid 1px;
font-family: verdana;
position: absolute;
background-color: #ffd038;
color: 000000;
}
-->
</style>

<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Saul Salvatierra :: http://myarea.com.sapo.pt
with help from Ultimater :: http://ultimiacian.tripod.com */

var theObj="";

function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}

function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=20;
diffY=20;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}
-->
</script>

<span id="toolTipBox" width="200"></span>
<a href=""><img src="imagen.jpg" width="200" height="200" ismap="ismap" border="0" onmouseover="toolTip('imagen',this)"></a>

Es un Script sencillo y compatible, razones por las decidí adaptarlo en mis proyectos.

Un saludo.

Y esto con pegarlo ya?? o tengo que sustituir algo?

entiendo algo, pero muuuy poquito...

Gracias de todas formas!

Saludos Emilio,

aquí tienes el código para copiar y pegar donde lo precises:

<style type="text/css">
<!--
#toolTipBox {
display:none;
padding:4px;
font-size:12px;
border:black solid 1px;
font-family:verdana;
position:absolute;
background-color:#AADDFF;
color:#000000;
}
//-->
</style>

<script type="text/javascript">
<!--
var theObj="";

function toolTip(me) {
theObj=me
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=window.event.offsetX +" - "+ window.event.offsetY;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}

function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=8;
diffY=8;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}
//-->
</script>

<span id="toolTipBox" width="200"></span>
<img src="imagen.jpg" width="200" height="200" border="0" style="cursor:crosshair" onclick="toolTip(this);return false">

Para probarlo, haz click en la imagen para ver las coordenadas de ese punto.

Espero sea útil.

Felices Fiestas.

La cosa es que para que te salga eso tendras que utilizar un bucle y para eso tienes que utilizar o javascript o PHP alguna funcion que haga que recoja las cordenadas y las imprima donde quieras... pero con html no va a poder ser ya que no puedes utilizar bucles...

Espero haberte oridenado.
Saludos.

Y me podrías decir como hacerlo, o donde buscar como hacerlo?

muchas gracias

Saludos Emilio,

tienes la respuesta en el post de fecha: ScriptShow (26/12/2010). Haz click en el enlace para seguir desde allí con el tema. Se trata de un script que hice para tí.

Espero sea útil.