Foros del Web » Creando para Internet » CSS »

Tabs para imagenes igual a este ejemplo

Estas en el tema de Tabs para imagenes igual a este ejemplo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/06/2012, 13:53
 
Fecha de Ingreso: febrero-2008
Ubicación: /home/public_html
Mensajes: 551
Antigüedad: 16 años, 8 meses
Puntos: 10
Tabs para imagenes igual a este ejemplo

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
__________________
Jabin Esban
  #2 (permalink)  
Antiguo 05/06/2012, 16:53
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 4 meses
Puntos: 1012
Respuesta: Tabs para imagenes igual a este ejemplo

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>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 06/06/2012, 12:46
 
Fecha de Ingreso: febrero-2008
Ubicación: /home/public_html
Mensajes: 551
Antigüedad: 16 años, 8 meses
Puntos: 10
Respuesta: Tabs para imagenes igual a este ejemplo

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.
__________________
Jabin Esban
  #4 (permalink)  
Antiguo 06/06/2012, 13:31
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 4 meses
Puntos: 1012
Respuesta: Tabs para imagenes igual a este ejemplo

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]
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #5 (permalink)  
Antiguo 13/06/2012, 21:51
 
Fecha de Ingreso: febrero-2008
Ubicación: /home/public_html
Mensajes: 551
Antigüedad: 16 años, 8 meses
Puntos: 10
Respuesta: Tabs para imagenes igual a este ejemplo

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 ;)
__________________
Jabin Esban

Etiquetas: ejemplo, igual, imagenes, tabs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:20.