Currently, I am working on creating a unique "button" that contains multiple images to create a slideshow effect. Whenever the button is hovered over, the image changes to another one.
However, there's a problem - when the slideshow image changes, the hover effect is lost as the mouse technically moves away from the image.
I attempted to incorporate a fading effect into my button, but most resources suggest using hover functions instead of MouseOver and MouseOut events.
This begs the question: which is better in terms of potential capabilities - Hover or MouseOver?
Is it feasible to pause the slideshow when hovering over it? And if so, how can I achieve this?
Here is the current code snippet:
function.js
$(function () {
$('#01 img:gt(0)').hide();
setInterval(function () {
$('#01 :first-child').fadeOut(1500)
.next('img').fadeIn(1500)
.end().appendTo('#01');
},
3000);
});
$(document).ready(function () {
$("#image1").mouseover(function () {
$(this).attr("src", "images/board_01_over.jpg");
});
$("#image1").mouseout(function () {
$(this).attr("src", "images/board_01_01.jpg");
});
});
main.css
#board {
float: left;
width: 998px;
overflow: hidden;
}
.fadein {
float: left;
position: relative;
width: 240px;
height: 140px;
margin: 1px 1px 1px 1px;
}
.fadein img {
position: absolute;
left: 0;
top: 0;
height: 140px;
opacity: 0.6;
overflow: hidden;
}
.fadein img:hover {
opacity: 1;
}
Main.html
<div id="board">
<div class="fadein" id="01">
<img src="images/board_01_01" id="image1" />
<img src="images/board_01_02.jpg" id="image2" />
</div>
</div>