Redimensionner les images dans un tableau

Version imprimable

13/10/2005, 16h55
cyke37

Redimensionner les images dans un tableau

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.
13/10/2005, 17h03
Mr N.

Code:

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

?
13/10/2005, 17h05
Pymm

Je crois malheureusement que la réponse est non
13/10/2005, 17h05
Mr N.

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

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

j'ai commencé un truc ...

Code:

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

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:

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

13/10/2005, 17h51
Mr N.

Code:

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

:oops:
13/10/2005, 18h01
SpaceFrog

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

Code:

ondblclick="this.style.width=parseInt(this.offsetWidth)*2;this.style.height=parseInt(this.offsetHeight)*2;"
13/10/2005, 18h04
cyke37

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 ...
13/10/2005, 18h13
Mr N.

Citation:

Envoyé par SpaceFrog

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

Code:

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

Code:

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

Pas besoin du height c'est proportionnel. (en tout cas sous Fx)
13/10/2005, 19h19
SpaceFrog

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