Discussion :

[babafredo]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

area : hover

ne marche pas.
Y'a-t-il une solution???
Merci d'avance.

[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...

[babafredo]

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

[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 !

[babafredo]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.