+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : OnMouseOver (/showthread.php?tid=467)
OnMouseOver - Maegia - 22-11-2006
Je sais, ce n'est pas du PHP... Mais ignorant totalement où trouver pareille réponse, je me risque donc ici, ne serait-ce que pour me faire conseiller un autre forum ou j'aurais une chance d'y trouver ma réponse.
Voilà le problème... J'ai une image bien simple. Un jpg sans rien de spécial, supposons l'image d'un simple couché de soleil sur lequel j'applique une map dans le but d'y faire interragir le soleil. Jusqu'à présent, tout va bien. En passant la souris par-dessus, une petite bulle informative s'affiche, m'annonçant que j'ai bel et bien un soleil sous mes yeux. Rien de bien compliquer. Là ou ça se corse, c'est que je me demandais s'il était possible (Peut-être que ce ne l'est simplement pas...) de faire en sorte que, lorsque ma souris passe par-dessus le soleil ( <area shape="circle" onmouseover="???"> ), les contours de ce dernier changent de couleur, ou encore deviennent lumineux, ou quoi que ce soit. En bref, est-il possible d'appliquer des changements de couleurs quelconques, ou encore d'y mettre une couleur en surbrillance, par dessus une zone "area" d'une map présente sur une image ?
Je sais, je suis probablement à des centaines de kilomètre du moindre script php là-dedans, mais je persiste à croire qu'un jour, en un lieu quelconque, quelqu'un aura une réponse ! :-)
RE: OnMouseOver - Loetheri - 22-11-2006
Pourquoi ne fais-tu pas cela en CSS avec :hover ?
RE: OnMouseOver - barst - 22-11-2006
Je crois que ce n'est pas l'action qui le gêne le plus mais comment rendre le changement de couleur
RE: OnMouseOver - X-ZoD - 22-11-2006
lol en effet en css cela serai plus pratik
sinon tu peu tenter un
Citation :onmouseover="style-color=red"]
ou un truc dans le genr
RE: OnMouseOver - Loetheri - 22-11-2006
Avec le CSS, tu changes facilement de couleurs. C'est le plus pratique que de passer par du JS.
Ceci dit, pour utiliser le CSS, tu devras définir soit une classe soit un id sur ton area.
RE: OnMouseOver - Maegia - 22-11-2006
Je dois être véritablement nul, je n'y arrive véritablement pas... Voici ce que j'ai pour le moment :
echo '
<map name="soleil">
<area shape="circle" coords="'104,18,14'" href="info.php?id=1" onmouseover="doTooltip(event,0)" onmouseout="hideTip()" class="mapover">
</map>
';
Mes onmouseover et onmouseout gèrent (Très bien) une infobulle qui apparaît et disparaît au passage de la souris. J'ai maintenant appliqué une classe à chacune de mes area faisant partie de ma map "soleil" (Je j'ai copié ici qu'une seule area). Maintenant, pour faire en sorte qu'au passage de la souris, l'area en question devienne d'une certaine couleur, que dois continuer ma classe css... ? J'ai beau tout essayé les color, background-color, etc, rien n'y fait. L'area ne semble vouloir interragir avec rien.
RE: OnMouseOver - Raoull - 22-11-2006
Je pense que ce n'est pas possible.
La bordure d'une image, losqu'un lien est fait autour de cette image, on peut lui définir sa couleur de bordure (link/alink/vlink ou en css avec a/a:hover/etc.).
Mais dans le cas d'une map, il n'y a aucune valeur qui définit la couleur de bordure d'une 'area'. Ni en html, ni en css, ni en js... Simplement par ce qu'il n'y a pas de bordure : elle n'apparait pas en couleur (link/alink/vlink ou a/a:hover etc. ne rentre pas en ligne de compte dans ce cas là).
Pour faire ce que tu souhaites, il ne faut pas utiliser une map, mais par exemple des bouts d'image collées les unes aux autres. Et avec un 'onmouseover'/'onmouseout' en js (gérable aussi en css) changer le bout d'image survolé.
RE: OnMouseOver - Maegia - 22-11-2006
Malheureusement, c'est aussi ce que je pensais... Cela dit, une autre idée m'est venu en tête, soit celle de superposée deux images l'une sur l'autre grâce à CSS, et ensuite de faire disparaître un bout de l'image superposée au passage de la souris, laissant apparaître, par conséquent, l'image du dessous. Cela permetterait théoriquement, donc, d'éviter les images collées les unes aux autres et de jouer avec des cercles et des polygones, non ? Cela dit, maintenant, je n'arrive qu'à le faire avec des rectanges... Je suis capable de faire disparaître un rectange de la première image pour que l'image du dessous soit visible vis-à-vis ce rectange disparût, mais je n'y arrive pas avec des polygones... Quelqu'un aurait-il une source d'information à me proposer ?