我想再次在鼠标悬停上更改 2 个图像,然后 agian
i want to change 2 images onmouseover again and agian
我想在鼠标悬停时更改 2 张图片。 #例如。一旦我将鼠标悬停在图像上,图像就会改变......它不会改变,直到我再次将鼠标悬停在上面。我该怎么做。这是我的代码
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";
}
}
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>
已更新: 我认为 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()">
这可能是一种更有效的方法,但如果您只是想让它正常工作,请像这样尝试您的 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;
}
}
所有这些所做的就是将 url 放入一个数组中并继续循环遍历它们。我做的很快,所以有点乱。
在 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"/>
我想在鼠标悬停时更改 2 张图片。 #例如。一旦我将鼠标悬停在图像上,图像就会改变......它不会改变,直到我再次将鼠标悬停在上面。我该怎么做。这是我的代码
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";
}
}
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>
已更新: 我认为 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()">
这可能是一种更有效的方法,但如果您只是想让它正常工作,请像这样尝试您的 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;
}
}
所有这些所做的就是将 url 放入一个数组中并继续循环遍历它们。我做的很快,所以有点乱。 在 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"/>