Selection d'une image

Bonjour,

J'ai créé un tableau et dans chaque cellule, j'ai inséré une image avec le nom de cette image.

Ce que je cherche à faire, est que lorsque je clique sur une image, il y ai quelque chose qui me permette de savoir que c'est celle ci qui a été choisit.
Plusieurs idées me viennent (mettre en sur brillance la cellule ou encadrer l'image ou encadrer la cellule) mais je ne sais comment faire.

Merci de m'aider à moins que vous ayez trouver une autre solution.

Si chaque cellule du tableau possède un id...

Code:

onclick="document.getElementById('id').style..."

Tu applique le style que tu veux comme changer la coleur de fond etc...

En fait il faudrait que tu poste ton code pour avoir plus de détails...

voici mon code

Merci pour ton aide.
Excuses moi si ma question te parait simple mais je débute.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
 
<head>
 
<title>Finition</title>
 
 
</head>
 
<body bgcolor="#FFFFFF">
 
 
<SCRIPT LANGUAGE="JavaScript"> 
//
function okButtonClick(id) {
      parent.returnValue=id
//      parent.close();
   }
 
</SCRIPT>
 
 
<p>&nbsp;</p>
 
<FORM METHOD=POST ACTION="">
<p align="center">Finition chant &eacute;pais couleur </p>
<p align="center">&nbsp;</p>
<table cellspacing="2" vspace="0" hspace="0" align="center" height="198" bordercolorlight="#C0C0C0" bordercolordark="#808080">
  <tr><td align="center" valign="top" height="150"><font face="Arial" size="1">
    <INPUT TYPE="image" id="QTY:33010" src="../HtmlWizards/finition/CE19/PA25_Blanc.jpg" onClick="okButtonClick(id)" width="124" height="129" name=" " border="0">
      </font>
      <p><font face="Arial" size="1">PA 25 Blanc</font></p>
    </td><td align="center" valign="top" height="150"><font face="Arial" size="1">&nbsp;</font></td>
    <td align="center" valign="top" height="150"><font face="Arial" size="1">
      <INPUT TYPE="image" id="QTY:33000" src="../HtmlWizards/finition/CE19/PA02_Aulnedore.jpg" onClick="okButtonClick(id)" name=" " width="128" height="128">
      </font>
    <p><font face="Arial" size="1">PA02 Aulne Doré</font></p>    </td><td align="center" valign="top" height="150"><font face="Arial" size="1">&nbsp;</font></td>
      <td align="center" valign="top" height="150"><font face="Arial" size="1">
        <INPUT TYPE="image" id="QTY:33001" src="../HtmlWizards/finition/CE19/PA05_PommierCalvados.jpg" onClick="okButtonClick(id)" name=" " width="128" height="128">
      </font>
      <p><font face="Arial" size="1">&nbsp;</font><font face="Arial" size="1">PA05
    Pommier Calvados</font></p>    </td><td align="center" valign="top" height="150"><font face="Arial" size="1">&nbsp;</font></td>
  </tr>
  <tr>
    <td align="center" valign="top" height="1"><font face="Arial" size="1">
      <INPUT TYPE="image" id="QTY:33002" src="../HtmlWizards/finition/CE19/PA06_Loupe.jpg" onClick="okButtonClick(id)" name=" " width="128" height="128">
      </font>
    <p><font face="Arial" size="1">PA06 Loupe</font></p>    </td><td align="center" valign="top" height="1"><font face="Arial" size="1">&nbsp;</font></td>
      <td align="center" valign="top" height="1"><font face="Arial" size="1">
        <INPUT TYPE="image" id="QTY:33006" src="../HtmlWizards/finition/CE19/PA17_Hetre.jpg" onClick="okButtonClick(id)" name=" " width="128" height="128">
      </font>
    <p><font face="Arial" size="1">PA17 Hêtre</font></p>    </td><td align="center" valign="top" height="1"><font face="Arial" size="1">&nbsp;</font></td>
      <td align="center" valign="top" height="1"><font face="Arial" size="1">
        <INPUT TYPE="image" id="QTY:33007" src="../HtmlWizards/finition/CE19/PA18_Poiriertendre.jpg" onClick="okButtonClick(id)" name=" " width="128" height="128">
      </font>
    <p><font face="Arial" size="1">PA18 Poirier Tendre</font></p>    </td><td align="center" valign="top" height="1"><font face="Arial" size="1">&nbsp;</font></td>
  </tr>
</table>
</FORM>
 
 
<p>&nbsp;</p>
 
 
 
</body>
 
</html>

pourquoi utiliser un input de type image ???
C'est équivalant à un bouton submit

une img simple ne conviendrait pas ?

ex

Code:

1
2
 
<img src="monimage.gif"" border="0" onclik="changeStyleImage(this)">

la fonction changeStyleImage :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script>
var oldImg=null; // l'ancienne image pour annuler le style
 
// la fonction qui change le style
// juste la bordure de l'image pour l'exemple, 
// mais on peut faire ce qu'on veux
function changeStyleImage(img) {
    if(oldImg) {
        oldImg.style.border = "none";
    }
    img.style.border = "solid 1px red";
    oldImg =img;
}
 
</script>

Merci beaucoup pour ton aide.