le 26/03/2009 à 00:30
raphlight
Sujet résolu.
J'ai presque honte de ne pas y avoir pensé.
Merci Lupus ^^
J'ai presque honte de ne pas y avoir pensé.
Merci Lupus ^^
Images superposées + liens.
le 11/04/2009 à 14:42
raphlight
En fait... ca n'est pas résolu.
Après vérification, j'ai toujours un problème; l'image map est décalé vers le bas lorsque j'utilise l'attribut "id" car je dois faire un div pour chaque image de fond, et plus j'empile les div, plus l'espace avant l'image map est grand.
Bref, je cherche donc à passer par l'attribut "class".
CSS:
HTML:
Ainsi je ne garde qu'un seul div et l'image map n'est pas décalée.
Le problème est que seule la dernière image s'affiche (l'image de class "image6" : 5.gif)
Bien qu'elle ait un fond transparent on ne voit pas les 5 autres images censées être en dessous. Simplement l'image 5.gif
Comment expliquer cela ?
On peut pourtant mettre plusieurs class sur une même balise, non?
Après vérification, j'ai toujours un problème; l'image map est décalé vers le bas lorsque j'utilise l'attribut "id" car je dois faire un div pour chaque image de fond, et plus j'empile les div, plus l'espace avant l'image map est grand.
Bref, je cherche donc à passer par l'attribut "class".
CSS:
<style type="text/css">
<!--
.image1 { position: relative; background-image: url(images/fond.jpg); background-repeat: no-repeat; top: 0px; left: 0px; visibility: visible; }
.image2 { position: relative; background-image: url(images/1.gif); background-repeat: no-repeat; top: 0px; left: 0px; visibility: visible; }
.image3 { position: relative; background-image: url(images/2.gif); background-repeat: no-repeat; top: 1px; left: 0px; visibility: visible; }
.image4 { position: relative; background-image: url(images/3.gif); background-repeat: no-repeat; top: 1px; left: 0px; visibility: visible; }
.image5 { position: relative; background-image: url(images/4.gif); background-repeat: no-repeat; top: 1px; left: 0px; visibility: visible; }
.image6 { position: relative; background-image: url(images/5.gif); background-repeat: no-repeat; top: 1px; left: 0px; visibility: visible; }
-->
</style>
HTML:
<div class="image1 image2 image3 image4 image5 image6">
<img src="images/transparent.gif" alt="" height="450" width="600" border="0" usemap="#map">
</div>
Ainsi je ne garde qu'un seul div et l'image map n'est pas décalée.
Le problème est que seule la dernière image s'affiche (l'image de class "image6" : 5.gif)
Bien qu'elle ait un fond transparent on ne voit pas les 5 autres images censées être en dessous. Simplement l'image 5.gif
Comment expliquer cela ?
On peut pourtant mettre plusieurs class sur une même balise, non?
le 11/04/2009 à 21:05
LupusMic
Heureux de t'avoir débloqué :D
Pourquoi mets-tu des div autour des images ? L'attribut id est défini pour tous les éléments. img peut donc avoir un id unique.
Mais si tu tiens vraiment à tes div, regarde les propriété CSS margin, padding et border.
Pourquoi mets-tu des div autour des images ? L'attribut id est défini pour tous les éléments. img peut donc avoir un id unique.
Mais si tu tiens vraiment à tes div, regarde les propriété CSS margin, padding et border.
le 12/04/2009 à 19:58
raphlight
Comment cela défini pour tous les éléments ?
Comment faire alors dans mon cas, je ne vois pas ?
Je ne tiens pas à faire quoi que ce soit, simplement le plus simple ^^ Je cherche des solutions :S
Comment faire alors dans mon cas, je ne vois pas ?
Je ne tiens pas à faire quoi que ce soit, simplement le plus simple ^^ Je cherche des solutions :S
le 12/04/2009 à 20:17
LupusMic
Les éléments HTML sont ce qu'on appelle abusivement tag ou balise (car le tag ou la balise sont en fait le début et la fin d'un élément HTML.
Donc en fait, tu peux définir l'attribut id pour tout les éléments.
Donc enlève les div encapsulant les img, et définis l'attribut id avecla valeur du div que tu utilisais.
Ta dernière phrase est étrange :p
Donc en fait, tu peux définir l'attribut id pour tout les éléments.
Donc enlève les div encapsulant les img, et définis l'attribut id avecla valeur du div que tu utilisais.
Ta dernière phrase est étrange :p
le 12/04/2009 à 20:25
raphlight
Tu pense que mon code est comme cela ?
Ou alors je n'ai rien compris mais mon code avec un tas de div est tel quel :
<div id="image1"><img src="1.gif"></div>
Ou alors je n'ai rien compris mais mon code avec un tas de div est tel quel :
<div id="image1"><div id="image2"><div id="image3"></div></div></div>
le 12/04/2009 à 20:26
raphlight
euh, en fait, comme ca :
<div id="image1">
<div id="image2">
<div id="image3">
<img src="transparent.gif" usemap="#map">
</div></div></div>
le 12/04/2009 à 20:26
raphlight
Bref, je suis perdu là x)
le 12/04/2009 à 23:32
LupusMic
Tu viens aussi de me perdre.
Bon, finalement, ce que tu veux c'est pouvoir cliquer dans une zone de la page, avec des carrés qui flotent par-dessus cette zone qui permettent à l'utilisateur de se repérer ?
Bon, finalement, ce que tu veux c'est pouvoir cliquer dans une zone de la page, avec des carrés qui flotent par-dessus cette zone qui permettent à l'utilisateur de se repérer ?
le 13/04/2009 à 20:47
raphlight
http://raphlight.free.fr/exem.jpg
En fait voilà ce que je souhaite faire, je dispose d'une image de fond ainsi que de plusieurs images, 1.gif, 2.gif, 3.gif.
J'aimerais que les zones représentées en orange, rose et vert soient cliquables, avec chacune leur lien.
En fait voilà ce que je souhaite faire, je dispose d'une image de fond ainsi que de plusieurs images, 1.gif, 2.gif, 3.gif.
J'aimerais que les zones représentées en orange, rose et vert soient cliquables, avec chacune leur lien.
