mostrar coordenadas de una imagen en concreto

[morrison32]

Hola buenas quisiera que alguien me echase un calble. Trabajo con el dreamweaver y lo que querria hacer es de una imagen mostrar las coordenadas al pasar el puntero del raton por encima. Pero que funcione en todos los navegadores principalmente en mozilla.

Pues eso que la imagen que aparezca, al pasar el puntero del raton se vea en una ventana o algo asi las coordenadas x y.
Perdon por repetirme tanto pero es que traigo un cacao con esto que no soy capaz.

Si alguien me ayuda muy agradecio.
Un saludo!!

[maycolalvarez]

esta es experimental, la hice guiándome del dom-drag:

mouse-touch.js

Código:

//(C) 2009, Maycol Alvarez


var mouseTouch = {

	
	
	//cancelled:false,

	init: function(obj,up_callback,down_callback,move_callback){
		obj.root=obj;
		if(up_callback!=null){
			obj.up_callback=up_callback;
			obj.onmouseup=mouseTouch.mouseUpCatch;
		}
		if(down_callback!=null){
			obj.down_callback=down_callback;
			obj.onmousedown=mouseTouch.mouseDownCatch;
		}
		if(move_callback!=null){
			obj.move_callback=move_callback;
			obj.onmousemove=mouseTouch.mouseMoveCatch;
		}
		//alert(obj.onmousemove);
	},
	
	prevCanceled: function(c){
		mouseTouch.cancelled=c;
	},
	
	mouseUpCatch:function(e){
		var obj = mouseTouch.obj = this;
		var coord = mouseTouch.mouseCatch(e,obj);
		//if(!mouseTouch.cancelled){
			obj.root.up_callback(coord[0],coord[1],coord[2],coord[3]);
		//}
	},
	
	
	mouseDownCatch:function(e){
		var obj = mouseTouch.obj = this;
		var coord = mouseTouch.mouseCatch(e,obj);
		//if(!mouseTouch.cancelled){
			obj.root.down_callback(coord[0],coord[1],coord[2],coord[3]);
		//}
	},
	
	
	mouseMoveCatch:function(e){
		var obj = mouseTouch.obj = this;
		var coord = mouseTouch.mouseCatch(e,obj);
		//if(!mouseTouch.cancelled){
			obj.root.move_callback(coord[0],coord[1],coord[2],coord[3]);
		//}
	},

	mouseCatch: function (e,obj){
		if(e==null){
			e=event;
		}
		if(e==null){
			e=window.event;
		}
		
		//var obj = mouseTouch._obj = this;
	
		var cX= e.clientX;
		var cY= e.clientY;
		
		
		var sX= document.body.scrollLeft;
		var sY= document.body.scrollTop;
		
		
		var oX= mouseTouch._getOffsetLeft(obj.root);
		var oY= mouseTouch._getOffsetTop(obj.root);
		var _x=(cX+sX)-oX;
		var _y=(cY+sY)-oY;
		return Array(_x,_y,oX,oY);
	},
			
	_getOffsetTop: function  (el)	{
		var ot = el.offsetTop;
		while ( ( el = el.offsetParent ) != null )
		{
			ot += el.offsetTop;
		}
		return ot;
	},
	_getOffsetLeft: function  (el)	{
		var ot = el.offsetLeft;
		while ( ( el = el.offsetParent ) != null )
		{
			ot += el.offsetLeft;
		}
		return ot;
	},
	getVScrollWindow: function(){
		var scrOfY = 0;
		if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		
		} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
		
		} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		
		}
		return scrOfY;

	},
	getHScrollWindow: function(){
		var scrOfX = 0;
		if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
	
		scrOfX = window.pageXOffset;
		} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		
		scrOfX = document.body.scrollLeft;
		} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		
		scrOfX = document.documentElement.scrollLeft;
		}
		return scrOfX;
	}

}

y se usa así:

Código:

//cuando el DOM esté cargado: (puede ser desd el evento onload del body)
mouseTouch.init(document.getElementById('objetocaptura'),null,null,mover_func);


