swap + blend d'images

**SpaceFrog** · 28/05/2010, 16h00

J'ai deux images superposées

dans un div

Code :

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

1
2
3
4
<div id="OI"   >
			<img src="image1.png"  class="logou" id="goi"/>
			<img src="image2.png" class="logoo" id="foi"/>
	</div>

elles ne sont pas sur le même z-index celle en arrière plan est display block, l'autre none

L'effet recherché est sur le hover faire un fadein de celle qui est au dessus

Code :

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

1
2
	$('#OI').stop().mouseover( function(){ $('#foi').fadeIn('slow')})
	$('#OI').stop().mouseout ( function(){ $('#foi').fadeOut('slow')});

le souci est que quand celle de premier plan apparait il declenche la perte du hover de l'image d'arrière plan et du coup j'ai un effet fadein fade out a repetition

**sayari.dev** · 28/05/2010, 16h36

Bonjour,

Essayes ce bout de code

Code :

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

$('#OI').hover( function(){ $('#goi').fadeOut('slow'); $('#foi').fadeIn('slow')}, function(){ $('#foi').fadeOut('slow'); $('#goi').fadeIn('slow')});

**SpaceFrog** · 28/05/2010, 16h39

Non ça fait pareil...
enfin voire pire au niveau du css ...

pour le moment ceci à l'air de vouloir fonctionner à peu près

Code :

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

1
2
3
4
5
6
$('#goi').mouseover(function(){	$('#foi').stop().fadeIn('slow');
										$('#descOI').stop().fadeIn('slow');
									});
		$('#foi').mouseout(function(){	$(this).stop().fadeOut('slow');
										$('#descOI').stop().fadeOut('slow');
									});

**sayari.dev** · 28/05/2010, 16h53

Voilà,

tu dois alors leur attribuer une même position avec le css pour avoir l'effet désiré

par exemple

Code css :

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

#goi, #foi{ position: absolute; left: 20px }

**danielhagnoul** · 29/05/2010, 01h11

Bonsoir.

Question très intéressante, merci SPaceFrog !

Voir le commentaire.

[EDIT 2010-05-29 08:28]
Ajout de l'exemple goi3.

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
136
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			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;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
			opacity:0.5;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* TEST */
		#foi {
			position:absolute;
			top:48px;
			left:48px;
			display:none;
			z-index:2;
		}
		#goi {
			position:absolute;
			top:24px;
			left:24px;
			display:block;
			z-index:1;
		}
		#foi2 {
			position:absolute;
			top:48px;
			left:480px;
			display:none;
			z-index:2;
		}
		#goi2 {
			position:absolute;
			top:24px;
			left:440px;
			display:block;
			z-index:1;
		}
		#goi3 {
			position:absolute;
			top:240px;
			left:24px;
			display:block;
			z-index:1;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
			$("#OI").hover(
				function(){
					$("#foi").fadeIn("slow");
				},
				function(){
					$("#foi").fadeOut("slow");
				}
			);
 
			function mouseenterHandler(){
				$("#goi2").unbind("mouseenter").fadeOut("slow");
				$("#foi2").fadeIn("slow");
			}
 
			$("#foi2").mouseleave(function(){
				$("#foi2").fadeOut("slow");
				$("#goi2").fadeIn("slow", function(){
					$(this).bind("mouseenter", mouseenterHandler);
				});
			});
 
			$("#goi2").bind("mouseenter", mouseenterHandler);
 
			/*
			 * On doit considérer que si #goi2 est fadeOut(), il n'existe plus, on ne peut donc plus le quitter !
			 * Sinon problème de va-et-vient logique, car les événements se bousculent, voire l'exemple de goi3
			 */
 
			$("#goi3").hover(
				function(){
					$(this).fadeOut("slow");
				},
				function(){
					$(this).fadeIn("slow");
				}
			);
		});
	</script>
</head>
<body>
    <div id="conteneur">
 
		<div id="OI" alt="goi/foi" title="goi/foi">
			<img id="goi" src="../images/imageTest.png"/>
			<img id="foi" src="../images/jQuery-alpha-trans.png"/>
		</div>
 
		<div id="OI2" alt="goi2/foi2" title="goi2/foi2">
			<img id="goi2" src="../images/imageTest.png"/>
			<img id="foi2" src="../images/jQuery-alpha-trans.png"/>
		</div>
 
		<img id="goi3" src="../images/imageTest.png" alt="goi3" title="goi3"/>
 
    </div>
</body>  
</html>

**SpaceFrog** · 29/05/2010, 09h18

Je testerais ça lundi ...
Enfin j'appliquerais ça lundi

Merci Daniel

En y reflechissant entre-temps, n'étant pas au bureau, j'avais envisagé une autre methode qui impliquait de passer par un div qui serait porteur de la première image en background et contentant une balise image dont on ferait le fadeIn fadeOut, je testerais ça lundi

**SpaceFrog** · 31/05/2010, 09h22

mhhhhhhhh...
bon j'ai simplifié le code html de sorte à n'avoir qu'un div avec un bg image et une image.
Je pensais m'affranchir de l'effet mouseout du div mais non ...
A priori il faut annihiler le mouseout du div lors de l'apparition de l'image, mais le bind ne me parle pas trop

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OUEST isol &amp; ventil</title>
<link rel="stylesheet" type="text/css" href="Styles/main.css" />
<link rel="stylesheet" type="text/css" href="Styles/accueil.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
		$('#OI').hover(function(){	$('#foi').fadeIn('slow');
									$('#descOI').stop().fadeIn('slow'),
									$('#foi').fadeOut('slow');
									$('#descOI').stop().fadeOut('slow');
									});
 
	});									
</script>
</head>
<body>
<div id="center">
	<img id="OIV" src="images/ouestisolventil.png"  />
   	<div id="logos">
		<div id="OI"   >
			<img src="images/ouestisol_m_link.png" class="logoo" id="foi" />
		</div>
		<div id="OV" >
			<img src="images/ouestventil_m_link.png"  class="logoo" id="fov" />
		</div>
	</div>
	<div id="desc">
		<p id="descOI"> Description 1</p>
		<p id="descOV"> Description2</p>
	</div>
</div>	
</body>
</html>

**SpaceFrog** · 31/05/2010, 09h56

Bon voici un contournement qui me convient temporairement...

Code :

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

1
2
3
4
5
6
7
8
       $('#foi').css({"opacity":"0"});
		$("#OI").hover( 
						function() {
										$('#foi').animate({"opacity": "1"}, "slow");
									},
						function() {
										$('#foi').animate({"opacity": "0"}, "slow");
									});

Seul hic, je n'arrive pas à placer le stop pour eviter la pile d'animate...

swap + blend d'images

jQuery

Discussions similaires

Partager

Partager