我想再次更改2张图片onmouseover和agian
[英]i want to change 2 images onmouseover again and agian
问题描述
I want to change 2 pictures while mouseover. 
我想在鼠标悬停时更改2张图片。 #EG once i will mouseover the image will change...it will not change until I mouseover again. #EG一旦我将鼠标悬停在图像上，它将发生变化...直到再次将鼠标悬停在此位置，图像才会发生变化。 how can I do it. 我该怎么做。 Here's my code 这是我的代码
function updatePic(){ if(document.getElementById("dpic").src == "images/h1.jpg"){ document.getElementById("dpic").src = "images/h.jpg"; } if(document.getElementById("dpic").src == "images/h.jpg"){ document.getElementById("dpic").src = "images/h1.jpg"; } }
4 个解决方案
解决方案1
0 2016-02-29 21:17:43
J.Hasan, there are easier ways. 哈桑（J.Hasan），有更简单的方法。 Can you set one of the images as a background image to a div? 您可以将其中一张图片设置为div的背景图片吗？
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
div {
width:100px;
height:100px;
background: url(image1.jpg);
background-repeat: no-repeat;
background-size:100% 100%;
}
img {
width:100%;
height:100%;
opacity:0;
}
img:hover {opacity:1;}
</style>
</head>
<body>
<div>
<img src="image2.jpg">
</div>
</body>
</html>
If it's a slideshow you want, try this. 如果要播放幻灯片，请尝试此操作。 The beauty of this slideshow is that it does not load all the images when the page loads. 幻灯片的妙处在于，它不会在页面加载时加载所有图像。 Just make a white image (img0.jpg) to set the size of the slideshow in the "slideshowWrap" div. 只需制作一张白色图像（img0.jpg），即可在“ slideshowWrap” div中设置幻灯片的大小。
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="_/js/slides.js"></script>
<script>
function showSlides(){
// SETTINGS
var rotation = 5000; // set rotation speed (milliseconds)
var transition = 1000; // set transition speed (milliseconds)
var path = "_/images/banners/"; // the path to the slides (images)
// SLIDES
var slides = [ // add slides (images) to the slideshow (no comma after last slide)
"img1.jpg",
"img2.jpg",
"img3.jpg",
"img4.jpg"
];
// SLIDESHOW
var slideAmt = slides.length -1;
slideTrn ++;
slideTrn = (slideTrn > 2)?1:slideTrn;
if(firstSlide == true){
// slideCnt = 0
slideCnt ++;
$("#slide1").attr("src", path + slides[slideCnt]); // slide 0
$("#slide1").css({"z-index":"1","opacity":"1"});
slideCnt ++;
slideCnt = (slideCnt > slideAmt)?0:slideCnt;
$("#slide2").attr("src", path + slides[slideCnt]); // slide 1
$("#slide2").css({"z-index":"2",});
firstSlide = false;
}
else{
if(slideTrn == 2){
// slideCnt = 1
$("#slide2").animate({opacity:"1"}, transition, function(){ // slide 1 fades in
$("#slide1").css({"opacity":"0"}); // slide 0
$("#slide2").css({"z-index":"1"}); // slide 1
$("#slide1").css({"z-index":"2"});
slideCnt ++;
slideCnt = (slideCnt > slideAmt)?0:slideCnt;
$("#slide1").attr("src", path + slides[slideCnt]); // slide 2
});
}
else{
// slideCnt = 2
$("#slide1").animate({opacity:"1"}, transition, function(){
$("#slide2").css({"opacity":"0"});
$("#slide1").css({"z-index":"1"});
$("#slide2").css({"z-index":"2"});
slideCnt ++;
slideCnt = (slideCnt > slideAmt)?0:slideCnt;
$("#slide2").attr("src", path + slides[slideCnt]);
});
}
}
var t = setTimeout(showSlides, rotation);
}
function setValues(){
firstSlide = true;
slideCnt = -1;
slideTrn = 0;
manSlide = 0;
}
window.addEventListener("load", setValues);
window.addEventListener("load", showSlides);
</script>
<style>
#slideshowWrap {
width:100%;
min-height:1px;
overflow:auto;
</style>
</head>
<body>
<div id="slideshowWrap" style="position:relative;overflow:hidden;">
<img alt="" class="blank" src="img0.jpg"> <!-- set white image just to set the size of div "slideshowWrap" -->
<img alt="" class="slide" src="_/" id="slide1">
<img alt="" class="slide" src="_/" id="slide2">
</div>
</body>
</html>
解决方案2
0 已采纳 2016-02-29 21:18:07
UPDATED: I think onmouseenter is the mouse event that you're looking for: 更新：我认为onmouseenter是您要查找的鼠标事件：
function change() { var current = document.getElementById("image").getAttribute("src"); if (current == "http://i.imgur.com/HNj6tRD.jpg") { document.getElementById("image").setAttribute("src", "http://i.imgur.com/3jxqrKP.jpg"); } else { document.getElementById("image").setAttribute("src", "http://i.imgur.com/HNj6tRD.jpg"); } }
#image { width:550px; height:150px; position:relative; background-repeat: no-repeat; background-size:100% 100%; }
<img id="image" alt=image src="http://i.imgur.com/HNj6tRD.jpg" onmouseenter="change()">
解决方案3
0 2016-02-29 21:29:12
The may well be a more efficient way but if you just want it to work try your JS like this. 这可能是一种更有效的方法，但是如果您只想让它工作，请尝试这样的JS。
var x = 0;
function rollOver() {
var image1 = "url(images/RIOBtn1.gif)";
var image2 = "url(images/RIO2Rollover.gif)";
var image3 = "url(images/RIO1Rollover.gif)";
var array11 = [image1,image2,image3];
if (x == 0){
document.getElementById("myButton").style.backgroundImage = array11[x];
x++;
} else if (x == 1) {
document.getElementById("myButton").style.backgroundImage = array11[x];
x++;
} else if (x == 2) {
document.getElementById("myButton").style.backgroundImage = array11[x];
x = 0;
}
}
All this does is puts the url's into an array and will continue to loop through them. 这一切都是将url放入数组，并将继续遍历它们。 I done this as a quick so it is a little messy. 我这样做很快，所以有点混乱。 In the HTML it is just: 在HTML中，它只是：
<button id="myButton" onmouseover="rollOver()"></button>
EDIT *********************************** 编辑***************************************
As you want the src to change, the code is almost the same but changing the source. 当您希望更改src时，代码几乎相同，但是更改了源代码。
var x = 0;
function rollOver() {
var image1 = "images/RIOBtn1.gif";
var image2 = "images/RIO2Rollover.gif";
var image3 = "images/RIO1Rollover.gif";
var array11 = [image1,image2,image3];
if (x == 0){
document.getElementById("myButton").src = array11[x];
x++;
} else if (x == 1) {
document.getElementById("myButton").src = array11[x];
x++;
} else if (x == 2) {
document.getElementById("myButton").src = array11[x];
x = 0;
}
}
<img src="images/HomeBtn1.gif" id="myButton" onmouseover="rollOver()">
解决方案4
0 2016-02-29 21:53:02
$(document).ready(function () { var strImgSrc1 = "http://virtualrailfan.com/wp-content/uploads/2014/10/200_200_sample.jpg"; var strImgSrc2 = "http://www.eminenstore.com/wp-content/uploads/2012/04/samples.jpg"; $("img").mouseover(function () { if ($(this).attr("src") === strImgSrc1) { $(this).attr("src", strImgSrc2); } else { $(this).attr("src", strImgSrc1); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img border="1" src="http://www.eminenstore.com/wp-content/uploads/2012/04/samples.jpg" height="300" width="300"/>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.