CODEWITHSUNDEEP
jqueryimageonmouseover
JohnSmith
JohnSmith

Reputation: 437

Hover multiple different element in list, show individual image

I try to accomplish a list of elements on which you hover a different image are displayed.

Something like this

<ul id="test">
 <li id="sidebarList_1">Image 1</li>
 <li id="sidebarList_2">Image 2</li>
 <li id="sidebarList_3">Image 3</li>
<ul>


<div id="imgDiv_1">
    <img src="http://www.freemacware.com/wp-content/images/smultron1.png" />
</div>
<div id="imgDiv_2">
    <img src="http://www.freemacware.com/wp-content/images/smultron2.png" />
</div>
<div id="imgDiv_3">
    <img src="http://www.freemacware.com/wp-content/images/smultron3.png" />
</div>

My jQuery looks like this

$(this).mouseover(function() {
    $("#imgDiv_1").css('visibility','visible'); 
}),

$(this).mouseout(function() { 
    $("#imgDiv_1").css('visibility','hidden'); 
});

As seen it is static as it is now. I tried something like this to get the number of the id element in the li (ex sidebarList_1):

$(this).mouseover(function() {   
    var myString = $(this).val().split("_").pop();   
    $("#imgDiv_" + myString).css('visibility','visible'); 
}),

$(this).mouseout(function() { 
    var myString = $(this).val().split("_").pop();
    $("#imgDiv_" + myString).css('visibility','hidden'); 
});

​But this does'nt work. How can I accomplish what Im trying to do?

Upvotes: 0

Views: 3842

Answers (4)

Chris
Chris

Reputation: 726

Make it both better semantically, keyboard accessible, and easier on yourself by making the hover items links:

<ul id="test">
 <li id="sidebarList_1"><a href="#imgDiv_1">Image 1</a></li>
 <li id="sidebarList_2"><a href="#imgDiv_2">Image 2</a></li>
 <li id="sidebarList_3"><a href="#imgDiv_3">Image 3</a></li>
<ul>

and Jquery:

$('#test li a').bind('mouseenter focusin',function() {
    $($(this).attr('href')).show();
}).bind('mouseleave focusout',function() {
    $($(this).attr('href')).hide();
});

This means you arnt mucking about with string manipulation, and if a user has JS turned off on their browser, the relevant items are still semantically linked.

Upvotes: 0

wirey00
wirey00

Reputation: 33661

You should learn how to use $(this) or this. The way you are using it, it refers to nothing really. When you would want to use this would be like this

$('div').click(function(){
    $(this) //<--- refers to the div that was clicked
});

You can use 

$('div').hover(
    function(){ //<-- Mouse in

    }
);function(){  //<-- Mouse out

};

Upvotes: 0

James Allardice
James Allardice

Reputation: 166001

I would add a data-* attribute to your li elements, whose value corresponds to the relevant div:

<ul id="test">
 <li id="sidebarList_1" data-img="imgDiv_1">Image 1</li>
 <li id="sidebarList_2" data-img="imgDiv_2">Image 2</li>
 <li id="sidebarList_3" data-img="imgDiv_3">Image 3</li>
<ul>

And then use the following jQuery:

$("#test").on("mouseover mouseout", "li", function () {
    $("#" + $(this).data("img")).toggle();
});​

Here's a working example.

This uses the on method, with a selector as the second argument, to take advantange of event delegtation (there's only one event handler instead of one for each li element). It assumes that the div elements are hidden by default, so on mouseover, the toggle call will make the hovered div visible.

Useful references

Upvotes: 5

Uttara
Uttara

Reputation: 2534

try using this

$("#test li").mouseover(function() {   
    var myString = $(this).attr("id").replace("sidebarList_","");   
    $("#imgDiv_" + myString).css('visibility','visible'); 
});

$("#test li").mouseout(function() { 
    var myString = $(this).attr("id").replace("sidebarList_","");  
    $("#imgDiv_" + myString).css('visibility','hidden'); 
});

Upvotes: 0

Related Questions