Selection d'une image

**bougy** · 25/01/2006, 17h56

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.

**Spack** · 25/01/2006, 18h19

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

Code :

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

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...

**bougy** · 25/01/2006, 18h41

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

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
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>

**Cpas2latarte** · 25/01/2006, 23h17

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

une img simple ne conviendrait pas ?

ex

Code :

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

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

la fonction changeStyleImage :

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
 
<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>

**bougy** · 30/01/2006, 12h26

Merci beaucoup pour ton aide.

Selection d'une image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager