Passage de curseur et image

gio · Inscrit le: 25 Jan 2003 Messages: 230 Localisation: Strasbourg

Je voudrais savoir comme faire, pour, sur un site en html, faire que:

-Quand on passe le curseur de la souris sur une image séléctionné pour, une autre image apparaisse?

Et pour que ce soit plus parlant et concret:

-Je veux mettre un personnage en image sur mon site, et je veux que quand qqn passe le curseur dessus, une bulle de texte apparaisse au dessus de lui.

iGREKKESS · Posté le: Jeu Fév 12, 2004 1:49 am Sujet du message:

C'est un sujet que je connais assez bien puisque j'utiliser ce genre de truc depuis la création de mon site !
Et j'en ai fait quelques uns des scripts avant de trouver le meilleur !

En fait ce qui est marrant c'est que le meilleur (plus simple), il se passe justement de script (java) !
Si un script java s'en mêle malgré tout, ça sera une script dit de "preload", qui préchargera les images (quand il y en a plusieurs) afin qu'elles s'affichent tout de suite au passage du curseur.

Pour ce qui est du code pour faire changer une image, tu dois définir 3 paramètres : donner un nom à l'image affichée par défaut (c'est pas obligatoire si il n'y a qu'une image changeante sur la page, mais c'est pour faire les choses proprement), puis ajouter 2 paramètres standard java pour faire réagir l'image.

On va dire que l'image par défaut c'est image1.gif et l'image qui la remplace en passant le curseur c'est image2.jpg

Le code est le suivant :

gio · Posté le: Jeu Fév 12, 2004 2:05 am Sujet du message:

Merci meussieur negrek !

gio · Posté le: Mer Fév 18, 2004 12:27 pm Sujet du message:

Pour le script, ou est ce que j'insère l'url des images?

Ce script je suppose que je le copie dans le code source de ma page html...mais à quel endroit?

iGREKKESS · Posté le: Jeu Fév 19, 2004 12:51 am Sujet du message:

Ce script se met au début de la page, pour qu'il soit chargé avant les images réactives...

Pour l'URL, tu le mets pour chaque image dans preloadimages("...
_________________
Die Hard SEGA Fan ~1951-2001~, yippee-ki-yay ! - iGREKKESS' Blog (グレッケッス★アドベンチャー)

gio · Posté le: Jeu Fév 19, 2004 1:39 pm Sujet du message:

Ca ne donne rien...voilà mon code:

Elgueusard · Invité

