CSS MAP et AREA [Résolu]

Messages postés
380
Date d'inscription
mardi 6 décembre 2005
Dernière intervention
8 octobre 2008
- - Dernière réponse : gabs77
Messages postés
380
Date d'inscription
mardi 6 décembre 2005
Dernière intervention
8 octobre 2008
- 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
Messages postés
206
Date d'inscription
vendredi 13 juin 2008
Dernière intervention
24 octobre 2011
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;

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 98 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jreaux62
Messages postés
380
Date d'inscription
mardi 6 décembre 2005
Dernière intervention
8 octobre 2008
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';
}
 

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 98 internautes nous ont dit merci ce mois-ci

Commenter la réponse de gabs77
Messages postés
206
Date d'inscription
vendredi 13 juin 2008
Dernière intervention
24 octobre 2011
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
Messages postés
380
Date d'inscription
mardi 6 décembre 2005
Dernière intervention
8 octobre 2008
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
Messages postés
206
Date d'inscription
vendredi 13 juin 2008
Dernière intervention
24 octobre 2011
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
Messages postés
380
Date d'inscription
mardi 6 décembre 2005
Dernière intervention
8 octobre 2008
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
Messages postés
380
Date d'inscription
mardi 6 décembre 2005
Dernière intervention
8 octobre 2008
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
Messages postés
206
Date d'inscription
vendredi 13 juin 2008
Dernière intervention
24 octobre 2011
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
Messages postés
380
Date d'inscription
mardi 6 décembre 2005
Dernière intervention
8 octobre 2008
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.