1. Accueil
  2. Forum Codes-Sources
  3. PHP
Sujet Précédent Sujet Suivant

CSS MAP et AREA

Résolu
gabs77 Messages postés 379 Date d'inscription mardi 6 décembre 2005 Statut Membre Dernière intervention 8 octobre 2008 - 24 août 2008 à 13:58
gabs77 Messages postés 379 Date d'inscription mardi 6 décembre 2005 Statut Membre 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 !!!
A voir également:

9 réponses

Réponse 1 / 9
jreaux62 Messages postés 195 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 24 octobre 2011 32
28 août 2008 à 15:37
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;
3
Réponse 2 / 9
gabs77 Messages postés 379 Date d'inscription mardi 6 décembre 2005 Statut Membre Dernière intervention 8 octobre 2008
28 août 2008 à 21:27
"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';
}
 
3
Réponse 3 / 9
jreaux62 Messages postés 195 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 24 octobre 2011 32
26 août 2008 à 18:49
Une simple "info=bulle" (alt="...") au passage de la souris sur la zone :

<map  name="Map">
       
</map>
0
Réponse 4 / 9
gabs77 Messages postés 379 Date d'inscription mardi 6 décembre 2005 Statut Membre Dernière intervention 8 octobre 2008
26 août 2008 à 19:08
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 !!!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
jreaux62 Messages postés 195 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 24 octobre 2011 32
27 août 2008 à 13:20
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"
0
Réponse 6 / 9
gabs77 Messages postés 379 Date d'inscription mardi 6 décembre 2005 Statut Membre Dernière intervention 8 octobre 2008
28 août 2008 à 09:48
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
0
Réponse 7 / 9
gabs77 Messages postés 379 Date d'inscription mardi 6 décembre 2005 Statut Membre Dernière intervention 8 octobre 2008
28 août 2008 à 16:40
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 !!
0
Réponse 8 / 9
jreaux62 Messages postés 195 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 24 octobre 2011 32
28 août 2008 à 17:13
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.
0
Réponse 9 / 9
gabs77 Messages postés 379 Date d'inscription mardi 6 décembre 2005 Statut Membre Dernière intervention 8 octobre 2008
28 août 2008 à 21:28
après c'est à adapter selon ses besoins !!
0
Rejoignez-nous