Effet survol d'un lien avec affichage d'une image

Version imprimable

09/12/2009, 02h25
apt

Effet survol d'un lien avec affichage d'une image

Bonjour à tous,

J'aimerais avoir le code qui produit l'affichage d'une image lors d'un survol de la souris sur un lien.

J'ai cet exemple :

http://lombre.net/tests/tab-verticales/

voici une image du rendu voulu :

http://www.mediafire.com/imageview.p...ey=mimbi3dqmz2

Merci d'avance.

:P
09/12/2009, 08h22
SpaceFrog

suffit de modifier le background-image du lien sur son hover et css...
pas besoin de js pour ça

Bonjour,

Essaie ce bout de code, bien entendu "Image1" et "Image2" sont à placer dans le même répertoire que ta page html
Code:

1 2 3 4 5 6 7 8 <html> <head> </head> <body> <a href="#" onMouseOver="document.image.src='Image2.jpg';" onmouseout="document.image.src='Image1.jpg';";>Survolez ce lien</a> <IMG name=image width=150 height=100 src="Image2.jpg"> </body> </html>
Je pense avoir répondu à ta question.

A+
Philippe

09/12/2009, 15h48
SpaceFrog
:roll:
deux lignes en css et ça marche mêms si js n'est pas activé ...
Code:

1 2 a {background-image:url(path/image1.png);} a:hover {background-image:url(path/image2.png);}

Salut,

Voila un code modifié et testé pour un seul bloque. Il marche bien.

A present, je voulais essayer d'avoir deux bloques l'un à coté de l'autre, mais je n'y arrive pas :

