Redimensionner les images dans un tableau

**cyke37** · 13/10/2005, 16h55

Bonjour,

J'ai une page HTML qui contient une table de 40 lignes et 40 colonnes
dans chacune des cases se trouve une petite image et le tout forme la carte d'un jeux.

Mon probleme est le suivant :
je voudrais, en cliquant sur une des images, l'agrandir (doubler sa hauteur et sa largeur ) et en double-cliquant dessus lui faire reprendre sa taille normale.

j'ai deja chercher comment faire et on m'a proposé d'ajouter dans chacune de mes cases une fonction onclick et ondblclick qui modifient les propriété heigth et width... tres simple mais cela m'oblige a associer un "name" a chacune de ces cases et y copier coller les fonctions
avec un tableau de 1600 cases je vous laisse imaginer la taille du code (et le temps que je vais mettre a modifier tout ca !!!) ...

Auriez vous quelque chose de plus élegant et/ou plus economique ???

Merci Beaucoup.

**Mr N.** · 13/10/2005, 17h03

Code :

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

onclick="this.style.width = 50px;" ondblclick="this.style.width = 5px;"

?

**Pymm** · 13/10/2005, 17h05

Je crois malheureusement que la réponse est non

**Mr N.** · 13/10/2005, 17h05

Sinon il me semble que tu peux capturer les evenements souris, connaitre l'éléments source du click et travailler dessus. va faire un tour sur :
http://www.quirksmode.org/js/events_mouse.html

**SpaceFrog** · 13/10/2005, 17h39

attribue la fonction dynamiquement à toutes tes images ...
ou à toutes les images dont l'id commence par 'image'

j'ai commencé un truc ...

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
24
25
26
<script type='text/javascript'>
function doublesize(monimage){alert()
    monimage.style.width=monimage.style.offsetWidth*2
    monimage.style.height=monimage.style.offsetHeight*2
}
 
function onclicks(){
var TabImages=document.images
 
for(i=0;i<TabImages.length;i++){	
alert(TabImages[i].parentNode.tagName);
      TabImages[i].parentNode.onclick="function(){alert()}";
      TabImages[i].parentNode.setAttribute('onclick','alert()');
     }
     }
     </script>
</head>
 
<body onload="onclicks()">
<table>
	<tr>
		<td>
			<img src="image.gif" width="162" height="109" />
		</td>
	</tr>
</table>

le but étant d'attribuer la fonction doublesize() au parentNode

**cyke37** · 13/10/2005, 17h46

La reponse de Mr N pourrais etre interressante, car si elle n'est pas forcemetn economique en taille du code un simple search & replace sur toutes mes case devait fonctionner (gain de temps enorme et c'est deja bien)

cependant, je viens de coller le code suivant et ca ne marche pas, il ne se passe rien ...
vous pouez me dire ce qui ne va pas ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<table>
<tr>
       <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><img src="map_fichiers/722.gif" 
     onclick="this.style.width = 50px;"  
     ondblclick="this.style.width = 5px;"  ></td>
 
...
 
</table>
</tr>

**Mr N.** · 13/10/2005, 17h51

Code :

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

onclick="this.style.width = '50px';"

**SpaceFrog** · 13/10/2005, 18h01

curieux ça fonctionne sur le doubleclick mais pas sur le click ?

Code :

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

ondblclick="this.style.width=parseInt(this.offsetWidth)*2;this.style.height=parseInt(this.offsetHeight)*2;"

**cyke37** · 13/10/2005, 18h04

c'est beaucoup mieux ...

SpaceFrog, ta premiere solution semble vraiment ressembler a ce que je cherche a faire, mais je suis trop debutant pour comprendre ce que tu me dit ...

j'ai tester ton script et, comment dire ... je clique sur les alerte ...

**Mr N.** · 13/10/2005, 18h13

Envoyé par SpaceFrog

curieux ça fonctionne sur le doubleclick mais pas sur le click ?

Code :

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

ondblclick="this.style.width=parseInt(this.offsetWidth)*2;this.style.height=parseInt(this.offsetHeight)*2;"

Code :

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

ondblclick="this.style.width=(parseInt(this.offsetWidth)*2)+'px';"

Pas besoin du height c'est proportionnel. (en tout cas sous Fx)

**SpaceFrog** · 13/10/2005, 19h19

pas proportionnel sous IE ... donc il faut les deux

Redimensionner les images dans un tableau

JavaScript

Discussions similaires

Partager

Partager