Problème : Rollover partiel sur une zone précise de l'imag

[$p00ky]

Bonjour à toutes et à tous,

Voilà j'aimerais faire un rollover partiel sur une image... c'est à dire en utilisant les zones (areas) d'une image comme pour un lien.
Par exemple, j'ai une barre de menu, quand la souris n'est pas dessus :

Ainsi que celle qui doit s'afficher quand la souris passe dessus :

J'utilise une zone de lien, par exemple pour le premier lien (Accueil) comme ceci :

Code : Tout sélectionner

    <img name="img1" src="./img/subheader.jpg" width="900" height="26" border="1" style="border-color:#8ea9be" usemap="#ImageMap1"></p>
    <map name="ImageMap1">
    <area name="area1" shape="rect" coords="76, 5, 141, 22" href="http://erogaki-team.info/main.php" onMouseOver="img1.src='./img/subheader2.jpg'" onMouseOut="img1.src='./img/subheader.jpg'">
    </map>

Cependant, quand la souris passe sur le lien, l'image entière est affichée avec le second menu, je voudrais que seulement la zone du lien voit son image changée, ce qui ferait une sorte d'effet de mise en valeur uniquement du mot ACCUEIL.

Cependant je ne sais pas si c'est possible, et si c'est possible je ne sais pas comment faire...

Merci d'avance pour votre aide !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

[teoli2003]

Je ne crois pas que ce soit possible.
Ce qu'il te faut faire, c'est découper l'image en sous-image (une par entrée de menu) puis de jouer avec la propriété background-image dans une entrée :hover de ton css.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.0.2) Gecko/20060325 Firefox/1.5.0.2

[calimo]

Code : Tout sélectionner

    <img name="img1" src="./img/subheader.jpg" width="900" height="26" border="1" style="border-color:#8ea9be" usemap="#ImageMap1"></p>
    <map name="ImageMap1">
    <area name="area1" shape="rect" coords="76, 5, 141, 22" href="http://erogaki-team.info/main.php" onMouseOver="img1.src='./img/subheader2.jpg'" onMouseOut="img1.src='./img/subheader.jpg'">
    </map>

Attention de ne pas oublier de remplir l'attribut "alt" avec un texte alternatif correct (en gros : le contenu image se trouvant sous le lien.

C'est très important pour l'accessibilité : beaucoup de gens ne peuvent pas voir les images et ont un besoin vital de ces textes alternatifs

<area name="area1" shape="rect" coords="76, 5, 141, 22" href="http://erogaki-team.info/main.php" onMouseOver="img1.src='./img/subheader2.jpg'" onMouseOut="img1.src='./img/subheader.jpg'" alt="Accueil">
</map>

Message envoyé avec : Mozilla/5.0 (X11; U; Linux x64; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

[FF_Olivier]

Alsacréations: Rollover en CSS avec une seule image, en utilisant le positionnement négatif du background-image.

Très jolie technique qui évite le JS et le préchargement, mais je ne sais pas si ça marche pour tous les navigateurs.

PS : ne pas manquer dans l'article le lien sur les sprites, je crois que c'est encore plus adapté à ce que tu veux faire.

[SB]

Ça doit être possible en jouant sur la propriété css opacity des <areas> avec :hover mais sera-ce supporté par tous les navigateurs ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

[$p00ky]

Je vais penser aux textes alternatifs aux images calimo, mais je pensais qu'avec l'expansion de l'adsl ceux-ci n'étaient plus utiles

Ok SB, je vais tester le parametre d'opacité des aires, et si ca marche sous Mozilla et IE, ca me suffit.

PS : ne pas manquer dans l'article le lien sur les sprites, je crois que c'est encore plus adapté à ce que tu veux faire.

Exactement ce que je veux FF_Olivier, merci énormément !!! C'est super

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

[teoli2003]

Je vais penser aux textes alternatifs aux images calimo, mais je pensais qu'avec l'expansion de l'adsl ceux-ci n'étaient plus utiles

Ô que si, rien que pour les aveugles et les malvoyants. De plus ils sont obligatoires selon la norme.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.0.2) Gecko/20060325 Firefox/1.5.0.2

[Asumbaa]

De plus ils sont obligatoires selon la norme.

C'est plutôt : "c'est pour ça qu'ils sont obligatoires selon la norme"

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

[calimo]

Je vais penser aux textes alternatifs aux images calimo, mais je pensais qu'avec l'expansion de l'adsl ceux-ci n'étaient plus utiles

Ô que si, rien que pour les aveugles et les malvoyants. De plus ils sont obligatoires selon la norme.

Et puis tout le monde n'a pas forcément l'adsl partout. Et puis même des personnes bien voyantes peuvent utiliser des navigateurs non graphiques.
Mais effectivement, de nombreuses personnes ne peuvent pas voir les images, et quelle que soit la raison ce serait dommage de les priver.

Bien vu l'articles sur les sprites