Code:

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
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Tab verticales</title>
	<meta name="description" lang="fr" content="Essais de tabs verticales accessibles avec jquery" />
	<style type="text/css" media="screen">
		body {
			font-size: 90%;
			font-family: arial, helvetica, sans-serif;
		}
		h1 {text-align: center; color: #f00;}
		h3 {
		text-align: left;
		color: #f00;
		font-size: 12px;
	}
	#articles {
		position : relative;
		border: 1px solid #000;
		width: 352px; height : 123px;
	}
		#articles h3, #articles h3 a {color: #900; }
		/*.hasJS #articles {min-height:200px;}*/
		.hasJS #articles h3 {
			cursor: pointer; 
			background-color: #999; 
			margin: 0; 
			padding: 5px; 
			border-bottom:  #fff 1px solid; 
			border-right:  #fff 1px solid;
			width:190px;
			height:30px;
		}
		.hasJS #articles h3.selected {
		background-color: #E5E5E5;
		border-right: #fff 1px solid;
	}
		.hasJS #articles div div.montre {position: absolute; top: 0; right: 0; left: 196px; }
		.hasJS #articles div div {position: absolute; top: -5000px; left: -5000px; padding-left: 5px;}
		.imag {	width:150px; height:122px;}
		a:link, a:visited, a:active{text-decoration: none;color: #333333;}
	</style>
	<script type="text/javascript">
		document.documentElement.className+=" hasJS";
	</script>
</head>
 
<body>
	<h1>Tab verticales</h1>
	<h2>Une série de h3 en tab horizontales</h2>
	<div id="articles">
		<div class="article">
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3>
			<div class="montre">
				<img class="imag"src="news1.jpg" alt="Figure 1" />
			</div>
		</div>
		<div class="article">
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis 
			suivent</a></h3>
			<div>
				<img class="imag" src="news2.jpg" alt="Figure 2" />
		</div>
		</div>
		<div class="article">
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
			<div>
				<img class="imag" src="news3.jpg" alt="Figure 3" />
			</div>
		</div>
	</div>
    <div id="articles2">
		<div class="article">
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3>
			<div class="montre">
				<img class="imag"src="news1.jpg" alt="Figure 1" />
			</div>
		</div>
		<div class="article">
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis 
			suivent</a></h3>
			<div>
				<img class="imag" src="news2.jpg" alt="Figure 2" />
			</div>
		</div>
        <div></div>
		<div class="article">
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
			<div>
				<img class="imag" src="news3.jpg" alt="Figure 3" />
			</div>
		</div>
	</div>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
			$(document).ready( function () {
				//tabindex pour la navigation au clavier
				$("#articles h3").attr("tabindex", "0");
				$("#articles h3").focus (
					function () {
						//trucs à faire pendant le focus sur les h3
						$("#articles div.montre").removeClass("montre");
						$("#articles h3.selected").removeClass("selected");
						$(this).next("div").addClass("montre");
						$(this).addClass("selected");
					}
				);
				// gestion des hover sur les h3 :
				$("div.article h3").hover( 
					function () {
						//trucs à faire pendant le over sur les h3
						$("#articles div.montre").removeClass("montre");
						$("#articles h3.selected").removeClass("selected");
						$(this).next("div").addClass("montre");
						$(this).addClass("selected");
					},
					function () {
						//out : trucs à faire éventuellement quand le pointeur sort du h3
					}
				);
			});
	</script>
</body>
</html>

Mais il y'a un problème de "id" de la div conteneur.

Code:

<div id="articles">

Il faut donner a chaque div son identificateur propre, mais comment sera le code jQuery qui traitera chaque div a part ?

:roll:

04/05/2011, 12h35
apt
En plus du traitement du numéros du div par jQuery :

Code:

<div id="articlesX">

J'ai essayé de supprimer ce code :
Code:

1 2 3 <script type="text/javascript"> document.documentElement.className+=" hasJS"; </script>
Mais le tout est bousillé ...

Y a t-il une solution pour remplacer ce coden parce que je le trouve trop lourd à comprendre :aie:

lien de visualisation :

http://majallati.comli.com/test/div3hover/d3h4.php

Merci.

Un petit changement du code.

Maintenant les deux div principales (DIV1 et DIV2) apparaissent et le premier titre est sélectionné avec son image news1.jpg affichée.

http://majallati.comli.com/test/div3hover/d3h6.php

S'il y a survol de la souris sur l'un des deux div principales, l'autre perdra le focus avec disparition de l'image qui était affichée.

Comment faire pour avoir le premier titre sélectionné des deux div principales et le traitement du survol se fera juste sur la DIV que j'ai en train des survoler ses titres sans que le premier titre de l'autre div disparaitra avec son image ?

Merci.

Code:

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
136
137
138
139
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Tab verticales</title>
	<meta name="description" lang="fr" content="Essais de tabs verticales accessibles avec jquery" />
	<style type="text/css" media="screen">
		body {
			font-size: 90%;
			font-family: arial, helvetica, sans-serif;
		}
		h1 {text-align: center; color: #f00;}
		h3 {
		text-align: left;
		color: #f00;
		font-size: 12px;
	}
	.articles {
		position : relative;
		border: 1px solid #000;
		width: 352px; height : 123px;
	}
		.articles h3, .articles h3 a {color: #900; }
		/*.hasJS .articles {min-height:200px;}*/
		.hasJS .articles h3 {
			cursor: pointer;
			background-color: #999;
			margin: 0;
			padding: 5px;
			border-bottom:  #fff 1px solid;
			border-right:  #fff 1px solid;
			width:190px;
			height:30px;
		}
		.hasJS .articles h3.selected {
		background-color: #E5E5E5;
		border-right: #fff 1px solid;
	}
		.hasJS .articles div div.montre {position: absolute; top: 0; right: 0; left: 196px; }
		.hasJS .articles div div {position: absolute; top: -5000px; left: -5000px; padding-left: 5px;}
		.imag {	width:150px; height:122px;}
		a:link, a:visited, a:active{text-decoration: none;color: #333333;}
	</style>
	<script type="text/javascript">
		document.documentElement.className+=" hasJS";
	</script>
</head>
 
<body>
	<h1>Tab verticales</h1>
	<h2>Une série de h3 en tab horizontales</h2>
	<div class= "articles" id="articles_1">
		<div class="article">
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3>
			<div class="montre">
				<img class="imag"src="news1.jpg" alt="Figure 1" />
			</div>
		</div>
		<div class="article">
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3>
			<div>
				<img class="imag" src="news2.jpg" alt="Figure 2" />
		</div>
		</div>
		<div class="article">
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
			<div>
				<img class="imag" src="news3.jpg" alt="Figure 3" />
			</div>
		</div>
	</div>
	<br /><br />
	<div class= "articles" id="articles_2">
		<div class="article">
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3>
			<div class="montre">
				<img class="imag"src="news1.jpg" alt="Figure 1" />
			</div>
		</div>
		<div class="article">
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3>
			<div>
				<img class="imag" src="news2.jpg" alt="Figure 2" />
		</div>
		</div>
		<div class="article">
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
			<div>
				<img class="imag" src="news3.jpg" alt="Figure 3" />
			</div>
		</div>
	</div>
	<script type="text/javascript" src="jquery-1.5.2.js"></script>
	<script type="text/javascript">
			$(document).ready( function () {
				//tabindex pour la navigation au clavier
				$(".articles h3").attr("tabindex", "0");
				$(".articles h3").focus (
					function () {
						//trucs à faire pendant le focus sur les h3
						$(".articles div.montre").removeClass("montre");
						$(".articles h3.selected").removeClass("selected");
						$(this).next("div").addClass("montre");
						$(this).addClass("selected");
					}
				);
				//
				//
				$('.articles').hover(function(){   
					var num = $(this).attr('id').substr(9); // fin de l'id à partir du 10e caractère   
					if ( /^[0-9]{1,4}$/.test(num) ) { // on continue uniquement si on a récupéré un nombre     
						var $articles = $('articles_' + num); // on récupère le DIV correspondant au AREA survolé 
						// on fait ce qu'on veut avec 
						$articles.focus();
 
					// gestion des hover sur les h3 :
						$("div.article h3").hover(
							function () {
								//trucs à faire pendant le over sur les h3
								$(".articles div.montre").removeClass("montre");
								$(".articles h3.selected").removeClass("selected");
								$(this).next("div").addClass("montre");
								$(this).addClass("selected");
							},
							function () {
								//out : trucs à faire éventuellement quand le pointeur sort du h3
							}
						);
					} 
				}
				);
				//
 
			});
	</script>
</body>
</html>

J'ai changé en cela, mais toujours pas le résultat voulu :scarymov:

Code:

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
<script type="text/javascript">
            $(document).ready( function () {
                //tabindex pour la navigation au clavier
                //$(".articles h3").attr("tabindex", "0");
 
                //
                $('.articles').hover(function(){
                    var num = $(this).attr('id').substr(9); // fin de l'id à partir du 10e caractère
                    //alert(num);
					if ( /^[0-9]{1,4}$/.test(num) ) { // on continue uniquement si on a récupéré un nombre
                                               var $articles = $('#articles_' + num); // on récupère le DIV correspondant au AREA survolé
                                               // on fait ce qu'on veut avec
                                               //$articles.focus();
											   //---**
											   $('#articles_' + num + '  h3').focus (
													function () {
													   //trucs à faire pendant le focus sur les h3
													   $(".articles div.montre").removeClass("montre");
													   $(".articles h3.selected").removeClass("selected");
													   $(this).next("div").addClass("montre");
													   $(this).addClass("selected");
													}
												);
                               //
											   //---**
 
                                       // gestion des hover sur les h3 :
                                               $("div.article h3").hover(
                                                       function () {
                                                               //trucs à faire pendant le over sur les h3
                                                               $(".articles div.montre").removeClass("montre");
                                                               $(".articles h3.selected").removeClass("selected");
                                                               $(this).next("div").addClass("montre");
                                                               $(this).addClass("selected");
                                                       },
                                                       function () {
                                                               //out : trucs à faire éventuellement quand le pointeur sort du
h3
                                                       }
                                               );
                                       }
                               }
                               );
                               //
 
                       });
       </script>

:arf: