http://www.monjavascript.net

ACCUEIL
Contact
Rechercher
Insérez dans vos
  favoris

ACCUEIL DES
  VISITEURS

DATE & HEURE
EFFETS DE TEXTE
FENETRES
FORMULAIRES
IMAGES
MENUS
PRATIQUE
POP UP
DIVERS

Cours de javascript
Générer vos Fichiers
  CSS

Générer vos Meta-Tags
Description des Balises
  Meta

Les Codes Couleur
L'objet Math
Lissage De Prêt
Tableau d'Amortissement
un Multi-Moteurs de recherche sur Votre Site
Cryptez votre e-mail
  pour contrer le Spam

Cryptez vos Scripts
Moteurs de recherches
Référencement
Je Crée Mon Site
L'éditeur JavaScript


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

 
 
Mon javascript    17-12-2018