Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1306 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Affichage d'un thumbnail en survolant un lien

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Affichage d'un thumbnail en survolant un lien

n°987205
ofbdood
Posté le 19-02-2005 à 19:22:56  profilanswer
 

Bonsoir à tous,
 
Voilà beaucoup doivent se dire : "quel boulay ça à été abordé 36 000 fois sur le forum" et bien en fait ça ne me convient jamais :p
 
J'explique ce que je veux faire :
J'ai une liste de liens qui s'affichent sur ma page, du genre :
image01
image02
image03
 
Ce que je veux obtenir c'est que lorsque l'on survole un lien, il s'affiche l'image correspondante, mais attention pas dans une nouvelle fenêtre, je la veux "liée" au curseur. Dès qu'on enlève la souris du lien l'image disparaît.
J'espère que je me suis fait comprendre.
 
J'ai déjà pas mal regardé à mon avis il va obligatoirement falloir du javascript et pas uniquement du css.
je pensais le faire en utilisant "hover" mais après pour le reste j'ai un peu de mal.
 
Quelqu'un aurait il une idée ? (où même un lien ça me suffit)


Message édité par ofbdood le 19-02-2005 à 19:23:49
mood
Publicité
Posté le 19-02-2005 à 19:22:56  profilanswer
 

n°987232
Profil sup​primé
Posté le 19-02-2005 à 20:09:46  answer
 

pas de javascript, juste du CSS ... tu mets le menu en texte et tu fais bien un hover pour afficher la thumbnail en rollover ...
explication ici : http://www.alsacreations.com/articles/rollover_unique/
ça devrait etre ce que tu cherches ;)
Il ne te reste qu'à faire une image moitié vide moitié pleine [ transparente sur 50% de la largeur et la vignette sur l'autre moitié) et à faire une image gif transparente en image de rollover off ... et l'image apparaitra juste à coté de ton lien lors de son survol ...
bonne soirée


Message édité par Profil supprimé le 19-02-2005 à 20:11:43
n°987747
ofbdood
Posté le 20-02-2005 à 17:20:37  profilanswer
 

Merci pour ta réponse !
Par contre moi j'aimerais éviter d'avoir à réserver un emplacement pour l'image (invisible).
J'aimerais que l'image s'affiche sur tout le reste des éléments (texte, lien, ...)
 
Bon pour faire plus simple voilà ce que j'aimerais :
http://www.panik-po.com/forum/images/rollover.jpg

n°987784
masklinn
í dag viðrar vel til loftárása
Posté le 20-02-2005 à 18:04:22  profilanswer
 

Pour faire un truc pareil, il faut du beau javascript bien kaka :hello:  
 
Pour faire quelque chose de propre, on préférera un truc dans ce style


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°987785
ofbdood
Posté le 20-02-2005 à 18:04:57  profilanswer
 

Bon j'ai trouvé quelque chose qui me convient, je ne pense pas que ça soit mieux que l'idée proposée par gunner4902 mais celle-ci, j'ai réussi à la faire fonctionner :p
 
Voici le code :
 

Code :
  1. // Emplacement de l'image invisible de départ
  2. <img src="images/empty.gif" align="right">
  4. // Lien affichant l'image sélectionnée grâce à un lien, à la place de l'image invisible
  5. <a href="#" onMouseOut="document.images[0].src='images/empty.gif'" onMouseOver="document.images[0].src='{fil_url}'">{fil_name}</a>
  7. // Ici "{fil_url}" est dynamique, on peut le remplacer par un lien statique

n°987788
ofbdood
Posté le 20-02-2005 à 18:07:21  profilanswer
 

Masklinn -> ha bah ça ressemble fortement à la proposition de gunner4902.
Bon je vais quand même reéssayer avec votre méthode parce c'est que javascript ça va bien 5 min :p

n°987797
masklinn
í dag viðrar vel til loftárása
Posté le 20-02-2005 à 18:29:55  profilanswer
 

ofbdood a écrit :

Masklinn -> ha bah ça ressemble fortement à la proposition de gunner4902.
Bon je vais quand même reéssayer avec votre méthode parce c'est que javascript ça va bien 5 min :p


C'en est issu, mais de manière beaucoup plus complexe dans la mesure où c'est un rollover à distance en CSS (passer la souris sur un élément affecte non l'élément mais un élément distant, en tout cas on en a l'illusion)
 
Voir les CSS Popups d'Eric Meyer pour savoir comment c'est fait
et ici un exemple de gallerie d'images rollover (code plus simple que le lien de gallerie précédent)[/url]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°987809
ofbdood
Posté le 20-02-2005 à 18:57:17  profilanswer
 

Ha parfait ça marche :)
Par contre je l'ai simplifié au maximum pour moi.
 
Le .css

Code :
  1. a span {display:none;}
  3. a:hover span {
  4.     display: block;
  5.     position: absolute;
  6.     top: 0px;
  7.     right: 0%;
  8. }


 
Le .html

Code :
  1. // {fil_url} : url de l'image dynamique
  2. <a href="#">Voir<span><img src="{fil_url}"></span></a>

n°987820
ofbdood
Posté le 20-02-2005 à 19:12:54  profilanswer
 

Grand merci à vous 2 :jap:

n°987829
Profil sup​primé
Posté le 20-02-2005 à 19:26:59  answer
 

ce fut un plaisir de pouvoir t'aider !  
bonne continuation


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Affichage d'un thumbnail en survolant un lien

 

Sujets relatifs
comment faire un double lien en PHP ? [reglé]faire un lien avec l/p sur un site web
Lien dans une page HTML vers un bookmark dans un fichier .DOC[HTML] Afficher un post-it au passage sur un lien ???
Lien en fondurafraichir affichage
Affichage de pageFLASH (lien vers une autre page)
Modifier un lien dans un script JavaComment supprimer ligne entre 2 titres // ce lien ne se centre pas ?
Plus de sujets relatifs à : Affichage d'un thumbnail en survolant un lien

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.062 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR