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

placer une image après action [résolu] [javascript/css] - HTML/CSS - Programmation

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


 

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


 
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 :
  1. <img src="redPoint3.gif" id="redPoint" style="visibility:hidden; position:absolute;" />
  2. document.getElementById("redPoint" ).style.visibility = "visible";
  3. document.getElementById("redPoint" ).style.top = ord + "px";
  4. 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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed