CODEWITHSUNDEEP
javascriptonmouseoveronmouseout
Palaniichuk Dmytro
Palaniichuk Dmytro

Reputation: 3183

javascript onmouseover change background image

I need to create simple photo gallery with JavaScript. My code doesn't works

function upDate(previewPic){
document.getElementById('image').style.backgroundImage = "url('previewPic.src')";
document.getElementById('image').innerHTML = previewPic.alt;

In this function I should change the URL for the background image of the div with the id="image" to the source file of the preview image

HTML code:

<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()">

Upvotes: 1

Views: 10442

Answers (6)

Shamanth R
Shamanth R

Reputation: 1

function upDate(previewPic){
      document.getElementById('image').style.backgroundImage = 
      "url('" +previewPic.src + "')";
      document.getElementById('image').innerHTML = previewPic.alt;
}

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

Upvotes: 0

John Paul Babu
John Paul Babu

Reputation: 11

function upDate(previewPic){

    document.getElementById('image').style.backgroundImage="url('" + previewPic.src + "')"; 
    document.getElementById('image').innerHTML=previewPic.alt;

}

Upvotes: 1

noobninja
noobninja

Reputation: 910

function upDate(previewPic){
  var src = previewPic.getAttribute("src");
  var alt = previewPic.getAttribute("alt");
  document.getElementById('image').style.backgroundImage = "url('" + src + "')";
  document.getElementById('image').innerHTML = alt;
}

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

Upvotes: 0

Wauky
Wauky

Reputation: 31

function upDate(previewPic){
   var src = previewPic.getAttribute( "src" );
   var alt = previewPic.getAttribute( "alt" );
   document.getElementById('image').style.backgroundImage = "url('" + src + "')";
   document.getElementById('image').innerHTML = alt;
}

  function unDo(X){
   X = document.getElementById('image');
   X.style.backgroundImage = "url('')";
    document.getElementById('image').innerHTML = "Hover over an image below to display here";
  
}
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%;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Photo Gallery</title>
	</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>

Upvotes: 3

zer00ne
zer00ne

Reputation: 44086

I made a demo with the intent to show what you needed corrected and I kept adding, sorry. You'll find the recommended changes below. The reason why the images do not match what's hovered on is because the source of the images are dynamic. It'll function properly with your static images.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>34516675</title>
<style>
section { padding: 10%; }
figure { margin: 0 auto; }
#frame { background-image: url('data:image/gif; base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA='); background-repeat:no-repeat; background-clip:border-box; background-size:contain; width: 480px; height: 270px; border: 1px solid blue; margin: 0 auto; }
.preview { cursor:pointer; }
figcaption{ text-align: center; font: small-caps 400 16px/1.45 "Palatino Linotype"; }
 #gallery { width: 490px; }
</style>
</head>
<body>  
<section>
<figure>
<div id="frame"></div>
    <figcaption id="caption"></figcaption>
</figure>

<figure id="gallery">
<figcaption>Hover over an image below to display above.</figcaption>
<img class="preview" id="pic1" alt="Styling with a Bandana" src="https://placeimg.com/160/90/tech" onmclick="upDate(1)">

<img class="preview" id="pic2" alt="With My Boy" src="https://placeimg.com/160/90/people" onclick="upDate(2)">

<img class="preview" id="pic3" src="https://placeimg.com/160/90/animals" alt="Young Puppy" onclick="upDate(3)">
</figure>
</section>
<script>
var gallery = document.getElementById('gallery');
gallery.addEventListener('mouseover', function(e) {
	 if (e.target !== e.currentTarget) {
        var target = e.target.id;
        upDate(target);
    }
    e.stopPropagation();
}, false);

function upDate(target){
	var tgt = document.getElementById(target);
	var src = tgt.src;
	var alt = tgt.alt;
	var fig = document.getElementById('frame');
	var cap = document.getElementById('caption');
	fig.style.backgroundImage = "url("+src+")";
  cap.innerHTML = alt;
}
</script>
</body>
</html>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68433

it should be 

function upDate(previewPic)
{
   var src = previewPic.getAttribute( "src" );
   var alt = previewPic.getAttribute( "alt" );
   document.getElementById('image').style.backgroundImage = "url('" + src + "')";
   document.getElementById('image').innerHTML = alt;
}

Upvotes: 0

Related Questions