CSS MAP et AREA [Résolu]

Signaler
Messages postés
379
Date d'inscription
mardi 6 décembre 2005
Statut
Membre
Dernière intervention
8 octobre 2008
-
gabs77
Messages postés
379
Date d'inscription
mardi 6 décembre 2005
Statut
Membre
Dernière intervention
8 octobre 2008
-
Bonjour,

Je voudrais savoir si on peut combiner du CSS avec les balises AREA ???

En fait, j'ai une image PNG avec un fond transparent que j'affiche en HTML avec la baslise
et ke défini des zones cliquables avec
<map  name="Map">
       
</map>

Je souhaite trouver une solution léger pour marquer le fait que la souris est sur un lien de la zone cliquable comme une autre image ou une coloration de fond !!
bref, une idée qui fonctionne, car je ne suis pas parvenu à trouver !!!

9 réponses

Messages postés
195
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
24 octobre 2011
12
J'ai vu ca :
http://www.developpez.net/forums/d22187/webmasters-developpement-web/css/area-css/

Adapté aux zones "rect".
Mais pour les zones "poly" ... (?)

Et un code CSS pour modifier l'opacité :
filter: alpha(opacity=50);
     -moz-opacity: 0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
Messages postés
379
Date d'inscription
mardi 6 décembre 2005
Statut
Membre
Dernière intervention
8 octobre 2008

"centre">
"images/monimage.gif"width="500"height="500"border="0" usemap="#maMap" alt="">
<map name="maMap">
       [page2.html

]"afficheId('bloc');" onMouseOut="cacheId('bloc');" shape="rect" coords="460,586,672,622"
href="synoptique.php" alt="">
</map>

"bloc1" id="bloc">
"images/monimage2.gif">





<!-- END TEMPLATE: bbcode_code -->Pour les feuilles de styles :
<!-- BEGIN TEMPLATE: bbcode_code -->

Code :
.bloc1 {display:none;
position:absolute;
width:150px;
height:150px;
left:650px;
top:500px;}
 
.centre {width:100%;
height:80%;
position:relative;
margin-left:5px;
}

<!-- END TEMPLATE: bbcode_code -->Et voilà pour le javascript :
<!-- BEGIN TEMPLATE: bbcode_code -->

Code :
function afficheId(baliseId){
document.getElementById(baliseId).style.visibility='visible';
document.getElementById(baliseId).style.display='block';
}
 
function cacheId(baliseId){
document.getElementById(baliseId).style.visibility='hidden';
document.getElementById(baliseId).style.display='none';
}
 
Messages postés
195
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
24 octobre 2011
12
Une simple "info=bulle" (alt="...") au passage de la souris sur la zone :

<map  name="Map">
       
</map>
Messages postés
379
Date d'inscription
mardi 6 décembre 2005
Statut
Membre
Dernière intervention
8 octobre 2008

Merci jreaux62, mais je connaissais déjà cette réponse !!
Merci tout de même !!
Déjà, je viens à me demander si on peut faire du CSS avec map et area  ??? car là sans y parvenir je reste douteux sur la question !!!
Messages postés
195
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
24 octobre 2011
12
Dans ce cas, que veux-tu dire par "marquer le fait que la souris est sur un lien de la zone cliquable" ?

Sinon, tu peux mettre :
<area shape="poly" id="blabla" ...
ou
<area shape="poly" class="blabla" ...

et ajouter le CSS correspondant a "blabla"
Messages postés
379
Date d'inscription
mardi 6 décembre 2005
Statut
Membre
Dernière intervention
8 octobre 2008

Dans ce cas, que veux-tu dire par "marquer le fait que la souris est sur un lien de la zone cliquable" ?
Je veux dire par là, une image qui s'intercale dessus ou une coloration, bref !! Désolé, si je m'explique mal !! c'est les idées qui me manquent en ce moment !!

Cependant, j'ai déjà essayéavec les "id" ou les "class" mais sans succès !!
Alors est ce que je m'y prends mal
Messages postés
379
Date d'inscription
mardi 6 décembre 2005
Statut
Membre
Dernière intervention
8 octobre 2008

jreaux62,
Super le lien que tu m'a passé marche à merveille donc en fait le CSS ne marche pas sur les area/map il faut rusé avec un peu de javascript et du omousehover onmouseout et le tour est joué !!!
Merci !!
Messages postés
195
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
24 octobre 2011
12
Par curiosité (et pour ceux qui se posent la meme question), peux-tu mettre ici ce que tu as fait (comment tu t'y es pris pour la zone "poly") ?

Merci.
Et content d'avoir pu aider.
Messages postés
379
Date d'inscription
mardi 6 décembre 2005
Statut
Membre
Dernière intervention
8 octobre 2008

après c'est à adapter selon ses besoins !!