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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Expansion</title>
<style type="text/css">
/* BASE */
body {
background-color:"#FFFFFF";
background-image: url("http://souffle56.fr/Site/SOMMAIRE SOUFFLE 56/Fond - oeuvres 2.png");
color:#000000;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
p {
padding:6px;
}
ul,ol,dl {
list-style:none;
padding-left:6px;
padding-top:6px;
}
li {
padding-bottom:6px;
}
/* TEST */
#container {
position:absolute;
left:100px;
top:70px;
width:400px;
height:200px;
border:1px solid #EFBA3F;
}
.resize {
height:50px; /* Hauteur de base de l'image */
background-color: #FFB66C;
padding:2px; /* Pour faire un cadre */
display: block; /* Pour que le texte de droite épouse les variations de l'image */
float: left;
margin-left:2px;
margin-top:2px;
margin-bottom:2px;
margin-right:5px; /* Ecart avec le texte */
}
#texte {
height:56px;
width:390px;
padding-left:5px; /* Pour que le texte ne colle pas au bord droit */
border:1px solid #FF7837;
background-color: #FFD9B3;
}
#texte2 {
/* clear : pour annuler l'effet d'un éventuel "float: left" ou "float: right" dans un bloc précédent */
clear: both;
width:390px;
padding-left:5px;
border:1px solid #000000;
color: #500C23;
}
</style>
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>
<!-- Appel fonctions jQuery + javascript permettant le redimensionnement dynamique de l'image (et quelques réajustements) -->
<script type="text/javascript">
/* Function: Enlarge an image when it is hovered over
Author: Justin Farmer
*/
$(document).ready(function(){
//get the width
var oWidth = $('img#image').width();
//get the height
var oHeight = $('img#image').height();
var tHeight = $('div#texte').height();
//we want to preserve the proportions of the image, so we get the multipler (you could always multipy the multiplier to get a large image
var mpx = (oWidth / oHeight*1.5);
function texte_agrandi(){ /* Appelée après quand l'image a fini son agrandissement */
/* Remplacement du texte (précisé par son id) par un texte plus grand */
$("#texte").css("height", "auto");
$('#texte').text('Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques');
};
function texte_raccourci(){ /* Appelée quand l'image est revenue à sa taille de base */
/* Egalisation de la hauteur du bloc texte avec la hauteur de l'image */
var gauche=document.getElementById('image')
var droite=document.getElementById('texte')
droite.style.height=gauche.offsetHeight+2+"px";
/* Remplacement du grand texte (précisé par son id) par un texte plus petit */
$('#texte').text('Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux... ')
};
//run a function when the image is hovered over
$('img.resize')
//mouseOver effect
.hover(function(){
//take the currently targeted img
$(this)
//stops the event from happening in case of an abrupt mouseOut
.stop()
//custom animation effect to change the width and height of the img
.animate({
//take the original width/height X multipler and tag on the 'px'
width: (oWidth * mpx) +'px',
height: (oHeight * mpx) +'px'
//space the animation out over 1 sec (deals in milliseconds)
},1000, function(){texte_agrandi();});
},
//this is just like a mouseOut effect to take the img back to the original size
function(){
$(this)
//stops the event from happening in case of an abrupt mouseOut
.stop()
.animate({
width: oWidth +'px',
height: oHeight +'px'
},1000, function(){texte_raccourci();});
});
/* Egalisation de la hauteur du bloc texte avec la hauteur de l'image */
function egalisation(){
var gauche=document.getElementById('image');
var droite=document.getElementById('texte');
droite.style.height=gauche.offsetHeight+2+"px";
};
});
</script>
</head>
<body bgcolor="#FFFFFF" background="http://souffle56.fr/Site/SOMMAIRE SOUFFLE 56/Fond - oeuvres 2.png">
<div id="container">
<img id="image" onclick="egalisation();" class="resize" src="Image_js_css/m-Dauphins.jpg"/>
<div id="texte">
<span>Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux... </span>
</div>
<div id="texte2">
<span>Texte suivant !</span>
</div>
</div>
</body>
</html> |
Animation et rendu différent sur IE7 -> ?
Je sais que c'est dû à une gestion "différente" de la partie CSS, et en l'occurence du 'float: left" mais néanmoins, n'y aurait-il pas quelque moyen de "contourner" aisément ce problème, pour faire en sorte que sous IE7, le texte apparaisse bien à droite de l'image également ?
Répondre avec citation
Partager