Probleme survolement d'images
Fermé
Toursfcweb
Messages postés
5
Date d'inscription
lundi 10 août 2009
Statut
Membre
Dernière intervention
12 août 2009
-
10 août 2009 à 23:22
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 - 12 août 2009 à 14:01
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 - 12 août 2009 à 14:01
A voir également:
- Probleme survolement d'images
- Images gratuites - Guide
- Google images - Guide
- Superposez les images à télécharger avec le logiciel de votre choix. quel animal apparaît ? ✓ - Forum Photo numérique
- Mes images ✓ - Forum Windows
- Extraire les images d'un pdf - Guide
7 réponses
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
11 août 2009 à 17:34
11 août 2009 à 17:34
Bonjour,
Je vais essayer de t'aider même si j'aime pas le foot =P (gros effort pour cliquer sur le site de l'OM pour voir ce dont tu parlais)
Je te propose ce petit script que je viens de pondre pour l'occasion:
Inspire-t-en pour faire ce que tu veux, et surtout, essaye de le comprendre, il est très simple ;)
(à part le css qui est je pense la partie la plus complexe)
Attention toutefois, il faut que les images à afficher aient la taille du div.
Bon courage!
Je vais essayer de t'aider même si j'aime pas le foot =P (gros effort pour cliquer sur le site de l'OM pour voir ce dont tu parlais)
Je te propose ce petit script que je viens de pondre pour l'occasion:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> div#cadrePhoto { margin:50px; width:300px; height:200px; border:2px solid #444; background-color:#888} #cadrePhoto ul { margin:130px 0px 0px 0px; padding:0px; list-style:none;} #cadrePhoto li { float:left; height:40px; margin:10px; padding:2px; border:1px solid #FFF; background-color:#AAA;} #cadrePhoto li img { margin:0px; padding:0px; height:40px;} </style> <script type="text/JavaScript"> function changePhoto(photo) { document.getElementById('cadrePhoto').style.background = 'url(' + photo + '.jpg)'; } </script> </head> <body> <!-- Le div qui contient tout --> <div id="cadrePhoto"> <ul> <li onmouseover="changePhoto('a');"><img src="a.jpg" alt="a" /></li> <li onmouseover="changePhoto('b');"><img src="b.jpg" alt="b" /></li> <li onmouseover="changePhoto('c');"><img src="c.jpg" alt="c" /></li> </ul> </div> </body> </html>
Inspire-t-en pour faire ce que tu veux, et surtout, essaye de le comprendre, il est très simple ;)
(à part le css qui est je pense la partie la plus complexe)
Attention toutefois, il faut que les images à afficher aient la taille du div.
Bon courage!
Toursfcweb
Messages postés
5
Date d'inscription
lundi 10 août 2009
Statut
Membre
Dernière intervention
12 août 2009
11 août 2009 à 20:45
11 août 2009 à 20:45
Merci d'avoir porter attention à mon sujet mais je n'arrive pas a déchiffrer ton code et d'insérer les images au bonnes endroits pourait tu stp m'indiquer ou placer mes images et si il fo rajouter du code . en attendent j'ésseille de résoudre sa tout seul (pas gagner :p)
merci
merci
Toursfcweb
Messages postés
5
Date d'inscription
lundi 10 août 2009
Statut
Membre
Dernière intervention
12 août 2009
11 août 2009 à 23:49
11 août 2009 à 23:49
up c'est important svp
Toursfcweb
Messages postés
5
Date d'inscription
lundi 10 août 2009
Statut
Membre
Dernière intervention
12 août 2009
11 août 2009 à 23:54
11 août 2009 à 23:54
je pense avoir compris le probleme de ton code M@dien c que g placé toutes mes images parfaitement mais le problemes c que quand je passe la souris devant les trois images elles affichent la mm images alors quelle doit afficher chacune une image différentes . merci de bien vouloir m'aider
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
12 août 2009 à 10:00
12 août 2009 à 10:00
La seule chose à changer est la liste des images.
J'ai modifié un peu le javascript.
J'ai mis en souligné et en gras ce qu'il faut changer pour adapter.
Il faut changer l'image mais aussi l'appel de la fonction javascript.
Tu peux mettre plus de photos si tu veux.
J'espère que c'est plus clair...
J'ai modifié un peu le javascript.
J'ai mis en souligné et en gras ce qu'il faut changer pour adapter.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> div#cadrePhoto { margin:50px; width:300px; height:200px; border:2px solid #444; background-color:#888} #cadrePhoto ul { margin:130px 0px 0px 0px; padding:0px; list-style:none;} #cadrePhoto li { float:left; height:40px; margin:10px; padding:2px; border:1px solid #FFF; background-color:#AAA;} #cadrePhoto li img { margin:0px; padding:0px; height:40px;} </style> <script type="text/JavaScript"> function changePhoto(image) { document.getElementById('cadrePhoto').style.background = 'url(' + image+ ')'; } </script> </head> <body> <!-- Le div qui contient tout --> <div id="cadrePhoto"> <ul> <li onmouseover="changePhoto('images/image1.jpg');"><img src="images/image1.jpg" alt="Description de l'image 1" /></li> <li onmouseover="changePhoto('images/image2.jpg');"><img src="images/image2.jpg" alt="Description de l'image 2" /></li> <li onmouseover="changePhoto('images/image3.jpg');"><img src="images/image3.jpg" alt="Description de l'image 3" /></li> <li onmouseover="changePhoto('images/image4.jpg');"><img src="images/image4.jpg" alt="Description de l'image 4" /></li> ... </ul> </div> </body> </html>
Il faut changer l'image mais aussi l'appel de la fonction javascript.
Tu peux mettre plus de photos si tu veux.
J'espère que c'est plus clair...
Toursfcweb
Messages postés
5
Date d'inscription
lundi 10 août 2009
Statut
Membre
Dernière intervention
12 août 2009
12 août 2009 à 13:42
12 août 2009 à 13:42
Merci, sa fonctionne très bien mais le problèmes c que sa fonctionne sur une page vide ou il y a que sa mais j'ai essayé de l'intégrer dans mon début de site et le CSS ne fonctionne pas
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
12 août 2009 à 14:01
12 août 2009 à 14:01
et bien essaye d'intégrer ton début de site à ma page?
bizarre que le css ne fonctionne pas. attention à ne pas oublier le <div id="cadrePhoto">, c'est le plus important pour le css
(quoi que je suis en train de me dire qu'en faisant différemment le div serait inutile.)
bizarre que le css ne fonctionne pas. attention à ne pas oublier le <div id="cadrePhoto">, c'est le plus important pour le css
(quoi que je suis en train de me dire qu'en faisant différemment le div serait inutile.)