Web script DIV position points tout navigateur

Web script DIV position points tout navigateur - PHP - Programmation

Marsh Posté le 11-02-2009 à 00:44:37    

Bonjour,
 
 
voici ce que je souhaite faire sur un site fait en PHP.
s'il y un moyen plus simple merci de me l'indiquer.
 
 
mon but est de placer sur une carte du monde des points.
en cliquant sur ces points je veux aller sur une page.  
 
 
pour afficher la carte du monde: (arrière plan)
<div align="center" z-index:0><img src="images/world.png"></div>
 
 
pour les points sur la carte:  
<script>
if(document.layers)  { layer01 = document.point1 }
 
 else if (document.getElementById) { layer01 = document.getElementById("point1" ).style }
 else if (document.all) {layer01 = point1.style }
 
layer01.left = 545;
layer01.top = 98;
</script>
 
 
<div id="point1"  style="position:absolute; top=98px; left=545px; z-index:1">  
<a href="/*je mettrais le lien vers la page*/">  
<img src='images/point.gif'>
</a>
</div>  
 
 
mon problème est que ça ne marche pas du tout.  
j'aimerais bien une solution qui fonctionne sous IE et Mozilla. enfin tout navigateur.
 
Merci pour votre aide et conseils !!!

Reply

Marsh Posté le 11-02-2009 à 00:44:37   

Reply

Marsh Posté le 11-02-2009 à 08:01:21    

une <map> ne te suffirait elle pas ?
 
si tu veux ajouter des points a une image, tu peux en php générer l'image (voir la librairie GD) et du meme coup générer la map qui va bien


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 11-02-2009 à 14:38:00    

J'ai fait ca une fois uniquement en css, j'en ai chié grave :d
 
 
[edit] bah ca existe encore tiens :

Code :
  1. http://www.gougnies.be/potales/


Message édité par Profil supprimé le 11-02-2009 à 14:48:16
Reply

Marsh Posté le 11-02-2009 à 14:57:08    

azertyuiop0147 a écrit :


<script>
if(document.layers)  { layer01 = document.point1 }

 

else if (document.getElementById) { layer01 = document.getElementById("point1" ).style }
 else if (document.all) {layer01 = point1.style }

 

layer01.left = 545;
layer01.top = 98;
</script>


Déjà on ne fait plus de code de ce genre. On utilisera partout et pour tout le monde :

Code :
  1. <script type="text/javascript">
  2.  var layer01 = document.getElementById("point1" );
  3. </script>


Message édité par FlorentG le 11-02-2009 à 14:57:31
Reply

Marsh Posté le 11-02-2009 à 23:29:17    

bonjour,
 
 
j'ai essayé avec une map mais j'ai quelques soucis : 2 soucis:  :pfff:  
 
Premier souci
je m'explique : je n'arrive pas à placer une image sur ma carte : exemple mettre un drapeau sur un pays.  
et lorsqu'on clique sur le petit drapeau (qui est donc une image) cela va permettre d'aller sur une autre page.  
 
dans ma page j'ai donc :
 
<div align="center" z-index:0 id="world">
<img src="images/world.png" border="0" usemap="#world" />
<map name="world" id="world">
<area shape="rect" coords="157,86,183,104" href="Canada_montreal/montreal.php?lds=fr" alt="Montreal" title="Montreal">
</map>
 
<div z-index:1><img class="dot" style="left:150px; top:100px" src="images/point.png" /> </div>
</div>  
 
 
dans le fichier CSS :
 
#world {
 position: relative;  
 border: 0;
 width: 800px;
 height: 400px;
 margin-left: auto;
 margin-right: auto;
}
#world .dot {
 position: absolute;
 height: 7px;  
 display: block;
}
 
 
 
Mais ça ne marche pas!    :(  
 
_Sous IE ma carte n'est pas centrée (quoi que je fasse pour centrer : rien a faire ça ne bouge pas!
 a part si je supprime id="world" de ma DIV), par contre j'ai le drapeau qui se place là ou je veux. et le lien est fait grace l'option area.
 
_Sous Firefox : la carte est centrée, mais le drapeau n'est pas du tout au meme endroit que sous IE : ce dernier ne se déplace même pas et est figé dans un coin de la page.
le lien area marche bien.  
 
avez vous une idée de la résolution du problème. si la solution pouvait etre compatible avec le maximum de navigateur, ça serait nikel!!!  
 
Deuxième souci
De plus j'aimerai bien pouvoir rajouter un texte qui s'afficherait avec onmouss over avec possibilité de changer la mise en forme du texte, la taille etc. dans un petit cadre joli et tout.  
il y a bien l'option title="texte que je veux afficher" mais ce n'est pas terrible donc si vous avez une autre solution  
 
merci pour votre aide!!!!


Message édité par azertyuiop0147 le 11-02-2009 à 23:31:19
Reply

Marsh Posté le 12-02-2009 à 12:51:05    

vue que tu parles de carte du monde et de placer des infos dessus, est-ce que ce serait pas une bonne idée d'utiliser googlemap et son API?


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 12-02-2009 à 19:33:31    

rufo a écrit :

vue que tu parles de carte du monde et de placer des infos dessus, est-ce que ce serait pas une bonne idée d'utiliser googlemap et son API?

 

non car c'est juste une interface pour atteindre la page désirée une fois qu'on aura cliqué sur les drapeaux.

 

la carte avec les points : c'est pour faire "plus jolie"
googlemap va etre plus lourd pour les bas débit.
et de plus vais je pouvoir mettre des liens sur googlemap à l'endroit voulu?
est ce que le visiteur va pouvoir tous les liens vers les pages où je vais les attirer d'un seul et même coup d'oeil?

 


je ne comprends pas pourquoi sous IE le code ci-dessous marche et sous netscape ça ne fonctionne pas : pouvez vous me dire ce qui ne va pas?

 

<div style="position:absolute; top=235px; left=470px; z-index:1">
<a href="#Europe"> <img src="images/dot.png"> </a>
</div>


Message édité par azertyuiop0147 le 12-02-2009 à 22:36:51
Reply

Marsh Posté le 13-02-2009 à 09:10:59    

Ca n'existe plus netscape [:pingouino] Tu parles de quoi quand tu dis netscape ?

Reply

Marsh Posté le 13-02-2009 à 11:37:31    

Pourquoi faire simple quand on peut faire compliqué.
 
Vu que tu as du mal à tout placer comme il faut en css et que fais un site en php, je te conseillerais d'arrêter de te prendre la tête avec le positionnement des drapeaux et de modifier l'image de ta carte avec GD.
 
 
- T'auras un contrôle absolu, et sur à 100%, sur la position des drapeaux.
- Tu pourras utiliser des balises html standards qui existent et sont géré par les navigateurs depuis plus de 15 ans.
- Tu pourras gérer les liens aussi facilement qu'avec ton système actuel

Reply

Sujets relatifs:

Leave a Replay

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