swap + blend d'images

Version imprimable

28/05/2010, 16h00
SpaceFrog

swap + blend d'images
J'ai deux images superposées

dans un div
Code:

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:

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
28/05/2010, 16h36
sayari.dev

Bonjour,

Essayes ce bout de code

Code:

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

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

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

Code:

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');
									});

28/05/2010, 16h53
sayari.dev

Voilà,

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

par exemple

Code:

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

Bonsoir.

Question très intéressante, merci SPaceFrog !

Voir le commentaire.

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

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

29/05/2010, 09h18
SpaceFrog

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

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 :mouarf:

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:

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>

Bon voici un contournement qui me convient temporairement...

Code:

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