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

Discussion dans 'Administration d'un site Web' créé par lilith, 21 Avril 2004.

  1. lilith
    lilith Nouveau WRInaute
    Inscrit:
    15 Juillet 2003
    Messages:
    21
    J'aime reçus:
    0
    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.
     
  2. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    Bonjour,
    ce n'est pas la balise <A> mais la balise <a>.
    Que veux tu dire par lien dans un AREA ?
     
  3. Oncle Tom
    Oncle Tom WRInaute impliqué
    Inscrit:
    31 Mars 2003
    Messages:
    714
    J'aime reçus:
    0
    ptete avec
    Code:
    area a:hover{ cursor:pointer; }
    
    ?
     
  4. lilith
    lilith Nouveau WRInaute
    Inscrit:
    15 Juillet 2003
    Messages:
    21
    J'aime reçus:
    0
    Bonjour,

    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;
     
  5. Oncle Tom
    Oncle Tom WRInaute impliqué
    Inscrit:
    31 Mars 2003
    Messages:
    714
    J'aime reçus:
    0
    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.
     
  6. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    je dirais plutôt que tu dois faire ça
    Attention à ne pas mettre les balises en majuscule !
     
  7. Oncle Tom
    Oncle Tom WRInaute impliqué
    Inscrit:
    31 Mars 2003
    Messages:
    714
    J'aime reçus:
    0
    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.
     
  8. lilith
    lilith Nouveau WRInaute
    Inscrit:
    15 Juillet 2003
    Messages:
    21
    J'aime reçus:
    0
    Bonjour,

    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 ?
     
  9. Mc Rack
    Mc Rack Nouveau WRInaute
    Inscrit:
    30 Novembre 2004
    Messages:
    1
    J'aime reçus:
    0
    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 ...
     
Chargement...
Similar Threads - CSS Modification curseur Forum Date
Myphpannuaire et modification du annuaire.css Développement d'un site Web ou d'une appli mobile 29 Août 2006
pb de CSS Développement d'un site Web ou d'une appli mobile 10 Mai 2022
Unused CSS et outils pour supprimer feuilles de style inutilisées Développement d'un site Web ou d'une appli mobile 27 Avril 2022
CSS / Attribuer 2 couleurs différentes aux H2 Développement d'un site Web ou d'une appli mobile 12 Mars 2022
Perplexité : pourquoi utiliser une classe CSS en dehors de <body> Développement d'un site Web ou d'une appli mobile 26 Décembre 2021
<noscript><link ...> du css après un <link rel="preload"... Débuter en référencement 1 Mai 2021
Utiliser une grille CSS peut-il nuire au référencement ? Débuter en référencement 17 Janvier 2021
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
CSS Google Shopping AdWords 23 Janvier 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
Contenu mixte vers http / css - réelle gravité ? Débuter en référencement 24 Septembre 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
css pour cookieconsent et apparence graphique. Développement d'un site Web ou d'une appli mobile 28 Avril 2019
Appliquer style CSS CMS GHOST Développement d'un site Web ou d'une appli mobile 21 Mars 2019
Wordpress et site html/css Débuter en référencement 15 Décembre 2018
Temps de réponse et minimisation CSS et JS Débuter en référencement 30 Novembre 2018