Faire apparaître une image/popup
Bonsoir,
en fait ce que je souhaite, c'est quand l'utilisateur survole une petite image, une grande apparaît et s'il s'éloigne, elle disparaît : mon problème, c'est que la grande image n'apparaît pas : juste un cadre avec une croix rouge. Voici mon code :
Code:
1
2
3
4
5
6
| <head>...
<script type="text/javascript" src="popup.js"></script>
...
<.head>
...
<a href="#" onmouseover="showFirstPopup()" onmouseout="hidePopup()"><img src="affiche_reduite.jpg" width="400" /></a> |
et popup.js :
Code:
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
| function showFirstPopup() {
// Test pour vérifier que le navigateur connaît les objets Popup
if(!window.createPopup) {
alert("Votre navigateur ne connaît pas les objets Popup...");
return false;
}
// Création du popup
var oPopup = window.createPopup();
var oPopBody = oPopup.document.body;
// Mise en forme
oPopBody.style.backgroundColor = "#9FC1FF";
oPopBody.style.border = "solid darkblue 1px";
oPopBody.style.margin = "0px";
oPopBody.style.color = "white";
oPopBody.style.fontSize = "12px";
oPopBody.style.textAlign = "center";
oPopBody.innerHTML = "<img src=\"affiche.jpg\" width=\"500\"/>";
// Affichage du popup
var e = event.srcElement;
var x = event.offsetX-e.offsetLeft-500; //-500
var y = event.offsetY-e.offsetTop-1000;
oPopup.show(x, y, 500, 700, e);
}
function hidePopup() {
if(!oPopup) return false;
oPopup.hide();
} |
et affiche.jpg et affiche_reduite.jpg sont bien présentes sur le FTP...
