Sujet Précédent Sujet Suivant

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
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!

7 réponses

Réponse 1 / 7
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
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
Réponse 2 / 7
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
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
Réponse 3 / 7
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
up c'est important svp
0
Réponse 4 / 7
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
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
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
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
Réponse 6 / 7
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
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
Réponse 7 / 7
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
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

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
voir ses images enregistrés
bastUltra -
bastUltra -

2 réponses
ou sont enregistrées les images
RAKAMA -
mathejea -

4 réponses
Photoshop / Visualisation des pixels
Anthony -
Anthony -

2 réponses