Probleme survolement d'images
Toursfcweb
Messages postés
5
Statut
Membre
-
M@dien Messages postés 439 Date d'inscription Statut Membre Dernière intervention -
M@dien Messages postés 439 Date d'inscription Statut Membre Dernière intervention -
Bonjour, je suis entrain de créer un site portant sur un club de foot et j'ai un procbleme c'est que je n'arrive pas a trouver et a faire un survolement d'images qui changerai une image mais pas celle survoler (une autre) a peu près tous les sites de foot utilisent ce procéder pour présenter leur news comme celui de l'olymique de marseille:
https://www.om.fr/fr ou http://psg.fr, https://www.ol.fr/fr-FR/prehome
merci de bien vouloir m'aider!
https://www.om.fr/fr ou http://psg.fr, https://www.ol.fr/fr-FR/prehome
merci de bien vouloir m'aider!
Configuration: Windows Vista Firefox 3.5.2
7 réponses
-
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:<!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! -
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 -
-
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 -
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.
<!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... -
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
-
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.)
