High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Changement d'image au passage de la souris

Dernière réponse le 2 jui 2009 à 21:22:23 piloupinette29, le 7 mar 2009 à 10:54:48 
 Signaler ce message aux modérateurs

Bonjour,
voilà, je suis en pleine préparation de mon site web et pour le menu, j'aurais voulu créer une sorte d'animation.
J'aimerais savoir si c'est possible avec dreamweaver de mettre une photo dans mon menu et qu'au passage de ma souris sur les différents thèmes, l'image de fond change.
Je voudrais faire une sorte d'image survolée, sauf, que je veux cibler le changement de photos sur un mot précis et j'ai besoins de faire 6 fois ce changement d'image (avec l'option image survolée de dreamweaver, je ne peut mettre que 2 photos et je ne peux pas cibler l'endroit du changement d'image)
J'èspère que ma demande est assez clair et que vous saurez y répondre.
Merci d'avance

Configuration: Windows Vista
Internet Explorer 7.0

Meilleures réponses pour « changement d'image au passage de la souris » dans :
Comment changer mon mot de passe sous WLM/MSN VoirPour changer son mot de passe Windows Live Messenger, il suffit d'utiliser l'interface prévue à cet effet : http://memberservicesnet.passport.net/memberservice.srf?lc=1036 Si vous avez perdu votre mot de passe, merci de vous référer à...
Télécharger Change Forgotten Password Lite VoirQuand on utilise plusieurs mots de passe différents pour chaque application que l’on utilise, notamment les comptes de messagerie, on vient à en oublier quelque un. Change Forgotten Password Lite est un comme son nom l’indique, est un...
Conduite du changement VoirConduite du changement L'environnement évolue dans un environnement évoluant très rapidement, elle doit donc évoluer, innover, pour être en position de compétitivité. Les projets informatiques sont par nature au cœur de l'innovation de...
Posez votre question Répondre

1

jmg78, le 7 mar 2009 à 16:23:27

Oui c est possible avec un peu de javascript apres tu dois l'integrer dans ton source assez difficile pour un novice car dreammachin doit générer des tonnes de code
voir profil (enregistré)

   
Répondre à jmg78

2

dolmenhir, le 7 mar 2009 à 16:31:55

Salut,

tu peux aussi faire sans javascript, juste avec les css
tu crées une class pour le lien sans survol
a:link {
background:url(images/ton-image-off.gif);
}
et une class pour le survol
a:hover {
background:url(images/ton-image-on.gif);
}

c'est aussi simple que ca

à adapter selon tes besoins... les variantes sont nombreuses

   
Répondre à dolmenhir

14

piloupinette29, le 8 mar 2009 à 11:21:54

Bonjour!
Merci pour toutes vos réponses, mais j'ai oublié de préciser que j'ai juste fait un stage de 4 jours avec dreamweaver et "javascript", "css", ça ne me parle pas des masses!
je suis capable de m'y mettre mais il faut vraiment m'expliquer clairement les choses (pas comme si j'étais une pro! lol)
Donc, je reprends, je vous envoie un lien, pour vous montrer exactement ce que je veux faire.
http://loisircheval.free.fr/
Vous entrez dans la page en français et vous regardez le menu. C'est exactement ça que je veux faire (une image et en passant ma souris sur les diffrents thèmes, l'image change)
Je ne sais pas par où commencer, il faut sans doute, que je créer d'abord, toutes mes images avec tous mes thèmes inscrits dedans et après??? là je bug.
Merci d'avance
à bientôt

   
Répondre à piloupinette29

15

jmg78, le 8 mar 2009 à 11:26:39

Y a rien qui bouge dans ton site free voir profil (enregistré)

   
Répondre à jmg78

16

jmg78, le 8 mar 2009 à 11:29:22

Ah si dans la deuxieme page passe me voir voir profil (enregistré)

   
Répondre à jmg78

17

piloupinette29, le 8 mar 2009 à 16:46:23

Re bonjour!!!
Alors tu as vu le menu??? quand tu passes sur accueil l'image change et ainsi de suite pour tous les thèmes... Tu comprends ce que je veux faire? Tu peux m'aider STP???
Merci
à bientôt

   
Répondre à piloupinette29

