Faire une zone réactive (image map) en CSS

Bonjour

Sur cette page : http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-une-zone-reactive-image-map-en-CSS

Il est possible de faire un image avec plusieurs zones cliquable.

Cela fonctionne bien mais mes zones de cliquages ne veulent pas se mettre l'une sous l'autre

C'est comme si verticalement, une zone prenais toute la verticale

Que faire ?

(merci d'avance)

S.

Salut et bienvenue à toi,

Il faudrait donner un peu plus d'informations sinon personne ne devinera ce que tu as fait
Quels méthodes de positionnement as-tu choisi ?
As-tu un exemple précis à montrer ?

Hum, j'ai trouvé la solution toute seule ^^ (oui ben pas facile de ne pas avoir de cerveau !)

(C'etais position: absolute; à ajouter)
Modifié par sakoura (12 Jun 2005 - 21:11)

Oups.. Raphael

Désolé du derangement, j'ai trouvé ^^

Petite question quand même : c'est normale que sur IE ca ne fonctionne pas ?


Modifié par sakoura (12 Jun 2005 - 21:50)

sakoura a écrit :

Petite question quand même : c'est normale que sur IE ca ne fonctionne pas ?

Les zones réactives fonctionnent sur IE.
Si ce n'est pas le cas, ton CSS est en cause

En faite, j'ai fais un mix entre Ceci et Cela

et le code css :

a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
border: 0px;
}
a:hover {
background: none; /* correction d'un bug IE */
border: 0px;
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
border: 0px;
position: absolute;
top: 200px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 500px;
width: 200px;
height: 100px;
background: black;
text-align: center;
color: white;
border: 0px;
}

a:hover span { /* définition de la balise <span> au survol */
display: block;
position: fixed;
top: 100px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 450px;
width: 100px;
height: 100px;
background: black;
text-align: center;
color: white;
border: 0px;
}

#image {    /* bloc image en arrière-plan */
width : 500px;
height: 500px;
background: url(img/blunts.jpg) top left no-repeat;
}

#zone1 {    /* zone cliquable */
float: left;
width : 90px;
height: 80px;
margin-left: 10px;
margin-top: 120px;
}
#zone2 {    /* zone cliquable */
float: left;
position: absolute;
width : 70px;
height: 90px;
margin-left: 10px;
margin-top: 220px;
}
#zone3 {    /* zone cliquable */
float: left;
position: absolute;
width : 90px;
height: 200px;
margin-left: 10px;
margin-top: 300px;
}
#zone4 {    /* zone cliquable */
float: left;
position: absolute;
width : 60px;
height: 120px;
margin-left: 110px;
margin-top: 230px;
}
#zone5 {    /* zone cliquable */
float: left;
position: absolute;
width : 60px;
height: 110px;
margin-left: 220px;
margin-top: 220px;
}
#zone6 {    /* zone cliquable */
float: left;
position: absolute;
width : 90px;
height: 200px;
margin-left: 170px;
margin-top: 300px;
}
#zone7 {    /* zone cliquable */
float: left;
position: absolute;
width : 80px;
height: 80px;
margin-left: 300px;
margin-top: 200px;
}
#zone8 {    /* zone cliquable */
float: left;
position: absolute;
width : 80px;
height: 200px;
margin-left: 310px;
margin-top: 300px;
}

Ca fonctionne parfaitement sur Firefox mais pas dutout sur IE
Modifié par sakoura (13 Jun 2005 - 20:50)

Sujet clos, j'ai décidé d'utiliser Map area, et ca fonctionne très bien

Merci quand même.