Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Ayuda con una geleria dinamica con javascript

Hola amigos, estoy intentado hacer una galeria dinamica con javascript sin tocar el html ni el css pero ha resultado ser un verdadero dolor de cabeza, nada de lo que hago funciona, el trabajo consiste en cambiar el background-img de la division con la clase "image" utilizando el src de la imagen sobre la que el puntero del mouse se esta posando, cualquiera de las tres imagenes, cualquier consejo o ayuda se los agradeceria mucho.
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Photo Gallery</title>
	<script>
             function upDate(previewPic){ }

             function unDo(){ }

         </script>
<style>
body{margin: 2%; border: 1px solid black; background-color: #b3b3b3;} 
#image{         line-height:650px; 
                width: 575px; 
                height: 650px; 
                border:5px solid black; 
                 margin:0 auto; 
                background-color: #8e68ff; 
                background-image: url(''); 
                background-repeat: no-repeat; 
                color:#FFFFFF; 
                text-align: center; 
                background-size: 100%; 
                margin-bottom:25px; 
                font-size: 150%;
}  
.preview{ width:10%; margin-left:17%; border: 10px solid black;} 
 img{width:95%;} 

</style>


</head>
<body>

	<div id = "image">
		Hover over an image below to display here.
	</div>

	<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">

	<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()">

	<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">

</body>
</html>

Editado
0
Puntos
4
Resp
74
Visitas
Por africanus1989 hace 3 semanas
Principiante offline

Respuesta #1

Hola en tu código te faltaba terminar de creas las funciones javascript, te las eh terminado con un ejemplo muy sencillo que vas a pillar enseguida con tan solo 2 o 3 lineas de código, tienes que remplazar tus funciones por estas:
<script>
	 function upDate(previewPic){
	 	var imgsrc = previewPic.src;
	 	document.getElementById('image').innerHTML='<img src="'+ imgsrc +'">';

	 }

	 function unDo(){
	 	document.getElementById('image').innerHTML='Hover over an image below to display here.';
	 }

</script>
te voy a dejar una demo con tu código completo https://jsfiddle.net/datoweb/fwmg5q06/3/

Salu2
0
Puntos
Por alber hace 3 semanas
Administrador offline

Respuesta #2

Increible, muchas gracias, a mi se me estaban ocurriendo miles de ideas que no funcionaban. Muchas gracias. Como usted dijo, muy facil de entender el codigo. Muchas gracias nuevamente.
0
Puntos
Por africanus1989 hace 3 semanas
Principiante offline

Respuesta #3

tengo que quitarle el background-image cuando salga el puntero
use este codigo pero no funciona,

var image = document.getElementById("image");
image.style.backgroundImage = 'none';

porque sera?
0
Puntos
Por africanus1989 hace 3 semanas
Principiante offline

Respuesta #4

Ya lo logre, realmente no se porque este codigo funciona, quizas usted me pueda explicar el porque.
var image = document.getElementsByTagName("img")[0].removeAttribute("src");
esta linea solo deberia afectar a la primera image verdad?
0
Puntos
Por africanus1989 hace 3 semanas
Principiante offline

Relaccionados

Para comentar Inicia sesión o Registrate