stackoom
  简体   繁体   中英

javascript onmouseover change background image

 原文  2015-12-29 18:17:09  0   6    javascript/ onmouseover/ onmouseout

Question

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

6 answers

solution1
 3  2015-12-31 21:34:18

 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>

solution2
 1  2020-04-25 09:12:58

function upDate(previewPic){

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

}

solution3
 0  2015-12-29 18:25:37

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;
}

solution4
 0  2015-12-29 19:34:15

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>

solution5
 0  2016-05-12 09:31:00

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";
}

solution6
 0  2021-07-17 07:28:54

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";
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Javascript onmouseover background image change onMouseOver change background image position Simple javascript problem - onMouseOver div background change onMouseOver- DIV background image change but with restriction: No javascript “tag”, no Style css? Image onmouseover - change picture and text using JavaScript JavaScript How to make an image to change color onmouseover? Javascript function to change div visibility onmouseover of an image javascript change image when onmouseover and onmouseout How to make onmouseover on menu link change background image? Change Image OnClick & OnMouseover
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM