CSS : Modification du curseur sur un lien de type <AREA&g

Nouveau WRInaute
Bonjour,

Je cherche à modifier en CSS l'allure du curseur-souris lorsqu'il survole un lien créé par une balise AREA qui se trouve dans un image map (j'utilise USEMAP dans la balise IMG); l'image elle-même étant dans une DIV;

Les solutions indiquées habituellement pour un lien créé avec la balise <A> n'ont pas l'air de fonctionner dans le cas de AREA.

Merci.
 
Nouveau WRInaute
Bonjour,

milkiway a dit:
Que veux tu dire par lien dans un AREA ?

Voici un exemple :
<HTML><HEAD><TITLE>Exemple</TITLE>
<SCRIPT type="text/javascript" LANGUAGE="JavaScript">
function overLink(text) {
window.status=text;
// document.body.style.cursor = "hand"; // pour IE seulement
return false;}
function outLink(text) {
window.status=text;
// document.body.style.cursor = "default"; // pour IE seulement
return false;}
</SCRIPT>
<STYLE type="text/css">
area a:hover {cursor:pointer;}
#ex_div {position:absolute; top:0px; left:0px;}
</STYLE>
</HEAD>
<BODY BGCOLOR="#000000">
<DIV ID="ex_div">
<IMG SRC="images/ex.jpg" WIDTH=720 HEIGHT=544 BORDER=0 USEMAP="#ex_Map" alt="">
<MAP NAME="ex_Map">
<AREA SHAPE="circle" title="Exemple lien 1" COORDS="494,56,168" onclick="javascript:href='xxxxx.html';" onmouseover="overLink('lien 1');" onmouseout="outLink('');" alt="">
<AREA SHAPE="rect" title="Exemple lien 2" COORDS="0,0,201,309" onclick="javascript:alert('lien 2');" onmouseover="overLink('lien 2');" onmouseout="outLink('');" alt="">
</MAP></DIV></BODY></HTML>

remarque : c'est volontairement que j'utilise onclick et non href car avec href je ne maitrise pas bien la reecriture du texte dans "window.status".

On peut voir ci-dessus que j'ai essayé avec : area a:hover{cursor:pointer;} , sans succès (pour Mozilla 1.5 et Opera 7).

Merci quand même;
 
WRInaute impliqué
En fait je crois que c'est une super bonne question.
J'ai fait des tests de mon côté et j'ai rien réussi à bouger ... même en mettant une classe sur le AREA.

En fait, le problème c'est que la balise MAP et AREA ne sont pas considérés comme étant SUR l'image, je pense que le problème vient de là.


PS : j'pense que le mieux serait de faire des DIV superposés sur ton image plutôt qu'une balise MAP.
 
WRInaute impliqué
J'ai testé ça aussi mais en fait le problème est plus complexe. Le style que tu as écris vaut pour un lien survolé sur image. Jusque là OK seulement avec la méthode actuelle utilisée par notre démon d'Eve :

Code:
<img .... />

<MAP ...>
   <area ...>
   <area ...>
</MAP>

Les balises sont, disons, séparées et indépendantes. L'image est considérée comme "seule" et sans lien.
C'est pour ça que j'opterais pour des DIV superposés ^^ pas top mais j'ai rien d'autre en tête.
 
Nouveau WRInaute
Bonjour,

The Jedi a dit:
Les balises sont, disons, séparées et indépendantes. L'image est considérée comme "seule" et sans lien.
C'est pour ça que j'opterais pour des DIV superposés ^^ pas top mais j'ai rien d'autre en tête.

Je pense que tu as raison. Effectivement en découpant l'image et en associant chaque zone avec une balise "a" et non plus "area" on devrait s'en sortir. Mais je voudrais éviter de découper l'image;

J'ai trouvé une version qui marche avec Opera (7.23 la version que j'ai) mais pas avec Mozilla (1.5)(memes les liens ne s'executent plus). Il suffit de remplacer "area" par "a" tout en gardant le map et je peux changer le curseur.

le code (presque identique au precedent) :
<HTML><HEAD><TITLE>exemple</TITLE>
<SCRIPT type="text/javascript" LANGUAGE="JavaScript">
function overLink(text) {
window.status=text;
// document.body.style.cursor = "hand"; // IE seulement
return true;}
function outLink(text) {
window.status=text;
// document.body.style.cursor = "default"; // IE seulement
return true;}
</SCRIPT>
<STYLE type="text/css">
A:hover {cursor:wait;}
#labyrinthe {position:absolute; top:0px; left:0px;}
#cookie {position:absolute; top:470px; left:40px; visibility:hidden}
</STYLE>
</HEAD>
<BODY BGCOLOR="#000000">
<DIV ID="exemple">
<IMG SRC="img.jpg" WIDTH=720 HEIGHT=544 BORDER=0 USEMAP="#ex_Map" alt="">
<MAP NAME="ex_Map">
<A SHAPE="rect" title="lien 1" COORDS="2,458,137,541" onclick="javascript:alert('lien1');" onmouseover="overLink('lien 1');" onmouseout="outLink('');" alt="">
<A SHAPE="circle" title="lien 2" COORDS="494,56,168" onclick="javascript:href='ex.html';" onmouseover="overLink('lien 2');" onmouseout="outLink('');" alt="">
<A SHAPE="rect" title="lien 3" COORDS="0,0,201,309" onclick="javascript:alert('lien 3');" onmouseover="overLink('lien 3');" onmouseout="outLink('');" alt="">
<A SHAPE="rect" title="lien 4" COORDS="304,420,720,544" onclick="javascript:alert('lien 4');" onmouseover="overLink('lien 4');" onmouseout="outLink('');" alt="">
</MAP></DIV></BODY></HTML>

Savez-vous sur Opera ou s'affiche le window.status ?

Pour Milkiway : pourquoi faut-il mettre les balises en minuscules ? cela fait-il partie d'une norme ? laquelle ? c'est imposé par les CSS ?
 
Nouveau WRInaute
J'ai déjà eu le même problème ...
En faisant quelques tests, je me suis aperçu que lors du survol d'une balise <area>, les évènements javascript générés sous IE6 sont dans l'ordre et en moins d'un quart de seconde : onMouseOver de la balise <area>, onMouseOut de la balise <area>, et onMouseOver de la balise <IMG> ... au lieu de générer seulement le onMouseOver de la balise <area> !!!

C'est vraiment chiant, je vais péter un cable ...
C'est bête, c'était pourtant une bonne idée les images MAP !!!

J'ai oublié de dire que j'ai aussi trouvé une autre solution que les DIV superposés, mais elle n'est pas très pratique non plus, ça consiste à faire une fonction Javascript qui affiche un texte dans la barre d'etat en fonction de la position du curseur par rapport à l'image ...

A cause de ce truc-là, je trouve que les IMAGES MAP deviennent tout de suite, beaucoup moins intéressantes ...
 
Discussions similaires
Haut