堆栈内存溢出
  繁体   English   中英

javascript onmouseover 改变背景图片

[英]javascript onmouseover change background image

 原文  2015-12-29 18:17:09  9   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