堆棧內存溢出
  簡體   English   中英

javascript onmouseover 改變背景圖片

[英]javascript onmouseover change background image

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

問題描述

我需要用 JavaScript 創建簡單的照片庫。 我的代碼不起作用

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

在這個函數中，我應該將id="image"的 div 背景圖像的 URL 更改為預覽圖像的源文件

HTML 代碼：

<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 個解決方案

解決方案1
 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>

解決方案2
 1  2020-04-25 09:12:58

function upDate(previewPic){

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

}

解決方案3
 0  2015-12-29 18:25:37

它應該是

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

解決方案4
 0  2015-12-29 19:34:15

我做了一個演示，目的是展示您需要更正的內容，我一直在添加，抱歉。 您將在下面找到建議的更改。 圖像與懸停的內容不匹配的原因是圖像的來源是動態的。 它可以與您的靜態圖像一起正常工作。 

 <!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>

解決方案5
 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";
}

解決方案6
 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";
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript onmouseover背景圖片更改 onMouseOver更改背景圖像的位置 簡單的JavaScript問題-onMouseOver div背景更改 onMouseOver- DIV 背景圖像更改但有限制：沒有 javascript “標簽”，沒有樣式 css？ 圖像onmouseover - 使用JavaScript更改圖片和文本 JavaScript如何在鼠標懸停時使圖像改變顏色？ Javascript函數可在鼠標懸停時更改div可見性 javascript在onmouseover和onmouseout時更改圖像 如何使菜單鏈接上的onmouseover更改背景圖像？ 更改圖像點擊和鼠標懸停
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM