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
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Page type</title>
<style>
/* BASE */
body {
background-color:"#FFFFFF";
background-image: url("http://souffle56.fr/Site/SOMMAIRE SOUFFLE 56/Fond - oeuvres 2.png");
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;
}
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;
z-index:1;
}
img.resize {
height:50px; /* Hauteur de base de l'image */
background-color: #FFB66C;
padding:2px; /* Pour faire un cadre */
z-index:1;
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:auto; /* Hauteur de base du bloc texte */
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 charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
<script>
$(function(){
var texteLong = "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";
var texteCourt = "Les dauphins sont des animaux qui sont tres sympatiques. Les dauphins sont des animaux..."
var pourcent = 15; // pourcentage augmentation ou diminution de la taille de l'image
$("img.resize").hover(
function(){
// il est préférable d'agrandir le texte avant l'image
$("#texte").text(texteLong);
$(this).stop().animate({
width: "+=" + pourcent + "%",
height: "+=" + pourcent + "%"
}, 1000);
},
function(){
// il est préférable de diminuer l'image avant le texte
$(this).stop().animate({
width: "-=" + pourcent + "%",
height: "-=" + pourcent + "%"
}, 1000, function(){
$("#texte").text(texteCourt);
});
}
);
});
</script>
</head>
<body>
<div id="container">
<!-- <img id="image" class="resize" src="Image_js_css/m-Dauphins.jpg"/> -->
<img id="image" class="resize" src="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>Heu... Ca, c'est la suite !</span>
</div>
</div>
</body>
</html> |
Partager