Search code examples
javascriptjqueryhtmleffectrollover

Javascript/JQuery to do rollover-effect confirm

So basically I'm doing some distance courses on Javascript with help of JQuery. On one of the assignments it demands that:

  • To do a image change
  • That image change with a rollover-effect.

Because it's originatelly on swedish (I'm born in sweden and speak swedish) I get a bit confused cause every help of information I get on the internet on my programming is in english. Hope you understand..

$(document).ready(function (){

//bildbyte(attr) med rollover-effekt
$('#lamp').mouseover(function() {
    $(this).attr('src', 'pic_bulbon.gif');
}); 
$('#lamp').mouseout(function() {
    $(this).attr('src', 'pic_bulboff.gif');
});
});

Would it seem acceptable? Would you confirm it? I'm just a bit confused on the rollover effect. The code will represent a lamp that isn't light up. But as soon you move your mouse over it goes on.

Opinions?

Solution

  • I might try using jQuery's hover() function. This would help make your code easier to read, and it might help you organize what happens when the bulb turns on/off. For example:

    var bulbOn = function() { ... }

var bulbOff = function() { ... }

$('#lamp').hover(bulbOn, bulbOff);

    Here's a jsfiddle to illustrate.