Fichier index.html :
<html>
<head>
<script src='./messcripts.js'></script>
</head>
<body>
<div>
<img id='image' src='./images/ballonBleu.jpg' width='50' height='50' onMouseOver='modifierTaille(this, 100)' onMouseOut='modifierTaille(this, 50)'/>
</div>
<br/>
<button id='btn1' onClick='changer()'>Changer de ballon</button>
</body>
</html>
Fichier messcripts.js :
var indexImage = 1;
var tabImages = ["./images/ballonBleu.jpg", "./images/ballonVert.jpg", "./images/ballonRouge.jpg"];
function changer()
{
var img1 = document.getElementById('image');
//alert("image : " + img1.src);
if (indexImage < 3)
{
indexImage++;
}
else
{
indexImage = 1;
}
img1.src=tabImages[(indexImage - 1)];
}
function modifierTaille(elt, pourc)
{
//var img1 = document.getElementById('image');
elt.width = pourc;
elt.height = pourc;
}