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

[Résolu]
Signaler
Messages postés
112
Date d'inscription
vendredi 21 janvier 2005
Statut
Membre
Dernière intervention
20 novembre 2006
-
Messages postés
112
Date d'inscription
vendredi 21 janvier 2005
Statut
Membre
Dernière intervention
20 novembre 2006
-
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 :

http://erogaki-team.info/img/subheader.jpg

Ainsi que celle qui doit s'afficher quand la souris passe dessus : http://erogaki-team.info/img/subheader2.jpg



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



<map name="ImageMap1">

</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 !


<hr>$p00ky
______________________________________________
.:: KoC-FR ::. Alliance Francophone Kings of Chaos
Venez jouer au meilleur MMORPG gratuit et facile !

2 réponses

Messages postés
275
Date d'inscription
samedi 4 juin 2005
Statut
Membre
Dernière intervention
28 avril 2006
10
Salut,

Tu dois découper ton image en plusieurs morceaux, un morceau pour Accueil, un pour Forum etc.
Dans ton cas 10 cellules.

Exemple image home_01.jpg :

Tu découpes l'image de rollOver de manière identique:

Tu mets ensuite ces images dans une table comme ceci:

,

----

,

...

Tu insères ce petit script entre <head> et </head>:
(n'oublie pas de corriger les ... )

<script type= "text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;

function preloadImages() {
if (document.images) {
home_01_over = newImage("home_01-over.jpg");
home_02_over = newImage("home_02-over.jpg");
...
home_10_over = newImage("home_10-over.jpg");
preloadFlag = true;
}
}

// -->
</head>

Le plus gros du travail c'est de découper tes 2 images en 10 portions.
Messages postés
112
Date d'inscription
vendredi 21 janvier 2005
Statut
Membre
Dernière intervention
20 novembre 2006

Merci beaucoup Phil_Free d'avoir pris le temps de me répondre, mais en
fait mon but était justement de ne pas avoir à découper cette image,
car le menu est amené à évoluer... et faire un redecoupage à chaque
fois est assez embêtant...



Cependant en fouinant un peu, j'ai trouvé la panacé !



Exactement ce qu"il me faut, à partir de deux images il est possible
sans découper de faire des rollover sélectifs :
http://www.pompage.net/pompe/sprites/



C'est génial ;)



Encore merci !

<hr>$p00ky
______________________________________________
.:: KoC-FR ::. Alliance Francophone Kings of Chaos
Venez jouer au meilleur MMORPG gratuit et facile !