Sélection et affichage image [Résolu]

apt · 15/05/2011, 19h19

Bonjour à tous,

Dans mon code suivant j'aimerais afficher une image au chargement de la page, puis traiter la sélection/désélection du premier titre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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" xml:lang="fr" lang="fr"> 
<head> 
	<title>CSS Hover</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="description" lang="fr" content="CSS-jQuery Jover" /> 
	<style type="text/css" media="screen"> 
 
* {
	font-family : Verdana, Arial;
}
 
.articles {
	font-size : 13px;
	position : relative;
	border : 1px solid #e0e0e0;
	width : 352px;
	height : 126px;
	margin : auto;
	padding : 1px;
}
 
.articles ul{
	width:190px;
	height:128px;
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	margin : 0 ;
	visibility: visible;
}
.articles li {
	/*position : relative;*/
	margin: 0;
	cursor : pointer;
}
.articles li a {
  text-decoration : none;
  color : #ebfff3;  
  font-size : 13px;  
  background-color : #7385a3;
  /*border : 1px solid #7385a3;*/
  border-right: #fff 1px solid;
  border-bottom: #fff 1px solid; 	
  display : block;
  padding : 2px;
  height : 37px;
  line-height : 10px;
}
.articles li a:hover{
	background-color: #99a6bd;
 
}  	
.articles .nimg {
	position:absolute;
	left:190px;
	top:0; right:0;
	background-color : #fff;
	padding : 1px;
}
.articles .imag {
    height: 126px;
    width: 162px;
	position:absolute;
	left:192px;
	top:0; right:0;
	background-color : #fff;
	padding : 1px;
}
.articles li img {
  display : none;
 
}
 
.articles li:hover img {
    display: block;
    z-index: 100;
	left: 190px;
    position: absolute;
    top:0; right:0;
}
.articles .where{
  position : absolute;
  color : #e0e0e0;
  background-color : #fff;
  border : 1px solid #e0e0e0;
  padding:1px;
}
.articles li:hover div {
  position : absolute;
  display : block;
}
.articles li a.selected {
	background-color: #bec6d5;
	border-right: #fff 1px solid;
	border-bottom: #fff 1px solid;
}
 
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div class="articles">
  <ul>
    <li><img class="imag" src="facebook.jpeg"><a class="selected" href="#">Facebook déclare ouvertement la guerre à Google</a></li>
    <li><img class="imag" src="numericable.jpeg"><a href="#">Numericable lance une offre mobile illimitée à 24,90 euros</a></li>
    <li><img class="imag" src="google.jpeg"><a href="#">Les ordinateurs portables Chromebooks de Google arriveront le 15 juin</a></li>
  </ul>
</div>
<br /><br />
<div class="articles">
  <ul>
    <li><img class="imag" src="facebook.jpeg"><a class="selected" href="#">Facebook déclare ouvertement la guerre à Google</a></li>
    <li><img class="imag" src="numericable.jpeg"><a href="#">Numericable lance une offre mobile illimitée à 24,90 euros</a></li>
    <li><img class="imag" src="google.jpeg"><a href="#">Les ordinateurs portables Chromebooks de Google arriveront le 15 juin</a></li>
  </ul>
</div>
 
<script charset="utf-8" src="jquery-1.6.min.js"></script>
	<script type="text/javascript"> 
        $(function(){
            $(".articles").children("li").mouseenter(function(){
                var objParentArticles = $(this).closest(".articles");
                objParentArticles.find("a.selected").removeClass("selected");
 
                $(this).next("img").css("display:block");
                $(this).next("a").addClass("selected");
            });
        });
	</script> 
 
</body>
</html>

Merci d'avance.

apt · 16/05/2011, 12h55

Une nouvelle tentative avec jquery

il ne me reste que le traitement du survol de la souris sur les li (sélectionné/désélectioné) dans la div avec la classe (.articles).

Quand on détecte un survol sur la liste ul :
1. si l'élément survolé est le premier dans ul => il reste sélectionné
2. si c'est un autre élément à part le premier =>
  1. On enlève la sélection du premier li
  2. On affecte la classe sélection au nouveau élément li sélectionné
Quand on détecte l'absence du survol sur la liste ul :
1. On enlève la sélection de l'élément li actif
2. On affecte la sélection au premier élément li

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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" xml:lang="fr" lang="fr"> 
<head> 
	<title>CSS Hover</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="description" lang="fr" content="CSS-jQuery Hover" /> 
	<style type="text/css" media="screen"> 
 
* {
	font-family : Verdana, Arial;
}
.articles {
	font-size : 13px;
	position : relative;
	border : 1px solid #e0e0e0;
	width : 352px;
	height : 126px;
	margin : auto;
	padding : 1px;
}
 
.articles ul{
	width:190px;
	height:128px;
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	margin : 0 ;
	visibility: visible;
}
.articles li {
	margin: 0;
	cursor : pointer;
}
.articles li a {
  text-decoration : none;
  color : #ebfff3;  
  font-size : 13px;  
  background-color : #7385a3;
  border-right: #fff 1px solid;
  border-bottom: #fff 1px solid; 	
  display : block;
  padding : 2px;
  height : 37px;
  line-height : 12px;
}
.articles li a:hover{
	background-color: #99a6bd;
 
}  	
.articles .nimg {
	position:absolute;
	left:190px;
	top:0; right:0;
	background-color : #fff;
	padding : 1px;
}
.articles .imag {
    height: 126px;
    width: 162px;
	position:absolute;
	left:192px;
	top:0; right:0;
	background-color : #fff;
	padding : 1px;
}
.articles li img {
  display : none;
 
}
.articles li:hover img , 
.articles li:first-child img {  
    display: block;
   	left: 190px;
    position: absolute;
    top:0; right:0;
}
.articles li.selected a{
	background-color: #bec6d5;
	border-right: #fff 1px solid;
	border-bottom: #fff 1px solid;
}
 
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div class="articles">
  <ul>
    <li class="selected"><img class="imag" src="facebook.jpeg"><a href="#">Facebook déclare ouvertement la guerre à Google</a></li>
    <li><img class="imag" src="numericable.jpeg"><a href="#">Numericable lance une offre mobile illimitée à 24,90 euros</a></li>
    <li><img class="imag" src="google.jpeg"><a href="#">Les ordinateurs portables Chromebooks de Google arriveront le 15 juin</a></li>
  </ul>
</div>
<br /><br />
<div class="articles">
  <ul>
    <li class="selected"><img class="imag" src="facebook.jpeg"><a href="#">Facebook déclare ouvertement la guerre à Google</a></li>
    <li><img class="imag" src="numericable.jpeg"><a href="#">Numericable lance une offre mobile illimitée à 24,90 euros</a></li>
    <li><img class="imag" src="google.jpeg"><a href="#">Les ordinateurs portables Chromebooks de Google arriveront le 15 juin</a></li>
  </ul>
</div>
 
<script charset="utf-8" src="jquery-1.6.min.js"></script>
	<script type="text/javascript"> 
        $(function(){
            ///
			$(".articles").children("ul").mouseenter(function(){
                var objParentArticles = $(this).closest(".articles");
 
                objParentArticles.find("ul:first-child li").removeClass("selected");
 
                $(this).("li").mouseenter().addClass("selected");
            }).mouseleave(function(){
                var objParentArticles = $(this).closest(".articles");
            	objParentArticles.find("li").removeClass("selected");
				$(this).("ul:first-child li").addClass("selected");
 
            });
 
        });
 
 
	</script> 
 
 
</body>
</html>

danielhagnoul · 16/05/2011, 23h20

Bonsoir

Il n'était pas nécessaire d'ouvrir une nouvelle discussion !

Un exemple minimaliste en HTML5. Vous pouvez reprendre l'idée de l'attribut data-image pour votre code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		.conteneur {border-collapse:separate; border-spacing:6px; }
		.ligne {display:table-row; }
		article {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted grey; }
		article:nth-of-type(1) {width:200px; height:200px; }
		article:nth-of-type(2) {width:200px; height:200px; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<section class="ligne">
			<article class="nouvelles">
				<p data-image="http://majallati.comli.com/test/div3hover/news1.jpg">
					<a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a>
				</p>
				<p data-image="http://majallati.comli.com/test/div3hover/news2.jpg">
					<a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis suivent</a>
				</p>
				<p data-image="http://majallati.comli.com/test/div3hover/news3.jpg">
					<a href="#">Johnny Hallyday hospitalisé à Los Angeles</a>
				</p>
			</article>
			<article>
				<img src="http://majallati.comli.com/test/div3hover/news1.jpg"/>
			</article>
		</section>
		<section class="ligne">
			<article class="nouvelles">
				<p data-image="http://majallati.comli.com/test/div3hover/news1.jpg">
					<a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a>
				</p>
				<p data-image="http://majallati.comli.com/test/div3hover/news2.jpg">
					<a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis suivent</a>
				</p>
				<p data-image="http://majallati.comli.com/test/div3hover/news3.jpg">
					<a href="#">Johnny Hallyday hospitalisé à Los Angeles</a>
				</p>
			</article>
			<article>
				<img class="imag"src="http://majallati.comli.com/test/div3hover/news1.jpg" alt="Figure 1" />
			</article>
		</section>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO format long US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-05-16T23:20:00.000+02:00" pubdate>2011-05-16</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script>
		$(function(){
			$(".nouvelles").children("p").mouseenter(function(){
				var articleParent = $(this).parents(".nouvelles");
 
				articleParent.next().children("img").attr("src", $(this).data("image"));
            });
		});
	</script>
</body>  
</html>

apt · 17/05/2011, 16h59

Bonjour,

J'ai fait quelques essais.

Ça à marche pour une demi solution

Quand on survol la liste ul (sur le titre 2 ou 3), le premier titre perd la sélection et rien ne sa passe lorsque le survol quitte la liste ul :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(".articles").children("ul").mouseenter(function(){
 
				var articleParent = $(this).parents(".articles");
 
				articleParent.find("ul li:first-child").removeClass("selected");
 
				articleParent.next().children("li").addclass("selected");
            });

Mais quand on ajoute le reste du code qui devrais traiter l'absence du survol sur la liste, rien me marche du tout:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(".articles").children("ul").mouseenter(function(){
 
				var articleParent = $(this).parents(".articles");
 
				articleParent.find("ul li:first-child").removeClass("selected");
 
				articleParent.next().children("li").addclass("selected");
            }).mouseleave(function(){
 
					articleParent.find("ul li").removeClass("selected");
					articleParent.find("ul li:first-child").addClass("selected");
 
					alert("ok");
			)};

apt · 18/05/2011, 10h55

Bonjour,

Maintenant ça marche, mais pour les deux liste en même temps :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(function() {
			$("ul").mouseenter(function(){
				$(".articles ul li:first-child").removeClass("selected");
 
			}).mouseleave(function(){	
				$(".articles ul li:first-child").addClass("selected");
			});
		});

Comment faire dire à jquery qu'il ne doit appliquer cela que sur la liste survolée ?

Merci.

danielhagnoul · 18/05/2011, 22h33

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(function() {
    $("ul").mouseenter(function(){
        //$(".articles ul li:first-child").removeClass("selected");
        $("li:first-child", this).removeClass("selected");
 
    }).mouseleave(function(){	
        //$(".articles ul li:first-child").addClass("selected");
        $("li:first-child", this).addClass("selected");
    });
});

apt · 19/05/2011, 16h57

Merci Daniel ça marche bien.

Mais pourquoi avoir ajouté cette 'this' ?

danielhagnoul · 19/05/2011, 21h12

Bonsoir

Voir $() : http://api.jquery.com/jQuery/

$( selector, [ context ] ).

J'utilise la possibilité de préciser le contexte (this, qui représente un élément du DOM) dans lequel il doit chercher le sélecteur ("li:first-child").

apt · 19/05/2011, 23h25

Merci daniel de ton précieuse aide.

19/05/2011, 21h12	#8
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Voir $() : http://api.jquery.com/jQuery/ $( selector, [ context ] ). J'utilise la possibilité de préciser le contexte (this, qui représente un élément du DOM) dans lequel il doit chercher le sélecteur ("li:first-child"). __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

19/05/2011, 16h57	#7
apt Membre du Club Inscription : mai 2002 Messages : 526 Détails du profil Informations forums : Inscription : mai 2002 Messages : 526 Points : 42 Points : 42	Merci Daniel ça marche bien. Mais pourquoi avoir ajouté cette 'this' ?
	00

19/05/2011, 23h25	#9
apt Membre du Club Inscription : mai 2002 Messages : 526 Détails du profil Informations forums : Inscription : mai 2002 Messages : 526 Points : 42 Points : 42	Merci daniel de ton précieuse aide.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email