Probleme survolement d'images
Toursfcweb -  
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!
Configuration: Windows Vista
Firefox 3.5.2

7 réponses

  1. M@dien
    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!
    0
    1. Toursfcweb Auteur
      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
      0
      1. Toursfcweb Auteur
        up c'est important svp
        0
        1. Toursfcweb Auteur
          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
          0
          2. M@dien
            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...
            0
            1. Toursfcweb Auteur
              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
              0
              1. M@dien
                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.)
                0

                Discussions similaires

                ads by images+
                Fildyr

                5 réponses
                calcule nombre des pixels "noir" dans un image (noir/blanc)
                neji55

                3 réponses
                superposition d'images dans Word
                eva0

                13 réponses
                4 images 1 mot
                Helene

                5 réponses