Rollover sur zones sensibles d'une même image

Bonjour,

je vais déjà vous présenter ce que je veux faire :

-diviser une image de 195x290px en 3 zones de 65x290px qui afficheront au passage de la souris chacune une image différente d'une taille de 195x290px.


Je suis extrêment débutant en css, et en création de site d'ailleurs, comme pourra en témoigner Cygnus.

Après avoir regarder plus en détail comment marche les css, j'ai écrit ce code (sur un code fabriqué par GoLive CS) :

#calque15 {....} /*ici se trouve la position et les attributs du blocs*/
.base {
background-image:url(...);
background-repeat:no-repeat;
background-position:top left;
z-index:5
}
#zones1 {
position:absolute;
top:280px;
left:0px;
width:65ps;
height:290px;
}
#zones2 {
position:absolute;
top:280px;
left:65px;
width:65ps;
height:290px;
}
#zones3 {
position:absolute;
top:280px;
left:130px;
width:65ps;
height:290px;
}
a span.zone1:hover {
position:absolute;
background-image:url(...);
background-repeat:no-repeat;
background-position:top left;
top:280px;
left:0px;
width:195px;
height:290px;
z-index:25;
}
a span.zone2:hover {
position:absolute;
background-image:url(...);
background-repeat:no-repeat;
background-position:top left;
top:280px;
left:0px;
width:195px;
height:290px;
z-index:25;
}
a span.zone3:hover {
position:absolute;
background-image:url(...);
background-repeat:no-repeat;
background-position:top left;
top:280px;
left:0px;
width:195px;
height:290px;
z-index:25;
}
-->
</style>

body....

<div id="calque15" class="base">
<a><span id="zones1" class="zone1"></span>
<span id="zones2" class="zone2"></span>
<span id="zones3" class="zone3"></span></a>
</div>

Ce code ne fonctionne pas.
Il me serait très utile de savoir pourquoi, ce que je n'ai pas fait correctement.
J'ai créer la balise a pour IE qui n'accepte pas bien le :hover.

merci de votre aide.
Modifié par Pascal21 (28 Feb 2007 - 11:50)

Bonsoir,
Pourrais-tu commencer par placer ton code entre les balises appropriées pour permettre sa mise en forme ?

Concernant ton problème, je pense que la lecture de cet article pourrait t'être utile :
Sprites CSS : Meurs, découpe d’images, meurs !

Bonjour à tous,

Cygnus, si tu fais allusion au <style....> qui introduit la css, j'ai simplement pas copier le début, puisque qu'elle est assez longue (tous mes "calques sont définis dedans et je dois en avoir une vingtaine), mais elle y est (c'est une partie que GoLive fait tout seul).

Je suis en train de regarder le lien que tu m'as donné.
C'est très explicite. Merci.

J'ai 2 petites questions :

1. Est-il indispensable d'avoir un texte à cacher ?
Ou peut-on se passer de cette étape ?

2. Quelle est la signification de transparent dans cette partie :
#zone1b a:hover {
background: transparent url(Papiers/Papiers-mix.jpg)
0 -290px no-repeat;
}

merci beaucoup.

Pascal21 a écrit :
Cygnus, si tu fais allusion au <style....> qui introduit la css, j'ai simplement pas copier le début, puisque qu'elle est assez longue (tous mes "calques sont définis dedans et je dois en avoir une vingtaine), mais elle y est (c'est une partie que GoLive fait tout seul).

Non, pas exactement...
Je faisais référence à l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie donc de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum "Nouveau sur le forum ?" est important.
Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation
Modifié par Cygnus (28 Feb 2007 - 11:43)

Bonjour,

désolé pour la règle, Cygnus, j'ai relu le post (je l'avais déjà fait quelques jours avant de poster ).

A partir de ton lien et après moultes lectures (sic!), j'ai fait ce code :

#calque15 { visibility: visible; position: absolute; z-index: 4;
top: 280px; left: 0; width: 195px; height: 290px; }
#3en1 {
width: 195px;
height: 290px;
background: url(Papiers/Papiers-mix.jpg) no-repeat;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
}
#3en1 li {
margin: 0px;
padding: 0px;
list-style: none;
position: absolute;
top: 0px;
}
#3en1 li, #3en1 a{
height: 290px;
display: block;
}
#zone1b { left: 0px; width: 60px; }
#zone2b { left: 70px; width: 60px; }
#zone3b { left: 140px; width: 60px }
#zone1b a:hover {
background: transparent url(Papiers/Papiers-mix.jpg)
0px -290px no-repeat;
width: 195px;
left: 0px;
z-index: 20;
}
#zone2b a:hover {
background: transparent url(Papiers/Papiers-mix.jpg)
-70px -580px no-repeat;
width: 195px;
left: 0px;
z-index: 20;
}
#zone3b a:hover {
background: transparent url(Papiers/Papiers-mix.jpg)
-140px -870px no-repeat;
width: 195px;
left: 0px;
z-index: 20;
}
-->
</style>
</head>

<body>

<div id="calque15">
<ul id="3en1">
<li id="zone1b"><a href="#1"></a></li>
<li id="zone2b"><a href="#2"></a></li>
<li id="zone3b"><a href="#3"></a></li>
</ul>
</div>
</body>

Dans l'ensemble, il y a un très net progrès .C'est très pratique le coup de l'image qu'on déplace.

Il me reste un problème que je n'arrive pas à résoudre.

L'affichage de la zone1b se fait très bien.
Mais l'affichage des 2 autres zones ne se fait pas là où je le voudrais.
(J'ai tenté de rajouter dans les partie avec :hover une position fixe, mais ce n'est pas pris en compte.)
Je m'explique :
l'affichage :hover de la zone2b se fait à partir du point définit pour la zone2b (soit left: 70px) alors que je voudrais le faire apparaître à la position left: 0px, pour qu'il remplace complètement la première image.

C'est la même chose pour la zone3b.

Comment peut-on forcer la position de l'affichage du :hover ?

Dernière question :
Est-il possible de faire se toucher les zones sensibles définies ?
(ex : la zone 1 va de 0 à 65px, la zone 2 de 66 à 130, la zone 3 de 131 à 195). J'ai remarqué, dans les exemples que j'ai vu, qu'il y avait toujours une marge entre les zones sensibles. Est-ce que c'est purement pratique ou obligatoire ?

merci de ton aide Cygnus.
et merci à tous les autres qui voudront m'aider.