javascript - Cons of MouseOver for webpages -
so creating "button" multiple images within slideshow , whenever mouseover it, image changes image.
however whenever slideshow image changes, mouseover effect gets removed mouseout state since technically mouse no longer on image.
i tried having fade effect button of searches lead using hover functions instead of mouseover , mouseout.
so wondering if hover better mouseover in terms of it's potential capabilities?
is possible pause slideshow event on hover, etc? , how can go doing it?
here current code:
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>
since using jquery can utilize hover()
function.
$("#image1").hover(function () { $(this).attr("src", "images/board_01_over.jpg"); }, function () { $(this).attr("src", "images/board_01_01.jpg"); });
for slider it's easier make little object out of it's easier control.
var slideshow = { interval:null, start: function () { ... initialize ... // catch interval id can stop later on this.interval = window.setinterval(this.next, 3000); }, next: function () { /* * cannot refer keyword in function * since gets executed outside object's context. */ ... logic ... }, stop: function () { window.clearinterval(this.interval); } };
now can call
slideshow.start(); slideshow.stop();
from anywhere start , stop slider.
Comments
Post a Comment