HTML - coordenadas sobre imagen

   
Vista:

coordenadas sobre imagen

Publicado por Emilio (4 intervenciones) el 19/12/2010 06:30:09
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!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

RE:coordenadas sobre imagen

Publicado por ScriptShow (311 intervenciones) el 19/12/2010 11:31:38
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:coordenadas sobre imagen

Publicado por Emilio (4 intervenciones) el 19/12/2010 14:53:13
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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow

RE:coordenadas sobre imagen

Publicado por ScriptShow (311 intervenciones) el 19/12/2010 20:12:48
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:coordenadas sobre imagen

Publicado por Emilio (4 intervenciones) el 19/12/2010 23:24:25
Y esto con pegarlo ya?? o tengo que sustituir algo?

entiendo algo, pero muuuy poquito...

Gracias de todas formas!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow

RE:coordenadas sobre imagen

Publicado por ScriptShow (311 intervenciones) el 26/12/2010 14:03:15
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:coordenadas sobre imagen

Publicado por Jose Maria Baena (1 intervención) el 25/12/2010 23:35:59
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:coordenadas sobre imagen

Publicado por Emilio (4 intervenciones) el 25/12/2010 23:52:46
Y me podrías decir como hacerlo, o donde buscar como hacerlo?

muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow

RE:coordenadas sobre imagen

Publicado por ScriptShow (311 intervenciones) el 10/01/2011 12:01:53
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar