area et css

Version imprimable

09/12/2004, 15h04
babafredo

area et css

Bonjour,
j'ai crée une image que j'ai découpé sous fireworks pour pouvoir créer des liens à différents endroits.
Mais voilà, je voudrais modifier l'apparence de ma zone cliquable et je n'y arrive pas avec les css.
La sous-classe

Code:

area : hover

ne marche pas.
Y'a-t-il une solution???
Merci d'avance.
09/12/2004, 15h12
SpaceFrog

un apparence de zone cliquable ???
heu que veux tu modifier sur la zone ?

le hover c'est sur a uniquement pour IE ...

sinon faut passer par onmouseover onmouseout...
09/12/2004, 16h44
babafredo

areacss

En fait j'ai une sorte d'organnigramme.

J'ai créé des liens sur chaque case via fireworks et je voudrais que l'apparence change (insérer une image d'un logiciel) lorsque je clique dessus.

Fireworks m'a donc créé des area shape pour chaque case.

Je voulais donc savoir si c'était possible d'utiliser les css pour area comme on les utilise pour la la balise <a>.
Mais apparemment ce n'est pas possible, de toutes façons je n'ai trouvé aucune indication sur le web!

Il faudrait donc utiliser javascript par obligation.
Est-il possible avec onmouseover d'appeler un bloc paramétré avec des css??
merci
09/12/2004, 16h46
SpaceFrog

tes cases c'est quoi des divs des spans des td ???
pas besoin d'area pour cela et ce n'est pas l'apparence de l'area qu'il faut changer mais celle de la case !

area et css

En fait, j'ai résolu mon problème, je mets une partie de mon code histoire d'éclaircir les choses.
En fait, je n'ai pas le choix je suis obligée d'utiliser un map area puisque je dois découper un dessin afin de réaliser des hyperliens sur des zones de mon dessin.

Code:

1
2
3
4
5
6
7
8
9
10
<div class="centre">
   	 <img class="img" name="ivgi" src="images/ivgi.gif" width="1152" height="864" border="0" usemap="#m_ivgi" alt="">
    <map name="m_ivgi">
      <area onMouseOver="afficheId('iv');" onMouseOut="cacheId('iv');" shape="rect" coords="460,586,672,622"
	    href="synoptique.php" alt="">
	</map>
   <div class="bloc1" id="iv">
   	 <img src="images/irccyn.gif">
   </div>
   </div>

Pour les feuilles de styles :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.bloc1 {
display:none;
position:absolute;
width:150px;
height:150px;
left:650px;
top:500px;}
 
.centre {
width:100%;
height:80%;
position:relative;
margin-left:5px;
}

Et voilà pour le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
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 de t'être penché sur mon problème. :lol: