Image survolée au passage de la souris sur une image [Résolu]

[tibo2nantes]

Bonjour,

J'ai besoin d'aide pour mon site internet. Je m'explique : c'est un site de vente de villas. J'aimerais afficher le plan de la villa sur une page, et lorsque le visiteur passe sa souris sur une partie de ce plan, une photo correspondant à la pièce correspondante s'affichera. Je ne sais pas si je suis assez clair pour que vous me compreniez (?).

Le problème est que je ne sais pas par où commencer. Connaissez-vous un moyen de développer cela ?
J'ai quelques connaissances en HTML, PHP, CSS, et Photoshop.

Merci de votre aide.

[Ceddoc]

tu peux y arriver en html:

Une explication ici

[bob633]

Je ne pense pas que le map name HTML réponde trop à son besoin.

D'après ce que j'ai compris, c'est lorsqu'il survole une image, une autre s'affiche, en plus grand ? Enfin dans l'idée.

En tout cas moi pour ça je ferais une petite fonction javascript. Sur ton image de plan, tu mets un événement

Code :

onmouseover="ouvrir(nom_image)";

Ensuite tu crées ta fonction qui récupére le nom de l'image, dans celle-ci tu récupéres le nom de ton image et tu l'ouvres, soit dans une sorte de fenêtre popup ou autres. Tu trouveras sur google pour ça

[Ceddoc]

Envoyé par tibo2nantes

et lorsque le visiteur passe sa souris sur une partie de ce plan, une photo correspondant à la pièce correspondante s'affichera

a mon avis il veut découper le plan d'une maison en fonction d'une pièce et afficher les photos de l'intérieur de la pièce donc il faut bien découper l'image "plan" de la maison en zones...

[bob633]

Ah oui en effet, j'avais survoler cette ligne, et mal comprise ..

Tu peux utiliser l'ajax je pense en complément du map name.

Par exemple tu affiches ton plan, tu le découpes en plusieurs parties pour ton map name, tu as auras donc des zones cliquables.

Sur chaque zone tu met l'événement onmouseover, et en dessous tu utilises l'ajax pour afficher les images sans recharger ta page, ni même ouvrir une autre fenêtre.

Je pense qu'avec jquery tu dois avoir une classe qui te permet de créer les requêtes AJAX sans trop te prendre la tête si tu connais pas

[12monkeys]

Bonjour

Pour l'affichage d'images lors du survol, nul besoin d'ajax ou de javascript. On peut parfaitement le faire grâce au CSS : http://plambert.developpez.com/tutor...mage-vignette/ exemple à adapter mais qui montre le principe...

[bob633]

Envoyé par 12monkeys

Bonjour

Pour l'affichage d'images lors du survol, nul besoin d'ajax ou de javascript. On peut parfaitement le faire grâce au CSS : http://plambert.developpez.com/tutor...mage-vignette/ exemple à adapter mais qui montre le principe...

C'est bien pour une galerie photo le css, mais il pourra pas découper les zones de son image (plan) rien qu'avec ça pour en faire apparaitres d'autres ...

[12monkeys]

Ce que je voulais dire c'est que l'utilisation combinée des maps et du CSS permettra de faire ce que veux tibo2nantes.

EDIT : bon ben finalement mon idée n'était pas si bonne que ça parce que ce n'est apparemment pas possible : http://www.developpez.net/forums/d66...e-mappe-hover/, http://www.developpez.net/forums/d58...-map-css-bloc/ les styles appliqué à une balise area n'auront aucun effet !

Donc tu peux utiliser les maps, mais pour l'image au survol il faudra effectivement utiliser JavaScript avec un événement onmouseover

[tibo2nantes]

Merci beaucoup à tous, je vais donc essayer d'utiliser une map html pour définir les zones du plan, puis effectuer un OnMouseOver avec JavaScript. Je ne m'y connais pas du tout en AJAX (je ne connais même pas jQuery), mais je vais essayer de me débrouiller, ça n'a pas l'air super compliqué.
Au pire, je reviendrai vers vous !

Merci.

[Ceddoc]

Tu n'as pas besoin d'Ajax, il ne faut pas confondre Javascript et Ajax, ce sont deux choses différentes...