我想换2张照片，而鼠标悬停。 ＃例如。一旦我将鼠标悬停在图像上将会改变......直到我再次鼠标滑过时它才会改变。我该怎么做。这里是我的代码我想的onmouseover再次更改2个图像和agian
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";
}
}更新：我觉得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()">J.Hasan，有更简单的方法。你可以设置其中一个图像作为背景图像到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>
如果是幻灯片，你可以试试这个。这个幻灯片的美妙之处在于它不会在页面加载时加载所有图像。只需制作一张白色图像（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>
这是一种画廊事情 –
的很可能是一个更有效的方式，但如果你只是想要它的工作尝试像这样的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;
}
}
所有这一切都把网址放入一个数组，并将继续通过它们循环。我做这个很快，所以有点混乱。 在HTML它仅仅是：
<button id="myButton" onmouseover="rollOver()"></button>
编辑********************************** *
当你想在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()">
@ –
$(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"/>
我可以的onmouseout如果创建一个功能我想使这...假设此搜索是主要的图像...的onmouseover它会改变到image2 ...和image1会来，当我再次鼠标悬停 –
已更新。请再检查一次。 –
我不想更改背景图片...我想改变图像源... ''
更新 –