3

yoann72100, le 7 mar 2009 à 16:40:10

Stop c'est un rollover c bien sa que tu veux faire car dreamweaver te le propose

   
Répondre à yoann72100

4

jmg78, le 7 mar 2009 à 16:50:10

Je t' ai fait ça vite fait http://jeanmichel.gens.free.fr/backgrd.php
regarde le code voir profil (enregistré)

   
Répondre à jmg78

5

dolmenhir, le 7 mar 2009 à 16:52:08

Bon, pour que tu comprenne l'intérêt du css au profit du reste, voici mon exemple en exemple, mais sans image (pour l'exemple) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Roll Over CSS</title>

<style type="text/css">
a:link {
background:#000;
color:#fff;
}

a:hover {
background:#C00;
color:#fff;
} 
}
</style>
</head>
<body style="margin:0;padding:0">
<a href="#">  Lien 1  </a>-<a href="#">  Lien 2  </a>-<a href="#">  Lien 3  </a>
</body></html>

Maintenant tu remplaces
background:#000;
en mettant une image pour la version off
background:url(dossier_image/nom_image_off.gif); /* (ou jpeg ou png) */
et en mettant une image pour la version on
background:url(dossier_image/nom_image_on.gif); /* (ou jpeg ou png) */

C'est tout

Tu peux personnaliser en mettant des images différentes à chaque lien, alors la tu crée une class pour chaque lien (j'utilise encore des couleurs pour l'exemple 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Roll Over CSS</title>

<style type="text/css">
a.lien1:link {
background:#000; /* (ou jpeg ou png) */
color:#fff;
}
a.lien2:link {
background:#006600;
color:#fff;
}
a.lien1:hover {
background:#0000CC;
color:#fff;
}
a.lien2:hover {
background:#C00;
color:#fff;
} 
</style>
</head>
<body style="margin:0;padding:0">
<a href="#" class="lien1">  Lien 1  </a>-<a href="#" class="lien2">  Lien 2  </a>
</body></html>


NB : je mets un "#" dans le href, juste pour l'exemple... toi tu y mets bien sur l'adresse du lien

   
Répondre à dolmenhir

6

dolmenhir, le 7 mar 2009 à 17:16:24
   
Répondre à dolmenhir

7

jmg78, le 7 mar 2009 à 17:24:18

C'est mieux si on peut rester en css total mais si elle veut changer l'image du body ? voir profil (enregistré)

   
Répondre à jmg78

8

dolmenhir, le 7 mar 2009 à 17:43:11

Je crois qu'elle parle de l'image de fond du menu, et non pas de la page

   
Répondre à dolmenhir

9

yoann72100, le 7 mar 2009 à 18:11:03

Si c'est sa que tu veux dit leu moi

UN rollover http://rival-web.com/ccm/

   
Répondre à yoann72100

10

dolmenhir, le 7 mar 2009 à 18:30:53

C'est ça, mais je le répète, c'est mieux en css plutôt qu'en javascript
si javascript n'est pas activé sur le navigateur du visiteur, alors ça ne marche pas
en css ça marche tout le temps

   
Répondre à dolmenhir

11

yoann72100, le 7 mar 2009 à 18:42:29

Lol ba sa marche sous internet explorere 6 alors voila :d

   
Répondre à yoann72100

12

dolmenhir, le 7 mar 2009 à 19:28:29

Alors si ça marche sous ie6... respect ;)

   
Répondre à dolmenhir

13

yoann72100, le 7 mar 2009 à 21:54:56

Bin attend tu crois quoi lol

   
Répondre à yoann72100

18

Pwet Man, le 2 jui 2009 à 18:48:29

Mouarf c'est possible un truc qui marche sous IE 6 ? Oo

   
Répondre à Pwet Man

19

 yoann72100, le 2 jui 2009 à 21:22:23

C'est quoi sa IE6 x) Valide ta version si elle est pas piraté ..... tu auras ie 7 ou 8

   
Répondre à yoann72100
Posez votre question Répondre
Ils ont besoin de votre aide