Images et passage de la souris sur un lien

Bonsoir,

J'aurais besoin de vos lumières pour mon site.

Comme je ne sais pas comment cette manip s'appelle, j'ai préféré faire un schéma.

http://i86.photobucket.com/albums/k99/subspinipes971/web01.jpg
http://i86.photobucket.com/albums/k99/subspinipes971/web02.jpg
http://i86.photobucket.com/albums/k99/subspinipes971/web03.jpg

Je souhaiterait qu'une photo apparaissent sur un div a gauche de la page lors du passage de la souris sur un lien qui ce situe sur un div au centre, afin que les visiteurs du site visualisent de quoi il est question avant de cliquer et d'ouvrir la page.
Et aussi de suite pour chaque liens.

Merci
Modifié par Ameiva (02 Apr 2007 - 03:28)

Bonjour.

En fonction de ce que tu veux (Apprendre, faire vite, faire propre...) tu peux :

1/ Rechercher de la doc sur les propriétés onmouseover - onmouseout

2/ tu peux intégrer un code similaire à ce qui suit :

onmouseover="document.getElementById('zone1').src='pathname de l'image'"

Dans les propriétés de chacune de tes balises a
Avec zone1 valant l'id de la balise img définie pour la zone de ton aperçu.

3/ Tu peux créer un fichier .js externe dans lequel tu écris une fonction javascript qui fera le même travail (voir un peu plus compliqué si tu souhaites)

Hello et bienvenue,

Une petite recherche dans les tutoriels me trouve le tuto "Afficher/Masquer des éléments sans JavaScript" qui est tiré de l'exemple célèbre d'Eric Meyer :
http://meyerweb.com/eric/css/edge/popups/demo2.html

Bonne lecture

euh... désolé... Je me permets de critiquer... surtout Eric Meyer... (pour une fois que je peux, hein ! Je ne vais pas louper ça... )

Afficher/masquer des éléments sans Javascript présuppose de détériorer la sémantique du document. A priori, c'est à Javascript de faire apparaître cette image. La mise en forme et le positionnement de l'image, par contre, doivent bien être effectués via CSS.

L'erreur serait de croire que la solution CSS est plus... compatible ? accessible ? ... alors que ce n'est pas le cas... On ne peut pas se fonder là-dessus, d'une parce que ce n'est pas justifié mais aussi parce qu'il existe des supports ou des utilisateurs qui configurent leur navigateurs de telle manière que seul JS est actif ou seul CSS est actif.

Vu que JS offre plus de possibilités pour gérer les comportements (c'est son rôle) et que l'apparition de cette image reste de toute façon optionnelle, je préfère cette solution parce qu'elle a l'avantage de ne pas dégrader la sémantique du document.
Modifié par koala64 (02 Apr 2007 - 14:29)

koala64 a écrit :
euh... désolé... Je me permets de critiquer...

euh... en tant que modérateur... moi, j'aurais juste dit à Raphael qu'il... n'était pas dans la bonne rubrique...

Bon... sérieux... et connaissant mon n00biisme indécrottable en css, (i.e. : ma question est sincère et ne cache aucun sous-entendu sarcastico-contestataire) peux-tu m'expliquer ce que tu entends par déteriorer la sémantique du document ?

aCOSwt a écrit :
peux-tu m'expliquer ce que tu entends par déteriorer la sémantique du document ?

ben, dans l'exemple de Raphaël, on ajoute un span avec le contenu qui va dedans dans le code source alors que celui-ci n'est justifié qu'au survol... A priori, ça ne doit apparaître qu'au survol et non au repos... donc pourquoi ça apparaît si on désactive CSS ? et pourquoi dans un span si on met un paragraphe par exemple ? ce n'est pas très représentatif... et pourquoi le paragraphe se trouve dans le lien plutôt que dans la div ?

Ameiva souhaite faire apparaître cette image dans la div d'à côté... (pas dans le lien)
Il serait donc préférable de le faire vraiment... parce que la bidouille CSS, elle marche sur un support tel Fx, IE, etc... mais ça peut être perturbant sur un autre support...

Pour le cas du texte, tu vas me dire : "ben plutôt qu'un span, on met un p et le tour est joué" ? -> c'est invalide et le p n'apparaît pas au bon endroit.

bon et puis, je n'avais pas fait gaffe mais on zappe encore la navigation clavier pour le coup... Faudrait aussi ajouter le comportement à la prise de focus.
Modifié par koala64 (02 Apr 2007 - 15:28)

pigé !
Merci koala64.

Arf !!! Ça a l'aire galère tout ça
Je vais essayer de voir ce que ça va donner
Merci

Ça marche, mais l'image ce balade un peu partout selon le format d'affichage, il y a un moyen de le "fixer" dans le cadre de gauche sans qu'il ce réaligne selon le format ?

Houla, je viens de voire qu'il a foutu le bocson dans mes premiers liens css.