Tenemos que hacer uso de las etiquetas onmouseover. Veamos un ejemplo sencillo:
<html>
<head>
</head>
<body>
<img id="img_principal" src="url_imagen_grande" alt="Imagen principal">
<ul>
<li><img class="img_uno" src="url_imagen_pequeña_1" alt="Imagen secundaria" onmouseover="document.getElementById('img_principal').src='url_imagen_pequeña_1';"></li>
<li><img class="img_dos" src="url_imagen_pequeña_2" alt="Imagen secundaria" onmouseover="document.getElementById('img_principal').src='url_imagen_pequeña_2';"></li>
<li><img class="img_tres" src="url_imagen_pequeña_3" alt="Imagen secundaria" onmouseover="document.getElementById('img_principal').src='url_imagen_pequeña_3';"></li>
</ul>
</body>
</html>
Encuentra otras soluciones en el nuevo blog ó descargate themes y módulos en www.softwild.es
Si necesitas ayuda escribe a través del formulario de contacto en la parte derecha.
Nota: Antes de acceder al formulario aparecerá un anuncio, que en 5 segundos podrás cerrar.
no me quedo muy claro amigo algun ejemplo pudieras dar gracias
ResponderEliminarEspero solucione tu problema, si no es así escríbeme con la tarea que necesites hacer e intento ayudarte específicamente en lo que necesites.
EliminarPara que el ejemplo anterior funcione sólo hay que sustituir url_imagen_pequeña_1,url_imagen_pequeña_2 y url_imagen_pequeña_3 por imagenes. Este ejemplo hace que al posicionarse encima de una imagen "pequeña" se ponga en el lugar de la grande. NOTA: Las imagenes pequeñas habrá que hacerlas pequeñas usando CSS.
<html>
<head>
<style type="text/css">
#img_principal{width: 400px; height:300px;}
.img_uno{ width: 50px; height:50px}
.img_dos{ width: 50px; height:50px}
.img_tres{ width: 50px; height:50px}
</style>
</head>
<body>
<img id="img_principal" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRM22KkFvJ024XNzf3_zK7s1N4IY8RKQlj-p-VklEHzl444gQ9C" alt="Imagen principal">
<ul>
<li><img class="img_uno" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQXO9eEk66JHsJLk95iRm2mCnVoCRfREpqzWUIq7rIeSs99Ka_-ZQ" alt="Imagen secundaria" onmouseover="document.getElementById('img_principal').src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQXO9eEk66JHsJLk95iRm2mCnVoCRfREpqzWUIq7rIeSs99Ka_-ZQ';"></li>
<li><img class="img_dos" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3OEu7B5bKBFK4Xngc3UXelDxq9Tw1bX8ouuIqnQGmZ3EULAjY9w" alt="Imagen secundaria" onmouseover="document.getElementById('img_principal').src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3OEu7B5bKBFK4Xngc3UXelDxq9Tw1bX8ouuIqnQGmZ3EULAjY9w';"></li>
<li><img class="img_tres" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRM22KkFvJ024XNzf3_zK7s1N4IY8RKQlj-p-VklEHzl444gQ9C" alt="Imagen secundaria" onmouseover="document.getElementById('img_principal').src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRM22KkFvJ024XNzf3_zK7s1N4IY8RKQlj-p-VklEHzl444gQ9C';"></li>
</ul>
</body>
</html>