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

1572
Visitas

4
Resp

Por africanus1989 hace 76 meses

Principiante

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 76 meses

Administrador

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 76 meses

Principiante

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 76 meses

Principiante

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 76 meses

Principiante