Images superposées + liens.
Bonjour,
je dispose de 4 images.
Une que je souhaiterai mettre en fond.
Les 3 autres sont plus petites, et j'aimerai les afficher par dessus à des emplacements précis.
J'aimerai également que ces 3 plus petites images soient cliquables vers des pages différentes.
Comment faire cela ?
En css, je connais les bases, mais la superposition comme cela je n'y connais rien, si ce n'est mettre une image en fond, pour placer ensuite les autres à des coordonnées précises, je n'ai aucune idée :S
Merci d'avance ;)
http://raphlight.free.fr/trad.php
PS: je cherche un système qui fonctionne sur FF et sur IE... ce qui complique un peu plus la tâche :s
http://raphlight.free.fr/trad.php
non rien de compliqué :
les attributs position en relatif ou absolue.
et la propriété z-index.
Bon courage ^^
zebdinou pour les intimes / Blog : http://www.zebden.fr
Message bref, concis.
Je crois que je vais devoir faire des recherches sur z-index alors ^^
Merci, je donnerai des nouvelles :P
http://raphlight.free.fr/trad.php
Ca y est, j'ai réussi à empiler les images les une sur les autres comme je le voulais.
Une image de fond et 3 image gif par dessus de la même taille que le fond mais avec de la transparence. Ainsi l'objet est placé où je le souhaite.
Par contre, je bloque au niveau des liens...
CSS:
div {height: 450px; width: 600px;}
div#fond {position: absolute; background-image: url(images/fond.jpg); background-repeat: no-repeat; visibility: visible; z-index: 0;}
div#img1 {position: absolute; background-image: url(images/img1.gif); background-repeat: no-repeat; visibility: visible; z-index: 1;}
div#img2 {position: absolute; background-image: url(images/img2.gif); background-repeat: no-repeat; visibility: visible; z-index: 2;}
div#img3 {position: absolute; background-image: url(images/img3.gif); background-repeat: no-repeat; visibility: visible; z-index: 3;}
HTML :
<div id="fond"></div>
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
En plus là, comme c'est du CSS, je peux pas faire d'imagemap... donc par exemple si je veux que le lien de ma première image soit un carré de 100/100 pixels à 50px à partir de la gauche de l'image et 100px à partir du haut... Ben je vois pas comment faire :S
http://raphlight.free.fr/trad.php
Qu'est-ce qui t'empêche de faire un map ?
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Une map, je la fait avec <img usemap="#nomdelamap">
Mais là j'ai pas de balise img puisque c'est du css...
http://raphlight.free.fr/trad.php
Ok je comprends mieux. Et les div vont bouger ?
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Bouger ?
Euh... nan les images sont toutes de même taille, le tout reste fixe.
(Pourquoi cette question ?)
http://raphlight.free.fr/trad.php
En fait je me demandais si tu ne pouvais pas placer une imagemap transparente par dessus les div. Comme ça c'est le imagemap qui prend en premier le click.
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
