Identification des étiquettes li

J'ai trois étiquettes li et chacune a un identifiant unique et j'essaie de les associer à une image différente. En vol stationnaire, sur un li donné, l'image de ce li sera affichée en ajoutant l'image à un div. Disons qu'il n'y avait pas d'identifiant unique .... est-il possible d'associer une image différente à chaque li-étiquette?Identification des étiquettes li

Des idées?

<script type="text/javascript"> 
$(document).ready(function() { 
    var img1 = new Image(); 
    $(img1).attr('src', 'images/img1.jpg');  
    $("li").hover(
     function(){ 
      $('#articleimage').append(img1); 
     } 
    ); 
}); 
</script> 
</head> 

<body> 
<div id="parent" style="width:560px"> 
    <div id="articlelist" style="float:left; width:210px"> 
     <ul id="newslist" > 
      <li id="1">Todays world<img src='images/more.jpg'/></li>     
      <li id="2">Connecting the world<img src='images/more.jpg'/></li> 
      <li id="3">Evolution of data storage<img src='images/more.jpg'/></li> 
     </ul> 
    </div> 
    <div id="articleimage" style="float:right; width:350px"> 

    </div> 
</div>

Source

2010-02-05 Binaryrespawn

Je codé une solution et l'a affiché ci-dessous - il fonctionne testé sur jsbin (pare-feu de travail ne me laisse pas enregistrer à jsbin) – Hogan

Pour quelqu'un là-bas qui peut vouloir mettre en œuvre cette fonctionnalité, voici le script des fonctions comme je l'ai décrit au dessus. Merci à tous, espérons que ce code aidera quelqu'un d'autre.

<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(); 
     } 
    ); 
});

Source

2010-02-09 18:16:24 Binaryrespawn

Utilisez jQuery

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

est juste l'une des nombreuses façons. Les exemples donnés here sont très similaires à ce que vous essayez d'atteindre.

Edit: le code que vous avez ajouté ne pas vraiment se rapportent à votre question initiale

Source

2010-02-05 17:53:36

Pas question jquery, jquery est agréable mais il shouldn » t être la réponse à chaque question de js. – Rob

@Rob: pourquoi pas? –

Le code qu'il a ajouté correspondait à la question originale. Il veut qu'une autre image change au fur et à mesure que vous survolez une liste (titre de l'article). – Hogan

Si vous assignez identifiant unique à chaque li ul, que vous pouvez juste dire dans le fichier css

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

Fonctionne partout, sauf IE6 et ci-dessous, mais peut être trouvé.

P.S. Je n'ai pas vu que hover est nécessaire, merci pour -1

Source

2010-02-05 17:53:39 Vestel

-1 Je crois qu'il veut faire ça en stationnaire et pas en général. –

Je ne suis pas sûr de comprendre votre question. Voulez-vous dire que vous voulez associer des événements afin qu'une image soit affichée pour un li spécifique sur un survol de la souris? Si oui:

En utilisant jQuery:

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

Une correction à cette solution CSS affiché ci-dessus:

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

Source

2010-02-05 17:54:18

L'ordre dans SO n'est pas statique. Une question ci-dessus ou ci-dessous peut changer. – Hogan

NOUVELLE VERSION

Compte tenu du code ci-dessus est le javascript qui va fonctionner (testé sur jsbin, mais je ne peux pas l'enregistrer à cause de pare-feu de travail.)

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(){ 
     ;} 
    ); 
});

modifier le code HTML comme ceci:

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

message original

Voici une astuce en utilisant seulement JavaScript et pas de bibliothèque. Faites un objet avec les noms de champs égaux à ids, vous pouvez ensuite référencer l'objet pour obtenir les données en utilisant la notation de tableau. Voici un exemple simple.

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

alors quand vous voulez obtenir le chemin si vous avez un obj avec id vous dire

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

ou question (jQuery):

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

Je laisse comment vous voulez afficher jusqu'à vous.

Source

2010-02-05 17:57:08 Hogan

Quelque chose comme ça peut-être?

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

Source

2010-02-05 18:05:49

Vous pouvez utiliser Javascript MAIS vous pouvez utiliser l'image-objet CSS pour y parvenir également. Notez que vous avez besoin de marquer parce que: le soutien hover n'est pas pris en charge dans tous les éléments de tous les navigateurs. Uniquement tag: Hover support est 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>

Pour les styles CSS, vous devez effectuer les opérations suivantes afin que votre balise a soit un élément de bloc.

#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;}

Vous vous assurez que votre style de liste s'adapte également à vos images. Cela devrait également être défini en tant qu'éléments de bloc ou avec un ensemble largeur/hauteur.

Source

2010-02-05 19:31:04 jonycheung

Une réponse non structurée impliquerait l'utilisation de fonctions DOM.

childNodes peut-être ... Toute personne désirant compléter cela? Je suis assez peu de temps:/

Followup: Je me souviens maintenant ... document.getElementsByTagName devrait faire

Source

2010-02-05 19:44:10 Alfabravo

Identification des étiquettes li

Répondre

Questions connexes