[jQuery] a simple rollover function
Hello! I am creating a new script where an image have areas where when
you place your move over a part of that image, a div will appear at
the bottom, and when you click on another area, the current visible
div will be hidden and a new div that has other text will appear.
Here's my code:
$(document).ready(function(){
test1();
test2();
});
function test1(){
$('#CFnum1').mouseover(function() {
$('#comfort_flex_hold').find('#comfort_flex01').show("slow");
$
('#comfort_flex_hold').find('div').not('#comfort_flex01').hide("slow");
return false;
});
}
function test2(){
$('#CFnum2').mouseover(function() {
$('#comfort_flex_hold').find('#comfort_flex02').show("slow");
$
('#comfort_flex_hold').find('div').not('#comfort_flex02').hide("slow");
return false;
});
}
It's a newbie code, I know and not a very good one indeed. As you can
see, if I have more than 15 areas, i'll have to create a code of each
area! I know there is a better way to create the same effect with
lesser codes but I don't know how jQuery works completely.
I thought this would work:
$(document).ready(function(){
test1();
});
function test1(imgID,number){
$(imgID).mouseover(function() {
$('#comfort_flex_hold').find('#comfort_flex1').show("slow");
$
('#comfort_flex_hold').find('div').not('#comfort_flex1').hide("slow");
return false;
});
}
whereas the image has:
<img id="CFnum1" src="../images/mattress/numbers/BSnum1.gif"
height="21" width="39" onmouseover="test1(this.id, '1'); this.src='../
images/mattress/numbers/BSnumA1.gif'" onmouseout="this.src='../images/
mattress/numbers/BSnum1.gif'" style="position:absolute; margin-top:
90px; margin-left:200px; z-index:2; cursor:hand; cursor:pointer;" />
I stump. Could you guys please help me out? Thanks in advance! :)