Animation OnMouseOver sur un lien-image (JS)
komalex
-
rfonviei Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
rfonviei Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
Salut tout le monde :) Z'allez bien ? :p
J'ai un petit problème <barre>dans ma plantation</barre> dans mon menu :
J'essaye de faire un effet de zoom sur les lien-images lorsque le curseur va sur l'image (OnMouseOver)
et de dèzoom lorsqu'il en sort (OnMouseOut).
Seulement voilà, ça ne marche pas...voici mon script et les problèmes liés avec :
Code Javascript :
<script type="text/javascript">
<!--
var coefficient_reduction = 2;
var largeur_max = 250;
var hauteur_max = 46;
function agrandir(img) {
if (img.width < largeur_max) {
coefficient_reduction -= 0.2;
img.width = Math.round(img.width*coefficient_reduction);
img.height = Math.round(img.height*coefficient_reduction);
chang=window.setTimeout('agrandir(img);',1000);//vitesse de l'effet
}
else {
window.clearTimeout(chang);
}
}
-->
</script>
Code HTML
<a href="index.html" > <img src="accessoires.jpg" alt="Accessoires" class="lien_menu" onMouseOver="agrandir(this);" /></a>
L'image est au préalable dèzoomer au chargement de la page pour éviter la pixelisation lors du zoom, mais ce code ne nous importe pas ici.
Le problème est que l'image s'agrandit bien, ça ya pas de soucis... mais il n'y a aucun effet de zoom progressif de l'image, elle s'agrandit d'un coup sec..(j'ai déjà essayé avec plusieurs vitesse dans le setTimeOut) Je ne comprends malheureusement pas pourquoi, donc si quelqu'un a une idée... je suis preneur ! Merci :)
PS : Je n'ai pas encore fais le OnMouseOut..il est similaire au OnMouseOver mais celui ci ne marche pas donc déjà je résous ce problème :p
J'ai un petit problème <barre>dans ma plantation</barre> dans mon menu :
J'essaye de faire un effet de zoom sur les lien-images lorsque le curseur va sur l'image (OnMouseOver)
et de dèzoom lorsqu'il en sort (OnMouseOut).
Seulement voilà, ça ne marche pas...voici mon script et les problèmes liés avec :
Code Javascript :
<script type="text/javascript">
<!--
var coefficient_reduction = 2;
var largeur_max = 250;
var hauteur_max = 46;
function agrandir(img) {
if (img.width < largeur_max) {
coefficient_reduction -= 0.2;
img.width = Math.round(img.width*coefficient_reduction);
img.height = Math.round(img.height*coefficient_reduction);
chang=window.setTimeout('agrandir(img);',1000);//vitesse de l'effet
}
else {
window.clearTimeout(chang);
}
}
-->
</script>
Code HTML
<a href="index.html" > <img src="accessoires.jpg" alt="Accessoires" class="lien_menu" onMouseOver="agrandir(this);" /></a>
L'image est au préalable dèzoomer au chargement de la page pour éviter la pixelisation lors du zoom, mais ce code ne nous importe pas ici.
Le problème est que l'image s'agrandit bien, ça ya pas de soucis... mais il n'y a aucun effet de zoom progressif de l'image, elle s'agrandit d'un coup sec..(j'ai déjà essayé avec plusieurs vitesse dans le setTimeOut) Je ne comprends malheureusement pas pourquoi, donc si quelqu'un a une idée... je suis preneur ! Merci :)
PS : Je n'ai pas encore fais le OnMouseOut..il est similaire au OnMouseOver mais celui ci ne marche pas donc déjà je résous ce problème :p
A voir également:
- Animation OnMouseOver sur un lien-image (JS)
- Créer un lien pour partager des photos - Guide
- Lien url - Guide
- Verificateur de lien - Guide
- Image iso - Guide
- Lien copié - Forum Mobile
1 réponse
Bonjour,
essaye ce script :
<script language="JavaScript">
<!--
var coeff=4;//Coefficient de reduction
var larg=250;//largeur maxi de l'image
var haut=46;//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>
<script language="JavaScript">
<!--
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>
code Html:
<a href="index.html" onMouseOut="initial()" onMouseOver="changer()" ><img src="im/imaga.gif" border="0" name="image" class="lien_menu" ></a>
essaye ce script :
<script language="JavaScript">
<!--
var coeff=4;//Coefficient de reduction
var larg=250;//largeur maxi de l'image
var haut=46;//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>
<script language="JavaScript">
<!--
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>
code Html:
<a href="index.html" onMouseOut="initial()" onMouseOver="changer()" ><img src="im/imaga.gif" border="0" name="image" class="lien_menu" ></a>
Je viens juste de me mettre au java, alors peux être n'est pas saisie tous les astuce du langage.
Ce qui est étrange, depuis la " <!-- " a la ligne " //--> ", toute l'écriture est marron claire, est-ce normal ?
Merci d'avance pour tes réponces.
Cordialement.
Moi je ne comprend absolument rien à tout ce charabia !
Mais j'aimerai bien que vous me veniez en aide :)
J'ai un site internet.
Voilà le code HTML de mon image importé :
<img class="alignnone size-medium wp-image-202 aligncenter" src="http://licence-eea.fr/wp-content/uploads/2016/08/SYLLABUS-2016-2017-1-300x169.jpg" alt="SYLLABUS 2016 - 2017" width="300" height="169" />
Pouvez vous me pondre tout le travail en me donnant le code que je dois mettre pour avoir cet effet zoom ?
Merci par avance :)