Bonjour tout le monde,

J'ai une liste à puce.

Au survol d'un élément de cette liste, j'affiche une image à droite du texte.

Voici le code de la liste à puces :

<ul>
                <li id="securites.png" class="li_index" onmouseover="Afficher_Sampler(this.id);" onmouseout="Afficher_Sampler('');">Signalisation de sécurité</li>
                <li id="signalisations_batiment" class="li_index" onmouseover="Afficher_Sampler(this.id);" onmouseout="Afficher_Sampler('');">Signalétique bâtiment</li>
                <li class="li_index">Boîtes aux lettres + Poubelles + Cendriers</li>
                <li class="li_index">Signalisation routière + protection + drapeau + abris vélos + abris fumeur</li>
                <li class="li_index">Parking</li>
                <li class="li_index">Gravure + vinyle</li>
                <li class="li_index">Poussettes,consigneurs et abris poussettes</li>
            </ul>

une fonction javascript fait en sorte de remplir la div avec du code :

function Afficher_Sampler(categorie)
{
	if(categorie == '')
	{
		document.getElementById('sampler').innerHTML = "";	
	}
	else
	{
		document.getElementById('sampler').innerHTML = "<img src='../images/"+categorie+" />";	
	}
	
}

J'ai aussi ce code CSS qui agit sur la liste à puces :

.li_index
{
	display:list-item;	
	list-style-image: url(../images/puce.png);
	font-weight:bold;
	font-size:14px;
	color:ffffff;
}

.li_index:hover
{
	list-style-image: url(../images/puce_blanc.png);
	color:#fa8422;
	font-weight:bold;
}

Le problème c'est que ça fonctionne bien avec Firefox mais pas du tout avec Google chrome et avec Internet Explorer.

Je me demandais si je ne pouvais pas rassemble tous ces codes et utiliser jquery ?

Cela permettrait de fonctionner avec tous les navigateurs.

Je vous en remercie d'avance.

beegees

Je te donne une piste :

$(document).ready(function() {
    $('.li_index').mouseover(function() {
        // le code
        // $('#sampler').html('...');
    });
});

Citation : Desolation

Je te donne une piste :

$(document).ready(function() {
$('.li_index').mouseover(function() {
// le code
// $('#sampler').html('...');
});
});

Salut,

Un tout grand merci pour ta réponse et pour ton code.

Question :

Faut-il à chaque fois mettre ce code dans tout appel jquery ? :

$(document).ready(function() {

Dois-je mettre ton code dans mon li ? :

<li class="li_index">Boîtes aux lettres + Poubelles + Cendriers</li>

On mélange alors HTML et javascript, ce n'est pas grave ?

Merci sincèrement pour tes conseils.

beegees

$(document).ready(function() {
	$('.li_index')
        .mouseover(function() {
		var id = $(this).attr('id');
		$('#sampler').html('<img src="../images/'+categorie+'" alt="'+categorie+'" />'); // il manque ici l'extension de l'image
	})
	.mouseout(function() {
		$('#sampler').html('');
	});
});

Pour ta question : on met les gestionnaires d'événement à l'intérieur ou le code qui doit être exécuté au chargement de la page. Pour être précis $(document).ready() s'exécute lorsque le DOM est entièrement chargé alors que l'événement onload sur le body attend que tous les éléments soient chargés (images comprises).

L'avantage du gestionnaire d'événement est qu'il n'y a pas besoin de modifier le HTML, donc retire les événements dans les balises HTML.

Salut Désolation,

Tes réponses sont complètes, pertinentes et très utiles.

Tu as résolu mon problème et tu m'as permis de mieux comprendre le fonctionnement de jquery.

Je t'en remercie mille fois.

Bonne soirée.

beegees

Si tu as d'autres questions sur jQuery (ou le reste) n'hésite pas.

Citation : Desolation

Si tu as d'autres questions sur jQuery (ou le reste) n'hésite pas.

C'est très gentil, merci

beegees