[resolu] Switch entre 2 image

Boujour a tous,

Voila mon problème, comme je débute en CSS je voit pas trop comment m'y prendre.

En fait j'ai une photo d'un magasin, et un plan d'accès à ce magasin, ce que je veux c'est que quand la photo de la vitrine est affichée, dans l'angle en bas à droite j'ai le plan d'accès en vignette, et vice et versa. Et je switch de l'un à l'autre avec un clic sur la vignette (ou un survol).
Vous voyez ce que je veux dire.

Merci de votre aide.
Modifié par EdWong (01 Jun 2006 - 10:54)

Salut,

Peut être que ça peut t'aider :

http://css.alsacreations.com/Tutoriels-et-articles-divers/Afficher-Masquer-des-calques-sans-javascript

En tout cas moi j'ai reussi à le faire ce matin

Tu as simplement à modifier les coordonnées de l'emplacement quand tu auras compris le fonctionnement.
Modifié par yank (31 May 2006 - 17:57)

Salut,

Je pense que pour résoudre ton problème, il va falloir se tourner vers javascript. Je ne pense pas que cela soit réalisable uniquement en css mais je peux me trompé .

Le script qui s'occupera de réaliser le switch de tes 2 images va se présenter comme cela :

1ere étape : je récupère la source de l'image sur laquel je viens de cliqué avec la propriété document.getElementById("image1").src. Je la stocke dans une variable temporaire (tmp1).

2eme étape : Je fais de même avec ma deuxième image (tmp2).

3eme étape : On intervertie les images en utilisant la même propriété, document.getElementById("image1").src = tmp2 et de même avec tmp1 et image2

Je pense qu'il vaut mieux déclancher ce script lorsque l'utilisateur clique sur la vignette plutot qu'au survol car ca risque de l'énervé un peu si l'image change dès qu'il bouge la souris.

J'éspère t'avoir aidé .

Peut être en faisant deux images, l'une étant remplacé par la seconde lors du survol grâce à la propriété a: hover ?!

Bien, merci, j'ai réussi a positionner mes 2 images comme je le souhaitais avec CSS, grace aux tuto de ce site , même sous IE c'est OK .

Je passe au javascript, merci pour l'algo.

EdWong a écrit :
Bien, merci, j'ai réussi a positionner mes 2 images comme je le souhaitais avec CSS, grace aux tuto de ce site , même sous IE c'est OK .

Je passe au javascript, merci pour l'algo.

Bravo
Tu considères que ce sujet est [Résolu] ?

Oui juste un détail, j'ai mis des balises <a> autour de ma vignette, et du coup ca rajoute une bordure à mon image, comment l'enlever ?

Utilise la porpriété border de cette façon : img { border: none; }

Mais le pb c'est que c'est les balises <a> qui ont la bordure et que j'utilise des bordure top et bottom pour ma vignette.
si je fait a{border:none;} rien ne ce passe

Rajoute ceci, afin de définir à zéro toutes les marges de tes images :

img {
border: 0;
}

Modifié par Jedi (01 Jun 2006 - 10:53)

Voila c'est ok, ca marche, impec , merci a vous.