//en el HEAD SCRIPT
var mover_func = function(x,y){
			document.getElementById('capa_muestra)'.innerHTML=('move '+x+' '+y);
		}

[morrison32]

ufff.. hermano, me pillas. Es que tengo conocimientos mas básicos. Explicame si puedes porfa un poco mas sencillo. Se que hay que tener conocimientos de java mas aplicados pero bueno si me vas diciendo asi como hacerlo creo que lo puedo montar.

Porfa si tienes paciencia conmigo te estaria muy agradecido.

Yo tengo en el dreamweaver, la plantilla hecha entonces tengo una imagen que era lo que comentaba , ¿tengo que darle la orden en java en el codigo html?

Seria como decirme pon esto y donde pone tal codigo ahi tengo que poner el nombre de la imagen, asi como pa tonticos .
Muchas gracias por contestar

[Adler]

Hola

El mismo ejemplo para dos post consecutivos

Código javascript:

<html>
<head>
<script type="text/javascript">
function PosicionAbsolutaElemento(element)  {
    if (typeof element == "string")
        element = document.getElementById(element)
            if (!element) return { top:0,left:0 };
        var y = 0;
        var x = 0;
            while (element.offsetParent) {
                    x += element.offsetLeft;
                    y += element.offsetTop;
                element = element.offsetParent;
     }
    return {top:y,left:x};
 
}
 
function Show(elElemento,Ventana) {
var PosElemento = PosicionAbsolutaElemento(elElemento);
posLeft = parseInt(PosElemento.left);
posTop = parseInt(PosElemento.top);
document.getElementById(Ventana).style.left = posLeft + "px";
document.getElementById(Ventana).style.top = posTop + "px";
document.getElementById(Ventana).style.display="block";
alert("Left: " + posLeft + " Top: " + posTop)
}
 
function Hide(Div)
{
document.getElementById(Div).style.display="none";
}
</script>
</head>
<body>
<div id="DivAlertas"  style="z-index:1000; position:absolute; top:0px; left:0px; overflow:hidden; display:none;">Una Capa</div>
<table border="1px">
<tr height="100px">
<td>Una prueba</td>
</tr>
</table>
<img id="img" alt="" src="icono_alertas_azul.gif" width="26" height="26" align="middle" onmouseover="javascript: Show(this.id,'DivAlertas')" onmouseout="javascript: Hide('DivAlertas')" style=" margin-top:-3px; border-width:0px;"/> 
</body>
</html>
 

Suerte

[morrison32]

Gracias por todo voy a intentar a ver que tal

[morrison32]

ah y gracias por la rapidez en contestar y ayuedar este foro es cojonudo. Buena gente

[morrison32]

uff... nada. tengo que aplicar algun estilo en css? en img id?

es que me aparece una recuadro en la parte de arriba de la imagen que trae lo de "esto es una prueba" y la imagen que le he incrustado en src.

pero cuando paso el puntero por encima me sale una ventana emergente con el boton aceptar con el contenido left: top: y los numeros. pero siempre iwal.

puedes explicarme? estoy utilizando mozilla firefox.

gracias.

[Adler]

Hola

Iniciado por morrison32

uff... nada. tengo que aplicar algun estilo en css? en img id?

es que me aparece una recuadro en la parte de arriba de la imagen que trae lo de "esto es una prueba" y la imagen que le he incrustado en src.

pero cuando paso el puntero por encima me sale una ventana emergente con el boton aceptar con el contenido left: top: y los numeros. pero siempre iwal.

puedes explicarme? estoy utilizando mozilla firefox.

gracias.

El recuadro que te aparece es una tabla. Fue algo que se me ocurrió para que comprobaras que agrandando la tabla, el div continuaba mostrandose en el lugar donde se producía el evento

En cuanto al alert solo has de quitarlo

Suerte

[morrison32]

Adler creo que me vas a mandar a tomar viento... pero veras es que sigo con problemas.

veras yo lo que queria era un estilo como se muestra en milliondolarhomepage.com que al pasar el puntero por encima del mapa en el que no haya areas (con sus imagenes) encima muestre las coordenadas al instante.

x:180 y:140

y asi que se mostrase en un recuadro en los lugares "libres" de areas.

Se que soy un pesao, lo siento pero es que no consigo y por lo ke veo tu controlas a ver si me puedes orientar.
en lawebdelmillon.es tambien lo puedes ver mejor.

Ves? ahi donde no hay areas, con el evento onmouseover aparecen las coordenadas. Lo otro de las imagenes lo se hacer, que salga el cartelito con la descripcion del area. Lo que me falta es que al pasar el raton por el mapa muestre las coordenadas en el recuadro.

Un saludo y perdona tanta insistencia.

te agradezco tu paciencia.

pero ayudameee porfavor.

[Adler]

Hola

Tendrás que se mas especifico con respecto al lugar donde dices que se producen esos efectos. He visitado ambas páginas y no lo he encontrando.

Suerte