ansaurus

Question

Identifying li tags

Answer 1

+3 A:

$("li#yourid").hover(function() {
   $(this).html('<img src="yourimage.png" />');
});

Is just one of the many ways. The examples given here are very similar to what you are trying to achieve.

Edit: the code you added doesn't really relate to your original question

Otto Allmendinger 2010-02-05 17:53:36

Not a jquery question, jquery is nice but it shouldn't be the answer to every js question.

Rob 2010-02-05 18:06:16

@Rob: why not ?

Otto Allmendinger 2010-02-05 19:37:46

The code he added did relate to the original question. He wants another image to change as you hove over a list (article title it looks like).

Hogan 2010-02-05 22:04:36

Unless the asker specifically states jQuery is not desired or the task is simple to solve without a library, I don't see why there is anything wrong with posting a jQuery solution. It's good to know how to accomplish tasks without it, but on the other hand, the library WAS created to make dom manipulation, event and ajax tasks simpler.

Alex JL 2010-02-06 16:09:58

Answer 2

A:

If you assign unique id to each li in ul, than you are able just to say in css file

#liId img { display: none; }
#liId:hover img { display: block; }

Works everywhere, except IE6 and below, but fix can be found.

P.S. Didn't see that hover is needed, thanks for -1

Vestel 2010-02-05 17:53:39

-1 I believe he wants to do this on a hover and not in general.

Vivin Paliath 2010-02-05 17:59:29

Answer 3

A:

I'm not sure I understand your question. Do you mean you want to attach events so that an image is shown for a specific li on a mouseover? If so:

Using jQuery:

jQuery("li#idOfTheLi").mouseover(function() {
    //code to handle the mouseover event
});

A correction to that CSS solution posted above:

#li1:hover { background-image: url(picture/1.jpg); }
#li2:hover { background-image: url(picture/2.jpg); }

Vivin Paliath 2010-02-05 17:54:18

The order in SO is not static. A question above or below may change.

Hogan 2010-02-05 18:03:59

Answer 4

+1 A:

NEW VERSION

Given the code above here is the javascript that will work (tested on jsbin, but I can't save it because of work firewalls.)

var idMap = {
  id1: "http://sstatic.net/so/img/logo.png",
  id2: "http://sstatic.net/sf/img/logo.png",
  id3: "http://sstatic.net/su/img/logo.png"
};

$(document).ready(function() {
    $("li").hover(
        function(){
            $('#imgid')[0].src = idMap["id"+this.id.toString()];
        },
      function(){
        ;}
    );
});

change the html like this:

  <div id="articleimage" style="float:right; width:350px">
<img id="imgid" src='http://sstatic.net/so/img/comment-up-hover.png'/&gt;
    </div>

original post

Here is a trick using just JavaScript and no library. Make an object with the field names equal to ids then you can reference the object to get the data using array notation. Here is a simple example.

var idMap = {
  id1: "path1",
  id2: "path2",
  id3: "path3"
};

then when you want to get the path if you have an obj with id you would say

idMap[obj.id]; // this is path1 - path3 if obj.id is one of id1 - id3

or for question (in jQuery):

$("li").hover(function () {
   // display image located at idMap[this.id]
});

I leave how you want to display up to you.

Hogan 2010-02-05 17:57:08

Answer 5

+1 A:

Something like this perhaps?

$("li").mouseover(function(){
 var id = $(this).attr("id");
});

Mike Robinson 2010-02-05 18:05:49

Answer 6

A:

You can use Javascript BUT you can use CSS sprite to achieve this as well. Note you NEED to you tag because :hover support isn't support in all elements in all browsers. Only tag :hover support is cross-browser.

<ul id="mylist">
  <li id="item1"><a href="javascript:void(0);">SEO Text description of the Image.</a></li>
  <li id="item2"><a href="javascript:void(0);">SEO Text description of the Image.</a></li>
</ul>

For the CSS styles, you will need to do the following so that your a tag is a block element.

#mylist a{
  display:block;
  width:100px;
  height:100px;
}
#mylist a{
}
#mylist #item1 a{ background: url(spriteimage1.jpg) top left;}
#mylist #item1 a:hover{ background: url(spriteimage1.jpg) bottom left;}

#mylist #item2 a{ background: url(spriteimage2.jpg) top left;}
#mylist #item2 a:hover{ background: url(spriteimage2.jpg) bottom left;}

You will make sure your list style accomodates your images as well. That is it should also be set as block elements or with set width/height.

JONYC 2010-02-05 19:31:04

Answer 7

A:

A non frameworked answer would imply using DOM functions.

childNodes perhaps... Anyone willing to complete this? I'm quite short of time :/

Followup: now I remember... document.getElementsByTagName should do

Alfabravo 2010-02-05 19:44:10

Answer 8

+1 A:

Hi all, For anyone out there who may want to implement this functionality, here is the script the functions the way I described above. Thanks to all, hopefully this code will help someone else.

<script type="text/javascript">
$(document).ready(function() {
    var img1 = new Image(); 
    var img2 = new Image(); 
    var img3 = new Image();
    $(img1).attr('src', 'images/img1.jpg');     
    $(img2).attr('src', 'images/img2.jpg');     
    $(img3).attr('src', 'images/img3.jpg');
    var imgs = new Array();
    imgs[0] = img1;
    imgs[1] = img2;
    imgs[2] = img3;
    $("li").hover(
        function(){
            $('#articleimage').append(imgs[$(this).index()]); 
        },
        function(){
            $('#articleimage').find('img').remove();
        }
    );
});

Kind regards, Faiyo.

Binaryrespawn 2010-02-09 18:16:24

ansaurus

tags:

views:

answers:

Identifying li tags

related questions