Un Effet de Zoom sur Plusieurs Images Au Survol de La Souris
Merci à Sikko
voir aussi Un Effet de Zoom sur une Image Au Survol de La Souris
Placez votre souris sur les images 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)
Si vous avez beaucoup d'images je vous propose
Afficher
une Image dans une Popup en Neutralisant le Clic Droit
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=200;//largeur maxi de l'image
var haut=194;//hauteur maxi de l'image
var coeffinit=coeff;
function changer(nom_de_limage) {
if (document.images[nom_de_limage].width < larg)
{
coeff = coeff-0.2;
document.images[nom_de_limage].width
= Math.round(larg/coeff);
document.images[nom_de_limage].height
= Math.round(haut/coeff);
chang=window.setTimeout('changer("'+document.images[nom_de_limage].name+'");',60);//vitesse
de l'effet
}
else {window.clearTimeout(chang);}
}
function initial(nom_de_limage) {
if (document.images[nom_de_limage].width > larg/coeffinit)
{
window.clearTimeout(chang);
coeff = coeff+0.2;
document.images[nom_de_limage].width
= Math.round(larg/coeff);
document.images[nom_de_limage].height
= Math.round(haut/coeff);
initi=window.setTimeout('initial("'+document.images[nom_de_limage].name+'");',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 des Images
<p align="center">
<a href="#" onMouseOut="initial('image1')" onMouseOver="changer('image1')" ><img
src="im/imaga.gif" name="image1" border="0"></a>
</p>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
//-->
</script>
<p align="center">
<a href="#" onMouseOut="initial('image2')" onMouseOver="changer('image2')" ><img
src="im/imagb.gif" name="image2" border="0"></a>
</p>
<script language="JavaScript">
<!--
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
//-->
</script>
<p align="center">
<a href="#" onMouseOut="initial('image3')" onMouseOver="changer('image3')" ><img
src="im/imagc.gif" name="image3" border="0"></a>
</p>
<script language="JavaScript">
<!--
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
//-->
</script> |
|
Corrigez
comme suit
|
| chemin/nom_image.(gif,jpg,...)
nom de l'image
Lignes à écrire pour insérer une image:
<p align="center">
<a href="#" onMouseOut="initial('image1')" onMouseOver="changer('image1')" ><img
src="im/imaga.gif" name="image1" border="0"></a>
</p>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
//-->
</script>
Les images peuvent être placées séparément.
En fait pour chaque image il faut écrire le code
suivant en modifiant le nom de l'image.
Vous pouvez le placer n'importe oû dans votre page.
<a href="#" onMouseOut="initial('image1')" onMouseOver="changer('image1')" ><img
src="im/imaga.gif" name="image1" border="0"></a>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
//-->
</script>
|
| Pour des
images horizontales, mettez les dans un tableau |
<table width="100%" border="0">
<tr align="center">
<td>
<a href="#" onMouseOut="initial('image1')" onMouseOver="changer('image1')" ><img
src="im/imaga.gif" name="image1" border="0"></a>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
//-->
</script>
</td><td>
<
a href="#" onMouseOut="initial('image2')" onMouseOver="changer('image2')" ><img
src="im/imagc.gif" name="image2" border="0"></a>
<
script language="JavaScript">
<!--
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
//-->
</script>
</td><td>
<
a href="#" onMouseOut="initial('image3')" onMouseOver="changer('image3')" ><img
src="im/imagb.gif" name="image3" border="0"></a>
<
script language="JavaScript">
<!--
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
//-->
</script>
</td>
</tr>
</table> |
Si vous avez beaucoup d'images je vous propose
Afficher une Image dans une Popup en Neutralisant le Clic Droit
Ce site vous a plu ?
Vous avez trouvé le script que vous cherchiez ?
Faites en profiter vos visiteurs : insérez un lien sur
votre site
