[résolu] [javascript/css] placer une image après action

Marsh Posté le 18-05-2005 à 14:22:53

Bonjour,
j'ai un petit soucis en utilisant getElementById dans mon code javascript.

J'ai une carte d'europe quadrillée. Chaque case est clicable. Lorsque l'utilisateur clique dessus, j'aimerais qu'une image (un point rouge) appararaisse à l'endroit sur la bonne case.

Je m'y prend ainsi:

Code :

<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 :

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;
}
}

En fait il se trouve que lors du premier alert (que ce soit dans le case '1' ou le default) il ne récupère pas le "display: none" que je donne à l'image redPoint3.gif. Est-ce normal ?

Je ne sais pas si ma méthode est viable et/ou correcte, en tout cas, ca ne m'affiche pas de point rouge, ou alors peut-être derrière la carte d'europe ??

J'espère que vous pourrez m'aider
Merci.

Message édité par Pwill le 18-05-2005 à 16:03:44

Reply

Marsh Posté le 18-05-2005 à 14:22:53

Reply

Marsh Posté le 18-05-2005 à 15:10:24

Décomposes plutôt tes styles :

Code :

<img src="redPoint3.gif" id="redPoint" style="visibility:hidden; position:absolute;" />
document.getElementById("redPoint" ).style.visibility = "visible";
document.getElementById("redPoint" ).style.top = ord + "px";
document.getElementById("redPoint" ).style.left = abs + "px";

Reply

Marsh Posté le 18-05-2005 à 15:51:36

Ok je vais essayer ca

Visibility est plus compatible que display ?

Reply

Marsh Posté le 18-05-2005 à 16:02:29

Merci robbyone ! Désormais ca marche

Reply

Marsh Posté le 18-05-2005 à 16:17:53

Non, mais je n'étais pas sûr de la syntaxe pour display.

* visibility reserve la place dans ta page mais ne fait pas apparaître l'élement.
* display -lui- permet à l'élément invisible de ne pas faire de 'trou' dans la page

Donc visibility suffit généralement,
display s'avérant parfois nécessaire.

Reply

Marsh Posté le 18-05-2005 à 17:40:55

Merci pour les précisions

Reply

[résolu] [javascript/css] placer une image après action

Sujets relatifs:

Leave a Replay