[javascript] problème insertion image

Version imprimable

Bonjour,

J'ai une fonction qui insère une image à un endroit précis par dessus une autre image.
A la main ca fonctionne bien, mais lorsque j'utilise une fonction javascript, cela affiche l'image dans une page blanche...

Voici le code que j'utilise:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="mapEurope">
<img src="map.jpg" usemap="#mailles" border="0">
<map name="mailles">
      <area shape="rect" href="#" onclick="setIdSite(46042); markArea(218,332);" coords=218,332,229,343>
      <area shape="rect" href="#" onclick="setIdSite(46043);" coords=231,332,241,343>
      <area shape="rect" href="#" onclick="setIdSite(45043);" coords=231,345,241,355>
      <area shape="rect" href="#" onclick="setIdSite(45044);" coords=243,345,254,355>
      <area shape="rect" href="#" onclick="setIdSite(44044);" coords=243,357,254,368>
      <area shape="rect" href="#" onclick="setIdSite(44046);" coords=268,357,278,368>
      <area shape="rect" href="#" onclick="setIdSite(44050);" coords=318,357,328,368>
      <area shape="rect" href="#" onclick="setIdSite(44051);" coords=330,357,341,368>   
</map>
</img>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function markArea(abs,ord){
switch (lastFocus)
	{
		case '1':
			this.document.write('<img style="position: absolute; top:ord; left:abs;" src="redPoint3.gif" border="0" />');
			break;
 
		...
 
		default: 
			this.document.write('<img style="position: absolute; top:ord; left:abs;" src="redPoint3.gif" border="0" />');
			break;
 
	}	
 
}

J'ai regardé un script d'affichage aléatoire d'images, il n'est pas censé afficher dans une page blanche ??
Une idée ?
Merci de votre aide ;)

17/05/2005, 17h37
SpaceFrog

le document.write efface le code de la page ...

donne une id à tes images

puis

Code:

document.getElementById.cssText="position: absolute; top:"+ord+"; left:abs;"
17/05/2005, 18h34
Pwill
Ok merci !
J'ai donc fait ainsi:

Code:

document.getElementById("redPoint").cssText="position: absolute; top:"+ord+"; left:"+abs+";"

Je déclare mon image avec id ainsi:
Code:

1 2 <img src="redPoint3.gif" id="redPoint" />
Comment puis-je faire pour que tant que ma fonction n'est pas appelée, l'image n'apparaisse pas...

Faut ruser ou bien il y a une méthode "propre" ?

Autrement, ainsi fait, l'image apparait dès le départ, et ne "se déplace pas" à l'appel de la fonction...
18/05/2005, 08h59
denisC
Code:

1 2 display = 'none'
vive le CSS :)

Merci :wink:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="mapEurope">
<img src="redPoint3.gif" id="redPoint" style="display:none;" />
<img src="map.jpg" usemap="#mailles" border="0">
<map name="mailles">
      <area shape="rect" href="#" onclick="setIdSite(46042); markArea(218,332);" coords=218,332,229,343>
      <area shape="rect" href="#" onclick="setIdSite(46043);" coords=231,332,241,343>
      <area shape="rect" href="#" onclick="setIdSite(45043);" coords=231,345,241,355>
      <area shape="rect" href="#" onclick="setIdSite(45044);" coords=243,345,254,355>
      <area shape="rect" href="#" onclick="setIdSite(44044);" coords=243,357,254,368>
      <area shape="rect" href="#" onclick="setIdSite(44046);" coords=268,357,278,368>
      <area shape="rect" href="#" onclick="setIdSite(44050);" coords=318,357,328,368>
      <area shape="rect" href="#" onclick="setIdSite(44051);" coords=330,357,341,368>   
</map>
</img>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function markArea(abs,ord){
switch (lastFocus)
	{
		case '1':
                                                document.getElementById("redPoint").cssText="display: inline; position: absolute; top:"+ord+"; left:"+abs+";";
			break;
		case '2':
			break;
		case '3':
			break;
		case '4':
			break;
		default: 
			document.getElementById("redPoint").cssText="display: inline; position: absolute; top:"+ord+"; left:"+abs+";";
			break;
 
	}	
 
}

Il est correct mon getElementById ? Car au clic rien ne se passe, pourtant je passe dans le bon case (au pire le default) du switch.
C'est possible que mon point rouge apparaisse derrière l'autre image ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function markArea(abs,ord){
switch (lastFocus)
	{
		case '1':
			alert(document.getElementById("redPoint").cssText);
			document.getElementById("redPoint").cssText="display: inline; position: absolute; top: "+ord+"px; left: "+abs+"px;";
			alert(document.getElementById("redPoint").cssText);
			break;
		case '2':
			break;
		case '3':
			break;
		case '4':
			break;
		default: 
			alert(document.getElementById("redPoint").cssText);
			document.getElementById("redPoint").cssText="display: inline; position: absolute; top: "+ord+"px; left: "+abs+"px;";
			alert(document.getElementById("redPoint").cssText);
			break;
 
	}	
 
}

Pourquoi mon premier "alert" m'affiche "undefined" ?
Il ne récupère donc pas le "display: none" que je donne à l'image au départ ?

Merci.

Voici une solution que l'on m'a indiquée:

Code:

1
2
3
document.getElementById("redPoint").style.visibility = "visible";
			document.getElementById("redPoint").style.top = ord + "px";
			document.getElementById("redPoint").style.left= abs + "px";

Code:

1
2
 
<img src="redPoint3.gif" id="redPoint" style="visibility: hidden; position: absolute;" />