Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1965 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1087850
Pwill
Deux fois Né
Posté le 18-05-2005 à 14:22:53  profilanswer
 

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
mood
Publicité
Posté le 18-05-2005 à 14:22:53  profilanswer
 

n°1087962
robbyone
Non pas !
Posté le 18-05-2005 à 15:10:24  profilanswer
 

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


n°1088040
Pwill
Deux fois Né
Posté le 18-05-2005 à 15:51:36  profilanswer
 

Ok je vais essayer ca ;)
 
Visibility est plus compatible que display ?

n°1088075
Pwill
Deux fois Né
Posté le 18-05-2005 à 16:02:29  profilanswer
 

Merci robbyone ! Désormais ca marche ;)

n°1088109
robbyone
Non pas !
Posté le 18-05-2005 à 16:17:53  profilanswer
 

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.

n°1088236
Pwill
Deux fois Né
Posté le 18-05-2005 à 17:40:55  profilanswer
 

Merci pour les précisions  :)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
include dans un array [resolu]Problème 'image contient des erreur' avec Mambo
[RESOLU] Upload d'une image miniature sans GDTransformer doc Word en image
[Résolu] formulaire asp et base de données access et iis[HTML/Javascript] Imprimer une iframe cachée...
[resolu] centrage verticaledistorsion image
Script appelant un autre... [RESOLU] 
Plus de sujets relatifs à : [résolu] [javascript/css] placer une image après action


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR