堆栈内存溢出
  简体   繁体   English

javascript onmouseover 改变背景图片

[英]javascript onmouseover change background image

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

问题描述

I need to create simple photo gallery with JavaScript.我需要用 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在这个函数中，我应该将id="image"的 div 背景图像的 URL 更改为预览图像的源文件

HTML code: 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

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

解决方案4
 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>

解决方案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背景图片更改 - Javascript onmouseover background image change onMouseOver更改背景图像的位置 - onMouseOver change background image position 简单的JavaScript问题-onMouseOver div背景更改 - Simple javascript problem - onMouseOver div background change onMouseOver- DIV 背景图像更改但有限制：没有 javascript “标签”，没有样式 css？ - onMouseOver- DIV background image change but with restriction: No javascript “tag”, no Style css? 图像onmouseover - 使用JavaScript更改图片和文本 - Image onmouseover - change picture and text using JavaScript JavaScript如何在鼠标悬停时使图像改变颜色？ - JavaScript How to make an image to change color onmouseover? Javascript函数可在鼠标悬停时更改div可见性 - Javascript function to change div visibility onmouseover of an image javascript在onmouseover和onmouseout时更改图像 - javascript change image when onmouseover and onmouseout 如何使菜单链接上的onmouseover更改背景图像？ - How to make onmouseover on menu link change background image? 更改图像点击和鼠标悬停 - Change Image OnClick & OnMouseover
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM