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
|
<html>
<head>
<title>Petit Essai</title>
</head>
<body>
<p id="mesLiens"> <!-- Un paragraphe doit etre créé et porter l'id 'mesLiens' -->
<a href="#">lien n°1</a><br/>
<a href="#">lien n°2</a><br/>
<a href="#">lien n°3</a><br/>
</p>
<script>
var img_lien = new Array();
monBody = document.getElementsByTagName('BODY').item(0);
img_lien[0] = "image1.jpg";
img_lien[1] = "image2.jpg";
img_lien[2] = "image3.jpg";
//initialisation des liens
var p = document.getElementById('mesLiens');
var liens = p.getElementsByTagName('a');
for(i=0;i<liens.length;i++) {
liens[i].id = 'lien'+i;
liens[i].onmousemove = gereImage;
liens[i].onmouseout = gereImage;
//création des div et placement dans le document
maDiv = document.createElement('DIV');
maDiv.id = 'div'+i;
maDiv.style.display = 'none';
monImg = document.createElement('IMG');
monImg.src = "image"+(i+1)+".jpg";
maDiv.appendChild(monImg);
monBody.appendChild(maDiv);
}
function gereImage(e) {
if(document.all) {
e = window.event;
var source = e.srcElement;
}
else {
var source = e.target;
}
current_div = document.getElementById('div'+source.id.charAt(4));
if(e.type == 'mouseout')
current_div.style.display = 'none';
else {
current_div.style.display = 'block';
current_div.style.position = 'absolute';
current_div.style.top = e.clientY+1;
current_div.style.left = e.clientX+1;
}
}
</script>
</body>
</html> |
Partager