Este ejemplo pretende cómo mostrar una imagen más grande cuando el puntero del mouse se sitúe en la imagen original. El truco aquí es conseguir la ruta de la imagen
original y establecer el tamaño real a un tamaño más grande en la pantalla, para comprender mejor como funciona hay que poner el
codigo de abajo entre las etiquetas de encabezado de la pagina <head> </head>
<script type="text/javascript">
function MostrarImagenAmpliada(obj) {
document.getElementById("ContenedorImagen").innerHTML = " <img src='" + obj.src + "'+'width=150 height=200' >";
}
function MostrarImagenDefecto(obj) {
document.getElementById("ContenedorImagen").innerHTML = "";
}
function move_Area(event) {
event = event || window.event;
ContenedorImagen.style.left = event.clientX + document.body.scrollLeft + 10;
ContenedorImagen.style.top = event.clientY + document.body.scrollTop + 10;
}
document.onmousemove = move_Area;
</script>
Ya tenemos listo nuestro codigo JavaScript es hora de programar la Interfaz del Usuario, Agregar un Control Imagen
entre las Etiquetas <body></body>
<div style="cursor:pointer">
<asp:Image ID="Image1" runat="server" Width="60px" Height="80px" ImageUrl="~/Imagenes/balon.jpg" onmouseover="MostrarImagenAmpliada(this);" onmouseout="MostrarImagenDefecto(this);"/>
</div>
<div id="ContenedorImagen" style="position: absolute; z-index:2"></div>
</div>