[Résolu] Image affichée au survol d'un mot. Aidez-moi SVP

Bonjour à vous tous,

Je navigue dans la composition d'un site Web depuis un mois avec tous ce qui est disponible de trouver pour m'aider à la compléter mais voilà j'ai de la difficulté à comprendre la façon de faire pour que lorsque je passe la souris sur un mot une image apparaît.

On indique de faire un CSS et d'autre part a:hover zuttttttttt je voudrais bien la terminer cette page avec votre aide. Je sais que vous êtes plus professionnels que moi pensez que je débute.

Un immense merci à ceux et celles qui voudront m'accordez un peu de temps, c'est peut-être du vieux pour vous mais pour moi du nouveau.

Coquine
Modifié par coquine56 (16 Jul 2008 - 15:11)

Salut,

C'est ma première réponse alors soit indulgente si je ne t'explique pas clairement.
Alors voila, ce que tu veux c'est donc faire apparaitre une image au survol de ton lien.

Comme tu as pu t'en rendre compte dans tes recherches, la CSS te permet de séparer le contenu de l'affichage. Ainsi dans ton code HTML, une balise <a href="mon-lien" /> pourra être 'décorée' de multiple façon.

Sur cette balise, il y a un état que l'on appelle "hover". Cet état ce produit lorsque la souris passe sur ton lien.

Si tu veux donc faire apparaitre une image lors de ton état "hover" de lien, il faudra dans ta CSS avoir un style comme suit

<style type="text/css"> 
<!-- Si ton style n'est pas dans un fichier à part -->
a
{
color:#000;
text-decoration:underline;
}

a:hover
{
background: transparent url('image_de_fond.png") no-repeat;
}
</style>

Et voila ! Si tu veux plus de détails sur les style de fond, n'hésites pas à consulter les multiples sources internet.

Bien à toi,
Fab.Ln

Merci Fab,

Je pense que c'est un bon début, alors si je comprends bien il faut que je compose avec ce que tu m'as donné une nouvelle CSS ou bien je dois l'insérer entre des <> déjà établis.

Tu vois il m'en faudrait encore un peu plus pour comprendre mais à force d'essayer je vais arriver surtout avec un bon coup de main.

Merci
Coquine

Bonjour coq...
Bonjour.

Ton message n'est pas "très explicite", s'agit-il de faire un rollover (un changement d'image ou de couleur au survol d'un lien ou de faire apparaître une image (positionnée ailleurs) ?
Pour le rollover tu trouveras des infos en faisant une petite recherche ici même ou sur la vaste toile via un moteur de recherche compétent
Pour le deuxième cas de figure, parmi d'autres méthodes, ce petit tutoriel devrait te révéler les rouages du mécanisme

Cdt,
Sylvain

Bonjour Sylvain,

Je m'excuse si ce n'est pas clair mais voilà je reformule ma demande.

Voici un exemple :

Consultez notre forfait et guide disponible

Lorsque l'internaute déplace la souris sur le mot forfait une image du forfait apparaitrait et la même chose pour le guide.

J'ai fait un grand pas je pense car j'ai réussi d'une certaine façon à le faire mais le a:hover qui contient mon image est restreint en arrière-plan du mot forfait donc trop petit. Il faudrait que cette imageForfait soit placée ailleurs mais je ne sais pas comment faire.

En espérant que ma demande soit mieux formulée.

Merci et à bientôt

Coquine

Hello coquine, (quand même, cela fait bizarre d'écrire cela... )

Oui cela confirme ce que j'avais compris
Donc, il ne s'agit pas de modifier l'image placée en background d'un lien mais bel est bien de faire apparaitre du contenu ailleurs au survol de ce lien, le lien que je t'ai fourni précédemment devrait donc te donner satisfaction

Ce tutoriel devrait également te fournir matière à réfléchir

Si tu as d'autres questions, n'hésites pas

Cdt,
Sylvain

Bonjour Sylvain,

J'ai suivi à la lettre tes informations,mais il semblerait qu'il m'en manque un peu. J'ai travaillé sur mon site hier soir et j'ai réussi à le faire sous Vista. J'ai essayé de la passer par XP et ça ne fonctionne pas

De plus je me demandais si j'ai deux formats d'images quelles informations dois-je modifier ?

Merci de ta patience je vais sûrement réussir

Coquine

Bonsoir coquine56,

Quelle méthode as-tu utilisée ? (span ou infobulle avec javascript ?)
A ce propos, ce type de comportement ne doit/devrait (et ce dans la plus grande majorité des cas), être géré que par un langage dynamique (ccs ne devant s'occuper que du maquillage de la mariée )
Tu pourras trouver sur le net bon nombre de scripts te permettants ce type d'action.

Quoiqu'il en soit, si tu souhaites de l'aide, il va falloir nous montrer ce que tu as déjà fait, l'idéal étant de donner un lien vers une page de test ou à défaut le code déjà produit ((x)html /css/javascript si besoin)

Bonne continuation, et ne te décourage pas

Cdt,
Sylvain

Merci Sylvain, j'ai résolu ce problème et j'en attaque un autre.

Merci !