|
[ Forums >> Webmasters >> Général >> Images associées a la réponce dans un tableau ]
| > Images associées a la réponce dans un tableau |
[ Posté par haruspice ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 26-11-2009 à 14:03 | 5 messages ]
Bonjour a vous tous.
Alors je souhaite créer un tableau associé a une image mais je n'arrive pas trop a le faire, j'aurais donc besoin de vos conseil.
Il s'agit d'un tableau à 3 colonnes et 3 lignes .
par exemple :
_ A B C
1 _ _ _
2 _ _ _
3 _ _ _
Je souhaite que l'on puisse cliquer sur les cases proposées a savoir A1, A2, A3, B1, ....
Et lorsque l'on clique sur A1 par exemple, il y ait a coté du tableau une image qui apparaisse.
J'espere que je suis assez claire. Je vous explique la situation pour que vous puissiez peut etre comprendre un peu mieux.
Je dois faire une page web pour des enfants expliquant ce que ca fait lorsqu'on melange des liquides.
Donc en A, B et C je souhaite avoir Eau Huile et Sirop, et en 1, 2 et 3 je souhaite avoir Alcool, Eau et Huile.
Ainsi si l'enfant clique sur B2, ce qui correspondrait a Eau et Huile, qu'il y ait a coté du tableau, une image d'un verre ou de l'eau et de l'huile on étées mises en commun (j'ai deja les photos.)
J'espere que vous pourrez m'aider.
Je vous remercie
[Message édité par haruspice le 26-11-2009 à 14:04]
|
[ Posté par leris ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 27-11-2009 à 23:21 | 1485 messages ]
|
Salut,
un truc dans ce genre (à modifier-ameliorer)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITRE DE LA PAGE</title>
<style type="text/css">
body
{
background-color: #FFFFBB;
text-align: center;
}
#cont
{
position: relative;
margin-right: auto;
margin-left: auto;
top: 10px;
width: 606px;
height: 300px;
border: 1px solid blue;
font-family: arial;
font-size: 15px;
color: blue;
}
.tot
{
position: relative;
border: 1px solid blue;
float: left;
width:300px;
height: 300px;
}
td
{
border: 1px solid red;
width: 25%;
text-align: center;
cursor: pointer;
}
.mat
{
background-color: skyblue;
color: blue;
font-weight: bold;
}
.left
{
cursor: default;
}
#mima
{
border: 0px;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function show(witch)
{
document.images.first.src = witch+".jpg";
}
</script>
</head>
<body>
<div id="cont">
<table class="tot">
<tr>
<td class="mat" onclick="show('a0');">Matiere</td><td class="left">Eau</td><td class="left">huile</td><td class="left">Sirop</td>
</tr>
<tr>
<td class="left">Alcool</td><td onclick="show('a1');">.</td><td onclick="show('a2');">.</td><td onclick="show('a3');">.</td>
</tr>
<tr>
<td class="left">Eau</td><td onclick="show('b1');">.</td><td onclick="show('b2');">.</td><td onclick="show('b3');">.</td>
</tr>
<tr>
<td class="left">Huile</td><td onclick="show('c1');">.</td><td onclick="show('c2');">.</td><td onclick="show('c3');">.</td>
</tr>
</table>
<img src="a0.jpg" name="first" id="mima"></div>
</body>
</html> |
|
++
L.
________________
__(^[-_-]^)__
-*(_)^*^(_)*-
| [ Posté par haruspice ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 28-11-2009 à 02:45 | 5 messages ]
Coucou léris.
Je voulais te remercier pour ton aide, car c'est exactement ce que je souhaitais faire, et c'est tres bien fait 
Ca marche parfaitement, et ca a le rendement espéré.
Merci beaucoup d'avoir passé du temps sur mon soucis. 
[Message édité par haruspice le 28-11-2009 à 02:52]
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
