CODEWITHSUNDEEP
javascript
user379888
user379888

Reputation:

Background image does not change on hover

I have written the following code to change the background image of a div on mouse hover on another area. The image does not change.

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

HTML:

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

CSS:

/*Name this external file gallery.css*/
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%;
}

JavaScript:

/*Name this external file gallery.js*/

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

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

Codepen

Upvotes: 0

Views: 128

Answers (2)

Sinan Guclu
Sinan Guclu

Reputation: 1087

If you are willing to modify the HTML slightly, this can be achieved using only CSS by using the adjacent element selector.

Moving the thumbnails above the image in the HTML, you can use this selector to change the adjacent div's background. Give each of the thumbnails an ID:

<img class="preview" id="bacon" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg">

<img class="preview" id="bacon2" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" >

<img class="preview" id="bacon3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy">

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

And use the ~ selector in the CSS:

#bacon:hover ~ div {  // The selector will change the adjacent div on hover
   background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg");
}
#bacon2:hover ~ div {
   background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG");
}
#bacon3:hover ~ div {
   background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg");
}

You can re-position the elements to match the original layout, see this jsFiddle for a working example.

Upvotes: 0

Rayon
Rayon

Reputation: 36599

Concatenate variable by escaping double quote or else variable name will be treated as string literal.

/*Name this external file gallery.js*/

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

function unDo() {

  document.getElementById("image").innerHTML = "Hover over an image below to display here.";
  document.getElementById("image").style.backgroundColor = "8e68ff";
  document.getElementById("image").style.backgroundImage = "url('')";

}
/*Name this external file gallery.css*/

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%;
}
<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: 2

Related Questions