[Need Help] Lien Image et evenement javascrip
komalex
-
komalex -
komalex -
Bonjour tout le monde :)
Voilà je veux faire un petit menu ou les images s'agrandissent quand on met le curseur dessus. (L'image est d'abord rétrécit au chargement de la page pour éviter la pixelisation au moment de l'agrandissement)
Voici mon script : d'abord les fonctions :
var coefficient_reduction = 2;
var largeur_max = 250;
var hauteur_max = 46;
function reduire_onload (image)
{
document.image.width = Math.round(largeur_max/coefficient_reduction);
document.image.height = Math.round(hauteur_max/coefficient_reduction);
}
function agrandir ()
{
coeff =coefficient_reduction;
if (document.image.width > largeur_max) //dès que la largeur de l'image devient supérieur a la taille qu"on veut, on stope la fonction
{
coeff=coeff -0.2;
document.image.width = document.image.width/coeff;
document.image.height = document.image.height/coeff;
chang = setTimeOut( 'agrandir();', 60);
}
else
{
clearTimeOut(chang);
}
}
Dans la balise body l'événement onload :
<body onLoad="reduire_onload(document.getElementsByClassName('lien_menu'));" >
et enfin le lien en question :
<a href="index.html" onMouseOver="agrandir();"> <img src="accessoires.jpg" alt="Accessoires" class="lien_menu" /></a>
Seulement voilà ya rien qui marche et je n'vois pas pourquoi... Quelqu'un pourrait-il m'aider ?
Voilà je veux faire un petit menu ou les images s'agrandissent quand on met le curseur dessus. (L'image est d'abord rétrécit au chargement de la page pour éviter la pixelisation au moment de l'agrandissement)
Voici mon script : d'abord les fonctions :
var coefficient_reduction = 2;
var largeur_max = 250;
var hauteur_max = 46;
function reduire_onload (image)
{
document.image.width = Math.round(largeur_max/coefficient_reduction);
document.image.height = Math.round(hauteur_max/coefficient_reduction);
}
function agrandir ()
{
coeff =coefficient_reduction;
if (document.image.width > largeur_max) //dès que la largeur de l'image devient supérieur a la taille qu"on veut, on stope la fonction
{
coeff=coeff -0.2;
document.image.width = document.image.width/coeff;
document.image.height = document.image.height/coeff;
chang = setTimeOut( 'agrandir();', 60);
}
else
{
clearTimeOut(chang);
}
}
Dans la balise body l'événement onload :
<body onLoad="reduire_onload(document.getElementsByClassName('lien_menu'));" >
et enfin le lien en question :
<a href="index.html" onMouseOver="agrandir();"> <img src="accessoires.jpg" alt="Accessoires" class="lien_menu" /></a>
Seulement voilà ya rien qui marche et je n'vois pas pourquoi... Quelqu'un pourrait-il m'aider ?
A voir également:
- [Need Help] Lien Image et evenement javascrip
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Verificateur de lien - Guide
- Image iso - Guide
- Cliquez sur ce lien. en n'utilisant que le clavier, quel mot obtenez-vous ? ✓ - Forum souris / Touchpad
1 réponse
Bonsoir Komalex,
Tout d'abord j'utilise la fonction javascript getElementsByClass créée par Dustin Diaz parce que getElementsByClassName est pas super bien gérée par certains navigateurs (ie6 par exemple).
Dans reduire_onload() je sélectionne toutes les images de la classe 'lien_menu' et je le mets à la taille donnée (si tu as des images de taille différente, l'idéal c'est de les réduire de manière à garder la même échelle, ce qui n'est pas fait ici).
Ensuite, au survol d'une image, je la dimensionne automatiquement à la bonne taille (il faut que je passe l'image en question en paramètre à la fonction).
Pas besoin de timer buggé, mais ici on n'a pas d'animation pour le redimensionnement, ça se fait directement.
Si tu as des questions ou des envies d'améliorer tout ça, n'hésite pas.
Cordialement,
Le javascript :
var coefficient_reduction = 2;
var largeur_max = 250;
var hauteur_max = 46;
function reduire_onload() {
var imgs = getElementsByClass('lien_menu', null, null);
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
img.width = Math.round(largeur_max/coefficient_reduction);
img.height = Math.round(hauteur_max/coefficient_reduction);
}
}
function getElementsByClass(searchClass, node, tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function agrandir(img) {
var coeff = coefficient_reduction;
if (img.width < largeur_max) {
img.width = img.width * coeff;
img.height = img.height * coeff;
}
}
Et le html:
<body onload="reduire_onload();">
<a href="index.html"><img src="img1.jpg" class="lien_menu" onMouseOver="agrandir(this);"/></a>
<br/>
<a href="index.html"><img src="img2.jpg" class="lien_menu" onMouseOver="agrandir(this);"/></a>
</body>
Tout d'abord j'utilise la fonction javascript getElementsByClass créée par Dustin Diaz parce que getElementsByClassName est pas super bien gérée par certains navigateurs (ie6 par exemple).
Dans reduire_onload() je sélectionne toutes les images de la classe 'lien_menu' et je le mets à la taille donnée (si tu as des images de taille différente, l'idéal c'est de les réduire de manière à garder la même échelle, ce qui n'est pas fait ici).
Ensuite, au survol d'une image, je la dimensionne automatiquement à la bonne taille (il faut que je passe l'image en question en paramètre à la fonction).
Pas besoin de timer buggé, mais ici on n'a pas d'animation pour le redimensionnement, ça se fait directement.
Si tu as des questions ou des envies d'améliorer tout ça, n'hésite pas.
Cordialement,
pour l'instant j'ai essayé ton code ça marche et c'est gentil de ta part.
Je l'ai repris et essayé de faire l'animation, avec ce code :
function agrandir(img)
{
var coeff = coefficient_reduction;
if (img.width < largeur_max)
{
coeff = coeff-0.2;
img.width = Math.round(img.width*coeff);
img.height = Math.round(img.height*coeff);
chang=window.setTimeout('agrandir(img);',1000);//vitesse de l'effet
}
else
{
window.clearTimeout(chang);
}
}
L'agrandissement se fait toujours, mais je n'ai pas d'animation je ne comprends pas pourquoi... j'ai essayé pas mal de vitesse d'effet pour voir si c'était ça mais bon... l'image s'agrandit d'un seul coup directement ! :)