Ouvrir un image "pop-up" quand on survole une autre image ?

Shanx · Le 12/04/2010, à 15:49

Bonjour,
ce que je demande est plutôt simple (enfin ça se voit beaucoup sur internet) mais je ne sais pas du tout comment faire.
Alors voilà, imaginons qu'on ait une grande image. Je voudrais que lorsque la souris passe sur une certaine zone, il y ait l'"ouverture" d'une image. C'est à dire que je voudrais que ça fasse comme une info-bulle, mais avec une image.

Je sais pas si je suis clair, mais j'espère que vous pourrez m'aider Merci

EDIT : rien de tel qu'un exemple

sauf qu'à la place du texte, je voudrais mettre une photo. Et en plus, je voudrais que l'infobulle change selon l'emplacement de la souris sur la photo. Flash est-il nécessaire ? (c'est pour un site)

Dernière modification par w@$p (Le 12/04/2010, à 15:53)

stonehenge · Le 12/04/2010, à 16:43

Bonjour,

Eventuellement avec la balise "hover" dans un fichier CSS? Je suis moi-même en train de potasser là-dessus. J'y connais encore que dalle mais c'est une piste...

http://css.mammouthland.net/rollover-ps … -hover.php

feeatmod · Le 12/04/2010, à 20:55

Bonsoir,

effectivement

apprendre et travailler directement le code source peut te permettre de réaliser ce que tu souhaites
réaliser
le html pour la mise en place des pages
et le css pour la mise en forme
le php pour la dynamique et le travail côté serveur

la propriété hover en css permet d'attribuer un changement une action lors du survol de la souris sur la balise html
sur laquelle elle est appliquée

le java-script et son action côté client (navigateur) peut résoudre de manière adéquate ton problème, mais son utilisation varie selon les navigateurs

le mieux est de commencer à potasser de suite
c'est abordable sans prise de tête
et un simple éditeur de texte suffit ( gedit par exemple )

la référence pour débuter;
le site du zéro
http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html

puis un certain nombre de sites pour l'apprentissage avancé du css

http://css.mammouthland.net/premiers-pas-en-css.php

http://www.css-faciles.com/index.php

http://www.pompage.net/pompe/portescoulissantes/

http://cerig.efpg.inpg.fr/dossier/feuilles-de-style/page06.htm

http://css4design.com/design-css-liquide-ou-fluide-encadre-d-images-repetees-sans-table

bon allez j'arrête là

attention tout ceci ne se fait tout de même pas en un jour
et il faut potasser un peu et s'exercer avant de coder fluide

Enfin si tu ne parviens pas à accrocher je t'aiderai sans problème
tu peux me contacter à mon adresse de courriel , elle est dispo dans les détails de la liste des utilisateurs

feeatmod

Dernière modification par feeatmod (Le 12/04/2010, à 21:06)

stonehenge · Le 12/04/2010, à 22:11

Intéressants, tes liens, feeatmod... Merci!

Shanx · Le 13/04/2010, à 08:37

Je crois avoir trouvé quelque chose de plus simple : ce sont les cartes cliquables de gimp. On peut définir certaine partie d'une image étant des liens vers d'autres images (ou un site). Maintenant faut juste que j'arrive à faire en sorte qu'en survolant le lien l'image apparaisse dans une info-bulle, mais ç ça doit être du javascript donc je laisserai une personne plus compétente que moi s'en occuper ).
En tout cas, merci beaucoup pour les réponses

pops · Le 13/04/2010, à 12:49

quelque chose comme ca?
http://blog.jaysalvat.com/demo/tooltips/

stonehenge · Le 13/04/2010, à 12:53

Et hop, dans mes marque-page! Merci, pops!

stonehenge · Le 13/04/2010, à 14:57

Zut, je n'arrive pas à faire fonctionner ce tuto... Mais bon, je ne vais pas polluer ce topic avec mon problème...

pops · Le 13/04/2010, à 15:17

