Tabs para imagenes igual a este ejemplo

Jabin · #1 (**permalink**) 05/06/2012, 13:53

Estoy haciendo una web, y quiero integrar unas fotitos tipo thumbnails que cuando pase el mause se aparezca la imagen.

Osea todas las fotos se muestran en la misma pagina. He encontrado este ejemplo, lo he estudiado, pero estaba siguiendo el paso con el codigo, pero todo esta integrado, si elimino una linea, ya no funciona, no logre conseguir lo que queria.

No se si alguien sabe como se llama, por el momento lo llamo "tabs con imagenes", pero igual no me sale en el google al buscar en Es y en Ingles.

O quizas si alguien de aqui podria recomendarme ejemplos y la web de donde pueda estudiarlo o descargar el ejemplo.

Gracias

IsaBelM · #2 (**permalink**) 05/06/2012, 16:53

eso es un simple código javascript

Cita:

<html>
<head>
<script type="text/javascript">
window.onload = function () {
var elementos = document.getElementById('img').getElementsByTagNam e('img');
for (var i=0; i < elementos.length; i++) {
elementos[i].onmouseover = function () {document.getElementById('img_grande').innerHTML = '<img src='+this.src+' />';}
}
}
</script>
</head>
<body>
<div id="img">
<img src="a.jpg" width="50px" height="50px" />
<img src="b.jpg" width="50px" height="50px" />
</div>

<div id="img_grande"></div>

</body>
</html>

Jabin · #3 (**permalink**) 06/06/2012, 12:46

Hola IsaBelM, gracias por la respuesta, lo he probado, en Mozila, Chrome, IE8, y solo se muestran los pequeños graficos tipo thumbnails, pero no muestra el grafico grande al pasar el mause.

IsaBelM · #4 (**permalink**) 06/06/2012, 13:31

no estás usando ninguna herramienta de desarrollo. de lo contrario, te hubiera indicado cual es el problemas y lo habrías corregido fácilmente. fíjate en la línea #5, el espacio que hay en el método getElementByTagName(). es algo que acostumbra a hacer el foro cuando se envuelve código entre las etiquetas [quote]

Jabin · #5 (**permalink**) 13/06/2012, 21:51

Hola IsaBelM, gracias, jeje por lo apurado no me habia fijado en esa linea, ya lo correji y se ve estupendo.

Aumente una linea para que no se muestre vacio, hasta pasar el mause.

Código HTML:

<div id="img_grande"><img src="a.jpg" width="400px" height="150px" /></div>

Con esta linea, ahora ya se muestra la imagen seleccione.

Ahora si esta bien, gracias IsaBelM.

Saludos ;)