Au lieu de galérer avec le code, tu pe aussi installer Dreamweaver MX, qui permet qd même de faire des pages BCP plus rapidement (gt récalcitrant aussi moi au début, mais g vite changé d'avis).
Ensuite dans le logiciel, cette fonction est incluse. Suffit de cliquer sur l'icone 'image survolée'....

iGREKKESS · Posté le: Ven Fév 20, 2004 10:20 am Sujet du message:

Et dis moi, Dreamweaver MX c'est un freeware Question

gio : utilise des URLs relatifs et non absolus (menu/ au lieu de http://membres.lycos.fr/giobd/menu/ si la page se trouve un niveau au dessus des images)
De plus je ne vois pas le code pour ton image réactive dans ce que tu donnes plus haut (je sais pas si c'est fait exprès)...
_________________
Die Hard SEGA Fan ~1951-2001~, yippee-ki-yay ! - iGREKKESS' Blog (グレッケッス★アドベンチャー)

gio · Posté le: Ven Fév 20, 2004 12:50 pm Sujet du message:

Donc je met qu'une url, celle ou il y a les 2 images?
Code image Réactive> ben en fait j'ai pas tout compris...les codes que tu avait donné avant je pensais que c'était pour autre chose de complètement différent et que je m'en servais pas du tout...tu sais des fois au risque de t'embêter tu devrais dire des trucs qui peuvent te paraître des évidences...parce que moi tu sais bien que j'y connais rien!

Elgueusard · Invité

Euh Dreamweaver est pas un freeware à ma connaissance, mais ya une démo sur telecharger.com si vous voulez. Sinon je pense que vous êtes assez grand pour vous le trouver facilement Clin d'oeil

Bon je viens de faire la manip automatique sur Dreamweaver, je vous met le code. Ya un bon javascript de folie au début qu'il m'a l'air sympathique Sourire

(ya rien à toucher dedans, juste à recopier je pense) et sinon ya des arguments dans la balise body, puis l'insertion de l'image à proprement dit. A noter : mes images sont "a.jpg" et "b.jpg", et mes chemins sont absolus dans mon DD ici (donc c:/etc..). Le nom de l'image a pas grde importance (le "image 1") à mon avis, et le texte alt apparait qd on reste sur l'image (donc qd la 2ème est affichée).
A noter aussi que l'on peut mettre un lien (ici "test.com" qd on clic sur l'image)

iGREKKESS · Posté le: Ven Fév 20, 2004 3:32 pm Sujet du message:

Hum, ça fait pas mal de code java pour peu au final tout de même (perso je préfère éviter au max le java)...

gio

je pensais que c'était assez clair, je vais te filer un exemple de code...

Si ta page est à la racine de ton site (giobd) et les images dans un dossier "images" (giobd/images/), voici ce que ça donne :

Xav_ · Inscrit le: 08 Fév 2004 Messages: 16

ouhla un rollover c'est hyper simple tout du moins avec dreamweaver mx, pas besion de se prendre la tete avec le html :p

Il faut aller sur l'icone image puis rollover image et remplir les case approprié ! Sinon pour dreamweaver 4 il fallait appuyer sur shift et w si mes souvenir sont bons, apres une nouvelle fenetre de config apparaissait et suffisait de choisir l image de mettre swap image et de choisir la seconde image, ou un truc du genre ^^

je pourrais vous donnez plus dinformation si vous le souhaitez

iGREKKESS · Posté le: Ven Fév 20, 2004 5:35 pm Sujet du message:

Si vous connaissiez bien l'HTML et FrontPage Express, vous sauriez qu'il n'y a rien de compliqué là, c'est on ne peut plus simple (en code HTML et à mettre en place)...

Vous croyez que c'est simple avec Dreamweaver car c'est simplifié dans la saisie, mais vlà derrière tout le code inutile qu'il sort...

Et puis le mien, y passe partout Cool

Code :

gio · Posté le: Ven Fév 20, 2004 11:20 pm Sujet du message:

J'ai réussi, voilà ce que ca donne:

http://membres.lycos.fr/giobd/menu/test.htm

mais normalement le lien ca devait pas être la page ou l'on va quand on clique sur l'image? (en tout cas c'est ca que j'aurait voulu sinon je vois pas ce qu'il fout là)

Voilà le code:

iGREKKESS · Posté le: Sam Fév 21, 2004 4:25 pm Sujet du message:

Voilà qui fonctionne...

Maintenant comme je l'ai dit plus haut, dans FrontPage Express c'est pas aussi compliqué que devoir rentrer plein de code comme ça, si tu édites la page test que t'as créé avec FPE, ça t'aidera déjà à voir que tout est "transparent" !

En effet, le script java de preload apparaîtra sous forme de petite item jaune avec une marque verte, très facilement copiable d'une page à l'autre et éditable en double-cliquant dessus.
Quant à l'image et au lien, il apparaîtront de façon normale, si ce n'est qu'ils transportent en plus des paramètres qui servent à rendre l'image réactive (name, onmouseover et onmouseout) et qui sont accessibles tout simplement dans l'option "Etendus..." lorsque tu regardes les propriétés de l'image ou du lien !

Tuto rapide
Mes 2 images ont des noms bien distincts (sonic.jpg par défaut, et manuel.gif pour la "réaction")

Tu démarres une nouvelle page ou en prends une déjà existente et tu insers en haut le script de preload,
comme suit :

Ensuite, à l'endoit où tu veux, tu insers l'image visible sans réaction (sonic.jpg dans mon cas) :

Ensuite tu double-cliques sur l'image pour obtenir ses propriétés et tu ajoutes les paramètres étendus :

Name sert donc à définir l'entité ("pouet" dans mon cas) et cette entité est utilisée sur tous les autres éléments
(avec onmouseout et onmouseover) qui sont appelés à faire réagir cette image/entité (faut bien préciser
l'entité sinon ils peuvent pas deviner sur une page avec 50 images laquelle va réagir !),
à commencer par elle-même.

Ensuite on se dit qu'on va aussi ajouter un lien pour faire réagir l'image :

Le lien est créé :

Au final voici ce que ça donne :
http://igrekkessfiles.free.fr/divers/react_img/page.htm

Et le code est exactement du même type que celui donné plus haut :