tu as bien chargé la librairie jquery + le plugin en question?
sinon comme expliqué dans le tuto, tu peut aller voir la ( http://api.jquery.com/category/selectors/ ) pour comprendre comment selectionner un div, lien ou autre auquel tu veut appliquer l'infobulle.

sinon ouvre un nouveau topic avec ta page html.

stonehenge · Le 13/04/2010, à 18:51

Bonsoir,

J'ai un répertoire "images", ainsi que les fichiers jquery.toolpics.css et jquery.tooltips.js auxquels je n'ai pas touché. J'ai rajouté les liens dans la balise head. J'obtiens une image cliquable vers une autre image mais pas d'info-bulle... Je vais retourner voir cette doc, ça doit être une bêtise...

feeatmod · Le 13/04/2010, à 23:14

w@$p a écrit :

Je crois avoir trouvé quelque chose de plus simple : ce sont les cartes cliquables de gimp. On peut définir certaine partie d'une image étant des liens vers d'autres images (ou un site). Maintenant faut juste que j'arrive à faire en sorte qu'en survolant le lien l'image apparaisse dans une info-bulle, mais ç ça doit être du javascript donc je laisserai une personne plus compétente que moi s'en occuper ).
En tout cas, merci beaucoup pour les réponses

rE,

en effet
the gimp va te permettre de créer une image cliquable web par zone précise
c'est là la première étape pour réaliser ton projet

en sortie tu retrouveras un fichier texte comportant le code source html à insérer dans tes pages web

la balise <area> encadre les coordonnées précises de chaque zone

coordonnées déterminées depuis le coin haut gauche de l'image

Mais ceci n'est pas suffisant

pour obtenir l'effet voulu

il te faut soit

utiliser le java-script

soit
agir sur la feuille de style css

à l'aide de la propriété hover ou encore before et after par exemple sur une classe différente que tu appliqueras elle même à chaque balise <area> distinct
( en changeant l'image de fond -backgroud-image- pour chaque classe différente )

Je sais tu ne comprends pas grand chose à ce que j'explique,

mais il te suffit de t'attaquer aux tutos mentionnés plus haut pour t'éclairer

La meilleur façon et à l'usage la plus simple et la plus efficace pour créer des pages web personnelles
c'est de potasser et comprendre le code source

enfin e-anim te permettra également de travailer sur des images et des animations
de manière conviviale
http://www.phildes.com/

c'est gratuit ou la version payante est plus qu'abordable

juste dommage que phildes n'est pas encore trouvé de développeur pour finaliser la version linux
e-anim ne tourne donc actuellement que sous windows

feeatmod

Dernière modification par feeatmod (Le 13/04/2010, à 23:17)

Fake · Le 13/04/2010, à 23:30

y a en théorie pas besoin de javascript.

Cherche des tutos pour faire des menus déroulant en css. c'est le même principe :
Faire apparaitre un élément à un endroit donné quand on passe la souris sur une zone.

ex : http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php

Shanx · Le 14/04/2010, à 08:57

Ok, merci beaucoup je teste ça tout à l'heure

krodelabestiole · Le 19/04/2010, à 03:55

javascript est nécessaire pour accrocher l'image-bulle au curseur

jquery cité au dessus est une bonne solution, c'est une librairie javascript, mais un peu lourde (un bulldozer pour écraser une mouche)

sinon c'est un bon exercice pour débuter le javascript, dans tous les cas il te faudra 2 - 3 connaissances en css aussi
cherche comment récupérer la position du curseur et comment déplacer un élément html en javascript, tu trouveras facilement des exemples tout faits

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 12/04/2010, à 15:49

Ouvrir un image "pop-up" quand on survole une autre image ?

#2 Le 12/04/2010, à 16:43

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#3 Le 12/04/2010, à 20:55

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#4 Le 12/04/2010, à 22:11

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#5 Le 13/04/2010, à 08:37

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#6 Le 13/04/2010, à 12:49

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#7 Le 13/04/2010, à 12:53

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#8 Le 13/04/2010, à 14:57

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#9 Le 13/04/2010, à 15:17

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#10 Le 13/04/2010, à 18:51

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#11 Le 13/04/2010, à 23:14

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#12 Le 13/04/2010, à 23:30

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#13 Le 14/04/2010, à 08:57

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

#14 Le 19/04/2010, à 03:55

Re : Ouvrir un image "pop-up" quand on survole une autre image ?

Pied de page des forums