redimensionner une image

**xokami35x** · 05/11/2008, 18h12

Bonjour à tous,
je me suis récemment lancé dans le javascript.
je voudrai faire un systeme de miniature, avec du javascript: en gros quand la souris passe sur l'image, celle ci reprend sa taille réelle. Sauf que ma fonction qui lui redonne sa taille réelle ne marche pas, voici les codes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function retaille() {
var nombre_titre = document.getElementsByTagName('img').length;
for(var i = 0; i < nombre_titre; i++) 
{
document.getElementsByTagName('img')[i].style.height = '100px';
}
}
 
function taille(id) {
var img = document.getElementById(id);
img.style.height = '';
img.style.height = img.offsetHeight;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img src="images/grandport.jpg" alt="port" onmouseover="taille(1);"/>
<h3 class="textgauche">Concarneau et sa ville close</h3>
<img src="images/eglise.png" alt="clocher"/>

La fonction retaille est appelée dans l'atribut onLoad de la balise body. Elle marche tres bien^^

Donc quelqu'un sait il pourquoi ma fonction taille() ne marche pas???

Merci d'avance

**Bovino** · 05/11/2008, 19h26

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/grandport.jpg" alt="port" onmouseover="taille(this);"/>

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function taille(img) {
img.style.height = '';
}

devrait suffire.

**xokami35x** · 05/11/2008, 19h37

oki merci beaucoup ca marche maintenant, et en plus j'ai appris quelque chose^^.

**bigboomshakala** · 05/11/2008, 19h49

salut,
tu peux le gérer uniquement par CSS

je viens de constater que ça marche sous IE6 (sur les autres navigateurs ça marche, mais sur IE c'était pas sûr)

par contre pour ça il faut utiliser la propriété filter. je ne sais pas pourquoi, mais je suis tombé dessus complètement par hasard après moults essais infructueux pour hacker le comportement de IE

. c'est un complet mystère pour moi, un gros coup de bol...

le pire c'est que ça marche pour tout (a priori... je n'ai testé que les images et les input). c'est magique !!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
    <head>
        <style>
a img
{
    width:100px;
    border:0px;
}
 
a:hover img
{
    filter:alpha(opacity=100);
    width:auto;
    border:0px;
}            
        </style>
    </head>
    <body>
        <a href="javascript:void 0;">
            <img src="cheveux.jpg" />
        </a>
    </body>
</html>

redimensionner une image

JavaScript

Discussions similaires

Partager

Partager