Changement d'image au passage de la souris
piloupinette29
-
Utilisateur anonyme -
Utilisateur anonyme -
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
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
A voir également:
- Changement d'image au passage de la souris
- Changer de dns - Guide
- Quelle touche pour débloquer la souris ? - Guide
- Passage qwerty azerty - Guide
- Image iso - Guide
- Changement d'heure - Guide
15 réponses
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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://www.leranchsandiego.com/
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
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://www.leranchsandiego.com/
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
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)
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
NB : je mets un "#" dans le href, juste pour l'exemple... toi tu y mets bien sur l'adresse du lien
<!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
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
si javascript n'est pas activé sur le navigateur du visiteur, alors ça ne marche pas
en css ça marche tout le temps