Hola,
Lo que tenes que hacer tiene 3 partes totalmente separadas, lo primero
es saber la posicion del mouse, la segunda es poner la imagen en una
posicion absoluta, y la tercera es saber bien la posicion de la imagen
de fondo ya que de esta va a depender la posicion de cada parte del
auto...
Entonces, para saber la posicion del mouse te paso un script que tengo
hecho hace tiempo, aunque tendrias que ver si es cross-browser. La
libreria Prototype creo que tambien te permite saber la posicion del
mouse y seguramente esta mejor hecha...
Mi script muestra un tooltip sobre el mouse indicando la posicion, con
pequeños cambios haces lo que necesitas.
El HTML:
<!-- TOOLTIP DE LA POSICION -->
<div style="position:absolute;display:none;z-index:5;" id="divPos">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="tooltip" id="tdTooltipText"></td>
</tr>
</table>
</div>
El JAVASCRIPT:
function ShowMousePos(e)
{
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
var tooltip = document.getElementById("divPos");
tooltip.style.left = posx + 10;
tooltip.style.top = posy - 10;
tooltip.style.display = "";
var text = document.getElementById("tdTooltipText");
text.innerHTML = "Posición <b>X: " + posx + " Y: " + posy +
"</b>";
}
document.onmousemove = ShowMousePos;
Para el 2do item lo que tenes que hacer es simplemente ponerle a tu
imagen pequeña el position: absolute; en el style (o CSS) y despues
setear las posicion por javascript, algo asi:
document.getElementById("......").style.left = "20px";
document.getElementById("......").style.top = "50px";
Y para la 3er cosa que tenes que hacer te recomiendo que veas la
libreria prototype, especificamente esta funcion:
http://prototypejs.org/api/position/cumulativeoffset
y despues de tooooodo eso ya lo tenes resuelto ;)
Saludos!,
Diego
On 4/9/07, Agustin Galloso Viera <[EMAIL PROTECTED]> wrote:
HOLA MUG !!!...
Estoy trabajando con VS 2005, C# y ASP 2.0. El problema en cuestión es que
tengo una imagen o mejor dicho, 4 imagenes de una plantilla de un automovil,
la vista derecha, izquierda, laterak y trasera, esas imagenes son de 410 x
230 pixels y tengo una leyenda de golpes y abolladuras, que son como 10
imagenes mucho mas chiquitas, lo que quiero hacer es que segun la imagen del
golpe seleccionada, al hacer clic en la imagen grande, SE DIBUJE en esas
coordenadas la imagen pequenna de la leyenda.
De que forma obtengo las coordenadas al hacer clic en la imagen ?? De que
forma dibujo una imagen encima de otra ??
Estuve probando con el ImageMap, pero no me sirve, ya que tengo que
predefinirle los Spots, y eso es my dificil, ya que los golpes se pueden
poner casi en cualquier lugar de la plantilla, y hay varias plantillas ...
moto, auto ... camion ,,.... etc..
El formulario en cuestion usa una master pagem por tanto, no puedo escribir
tampoco directamente en la salida con Response.Write ...
No se si se entiende mas o menos lo que quiero hacer ?? Para ser mas
explícito...
hay alguna forma de hacer esto ?? alguien lo ha hecho ?? documentos ?? URLs
?? en fin ...
Gracias por leerme ...
---
Agustin Galloso Viera
[EMAIL PROTECTED]
