CSS MAP et AREA [Résolu]

gabs77 380 Messages postés mardi 6 décembre 2005Date d'inscription 8 octobre 2008 Dernière intervention - 24 août 2008 à 13:58 - Dernière réponse : gabs77 380 Messages postés mardi 6 décembre 2005Date d'inscription 8 octobre 2008 Dernière intervention
- 28 août 2008 à 21:28
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 !!!
Afficher la suite 

Votre réponse

9 réponses

Meilleure réponse
jreaux62 206 Messages postés vendredi 13 juin 2008Date d'inscription 24 octobre 2011 Dernière intervention - 28 août 2008 à 15:37
3
Merci
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;

Merci jreaux62 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 90 internautes ce mois-ci

Commenter la réponse de jreaux62
Meilleure réponse
gabs77 380 Messages postés mardi 6 décembre 2005Date d'inscription 8 octobre 2008 Dernière intervention - 28 août 2008 à 21:27
3
Merci
"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';
}
 

Merci gabs77 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 90 internautes ce mois-ci

Commenter la réponse de gabs77
jreaux62 206 Messages postés vendredi 13 juin 2008Date d'inscription 24 octobre 2011 Dernière intervention - 26 août 2008 à 18:49
0
Merci
Une simple "info=bulle" (alt="...") au passage de la souris sur la zone :

<map  name="Map">
       
</map>
Commenter la réponse de jreaux62
gabs77 380 Messages postés mardi 6 décembre 2005Date d'inscription 8 octobre 2008 Dernière intervention - 26 août 2008 à 19:08
0
Merci
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 !!!
Commenter la réponse de gabs77
jreaux62 206 Messages postés vendredi 13 juin 2008Date d'inscription 24 octobre 2011 Dernière intervention - 27 août 2008 à 13:20
0
Merci
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"
Commenter la réponse de jreaux62
gabs77 380 Messages postés mardi 6 décembre 2005Date d'inscription 8 octobre 2008 Dernière intervention - 28 août 2008 à 09:48
0
Merci
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
Commenter la réponse de gabs77
gabs77 380 Messages postés mardi 6 décembre 2005Date d'inscription 8 octobre 2008 Dernière intervention - 28 août 2008 à 16:40
0
Merci
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 !!
Commenter la réponse de gabs77
jreaux62 206 Messages postés vendredi 13 juin 2008Date d'inscription 24 octobre 2011 Dernière intervention - 28 août 2008 à 17:13
0
Merci
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.
Commenter la réponse de jreaux62
gabs77 380 Messages postés mardi 6 décembre 2005Date d'inscription 8 octobre 2008 Dernière intervention - 28 août 2008 à 21:28
0
Merci
après c'est à adapter selon ses besoins !!
Commenter la réponse de gabs77

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.