11550 sujets

JavaScript, DOM et API Web HTML5

Gérer une puce au passage du curseur

Donc je t'ai fait un petit exemple, mais j'ai utilisé une image de fond plutot qu'un puce pour le titre, les puces ont parfois du mal à s'afficher, et les images de background sont plus faciles à gérer.

Je n'utilise qu'une seule image ici, contenant l'etat normal et l'etat "brillant" je te laisse voir une explication plus détaillée ici :
http://www.elmoustikoblog.net/tutoriels/css/roll_over/
ou là :
http://www.alsacreations.com/articles/rollover_unique/

Donc voici le code HTML que j'ai utilisé :

<h1>Changement d'une image de titre au survol d'un lien</h1>
	
<div id="menu">
<h2 id="h2_blog">Le blog</h2>
<ul id="blog">
	<li><a href="#">item1</a></li>
	<li><a href="#">item2</a></li>
	<li><a href="#">item3</a></li>
	<li><a href="#">item4</a></li>
	<li><a href="#">item5</a></li>
	<li><a href="#">item6</a></li>
</ul>

<h2 id="h2_fiction">La fiction</h2>
<ul id="fiction">
	<li><a href="#">item1</a></li>
	<li><a href="#">item2</a></li>
	<li><a href="#">item3</a></li>
	<li><a href="#">item4</a></li>
	<li><a href="#">item5</a></li>
	<li><a href="#">item6</a></li>
</ul>
</div>


Le code CSS :

div#menu
{
	background: #f0f0ee ;
}

div#menu h2
{
	background: url(anneau.png) no-repeat 0 7px ; /* -30px */	
	padding-left: 20px ;
}

div#menu ul
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

div#menu ul li
{
	margin: 1px 0 ;
}

div#menu ul li a
{
	text-decoration: none ;
	color: #000 ;
	border-bottom: 1px dotted inherit ;
}

Et pour finir le code JavaScript :

function changeRing()
{
	var menu = document.getElementById('menu') ;
	var links = menu.getElementsByTagName('a') ;
	
	for(var i = 0 ; i < links.length ; i++ )
	{
		links[ i].onmouseover = function()
		{
			var h2 = "h2_"+this.parentNode.parentNode.id ;
			document.getElementById(h2).style.backgroundPosition = "0 -30px" ;
		}
		
		links[ i].onmouseout = function()
		{
			var h2 = "h2_"+this.parentNode.parentNode.id ;
			document.getElementById(h2).style.backgroundPosition = "" ;
		}
	}
}

window.onload = changeRing ;

L'image est celle ci : http://www.elmoustikoblog.net/divers/anneau.png
Tu peux faire ce que tu veux comme image mais pense à modifier les coordonnées dans la feuille de style CSS et dans le script JavaScript.

Donc pour les explications du code :
On récupère tous les liens (<a>) contenus dans l'élément ayant pour ID "menu", et au passage de la souris dessus (onmouseover) on décale l'image de background du h2 ayant pour id "h2_ID_UL" avec ID_UL l'id du <ul> parent du <a> sur lequel on agit.
Et quand la souris repart on rétabli la position du background par défaut.
Enfin, il ne faut pas oublier d'appeler la fonction JavaScript au chargement de la page :

window.onload = changeRing ;

Dans le script [ i] est écrit avec un espace à cause du système de BBcode du forum, ca me mettrait en italique sinon, il faut l'ecrire SANS espace, [ i] sans l'espace avant le i
Modifié le 17 Oct 2004 - 17:34
Sujet clos
Aller à