Javascript : exemples avec le code source

E - Manipulation des images

Changement d'une image au click de la souris

Cliquer ICI pour voir l'image.
Cliquer ICI pour effacer l'image.

Code html (utilisant l'identité des objets)

<html>
<head>
<script language="javascript">
function afficher() {
document.getElementById('image').src='rouge.jpg';
}
function effacer() {
document.getElementById('image').src='blanc.jpg';
}
</script>
</head>
<body>
<table align="center" cellpadding="0">
<td width="100">
<div>Cliquer <a href="javascript:afficher()">ICI</a> pour afficher l'image.</div>
</td>
<td width="100" style="border:black solid 1px">
<img src="blanc.jpg" id="image">
</td>
<td width="100">
<div>Cliquer <a href="javascript:effacer()">ICI</a> pour effacer l'image.</div>
</td>
</table>
</body>
</html>


Code html (utilisant le nom des objets)

<html>
<head>
<script language="javascript">
function afficher() {
document.image.src='rouge.jpg';
}
function effacer() {
document.image.src='blanc.jpg';
}
</script>
</head>
<body>
<table align="center" cellpadding="0">
<td width="100">
<div>Cliquer <a href="javascript:afficher()">ICI</a> pour afficher l'image.</div>
</td>
<td width="100" style="border:black solid 1px">
<img src="blanc.jpg" name="image">
</td>
<td width="100">
<div>Cliquer <a href="javascript:effacer()">LA</a> pour effacer l'image.</div>
</td>
</table>
</body>
</html>
Validé XHTML 1.1    Validé CSS