Webmaster-Shop

Scripts pour images


Un Effet de Zoom sur une Image Au Survol de La Souris

 

Placez votre souris sur l'image ci-dessous pour voir l'effet.
Evitez de mettre une petite image afin de l'agrandir, vous risquez de perdre en qualité. (Il est préférable que la taille maximale soit la taille réelle)


 

 

Insérez le code ci-dessous dans votre page entre les balises d'entête
<head> ..... </head>

<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
var coeff=4;//Coefficient de reduction
var larg=400;//largeur maxi de l'image
var haut=388;//hauteur maxi de l'image
var coeffinit=coeff;
function changer() {
if (document.image.width < larg) {
coeff = coeff-0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
chang=window.setTimeout('changer();',60);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}
function initial() {
if (document.image.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);

initi=window.setTimeout('initial();',60);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
//-->
</script>
Corrigez comme suit

Vous pouvez changer le coefficient de réduction.
Indiquez la taille de votre image agrandie.
Vous pouvez changer la vitesse de l'effet.

Puis insérez le code ci-dessous à l'endroit de l'image
<div align="center">
<a name="img"></a>
<a href="#img" onMouseOut="initial()" onMouseOver="changer()" ><img src="im/imaga.gif" border="0" name="image"></a></div>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>
Corrigez comme suit

chemin/nom_image.(gif,jpg,...)
Vous pouvez insérer un lien en cliquant sur l'image