Positionnement div emplacement pointeur et map area

Signaler
Messages postés
33
Date d'inscription
mardi 23 décembre 2008
Statut
Membre
Dernière intervention
2 avril 2009
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour a tous,

Les forums de javascript.com m'ont souvent fait progresser dans mes recherches et j'y ai souvent trouvé la solution corriger mes scripts.

Ne trouvant pas la source du dysfonctionnement de mon dernier script, j'ai décidé de solliciter votre aide en postant sur ce forum.

J'ai créé une image map et des map aera.
Je souhaiterais faire apparaitre une div au survol de chaque area.
Chaque area devrait afficher sa propre div et a coté du pointeur donc de l'area.
Chaque div devrait contenir son propre "texte, image et liens".
Je réussi a afficher des infobulle en JS mais il semblerait que ce ne soit pas la méthode idéale car il semble impossible de la rendre statique, de lui faire contenir des image et des liens. 
Je cherche donc a modifier le code infobulle pour afficher une DIV
Merci d'avance pour vos conseils.

mon code:
<script language="JavaScript" type="text/javascript">
function move(e) { if(i) {
                         if (navigator.appName!="Microsoft Internet Explorer")
                        {     document.getElementById(baliseId).style.left=e.pageX + 5+"px";
                            document.getElementById(baliseId).style.top=e.pageY + 10+"px";}
 else                 { if(document.documentElement.clientWidth>0)
                         { document.getElementById(baliseId).style.left=20+event.x+document.documentElement.scrollLeft+"px";
                           document.getElementById(baliseId).style.top=10+event.y+document.documentElement.scrollTop+"px"; }
 else                 {    document.getElementById(baliseId).style.left=20+event.x+document.body.scrollLeft+"px";
                             document.getElementById(baliseId).style.top=10+event.y+document.body.scrollTop+"px"; }
 }
 }
 }

 function montre(baliseId) {  if(i==false)
                                 { document.getElementById(baliseId).style.display='block';
                                   } }
 function cache(baliseId)         { if(i==true)
                                 { document.getElementById(baliseId)).style.display='none'; i=false;
                                 }
                                 }
 document.onmousemove=move;
 
</script>

mon code html
[AAAAA.php
]


etc...

img src, text, lien

<div class=".....................
<div class=".....................
etc...

27 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
Bonjour,

le onclick c'est à gérer dans l'élément dans le div
pas dans l'area

       
       [url lien]
       ....

[AAAAA.php

ou j'ai rien compris ?

Cordialement []mon Site] [M'écrire] Bul
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
ah... sauf si effectivement, le div ne vient pas couvrir l'area !

dans le onmouseout ne pas cacher le div
mais... il faut le cacher quand ?

peut-être lors du survol d'un autre area ?
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
je ne dis que des bêtises aujourd'hui
( comme d'hab diront certains ! )
le survol du div fait que onmouseout de l'area est déclenché
il ne faut bien cacher ce div que lors du survol d'un autre area par exemple

area... onmouseover="cacher le div précédent
                             div précédent = celui voulu ici
                             afficher le div voulu ici"
avec au départ div précédent = n'importe quel div
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
116
plutot que de suivre la souris la div devrait se mettre a la position desirer lors du clic

petit exemple compatible ie mais facilement modifiable
<html>
<head>
<script>
function deplace(){
var igrec=window.event.offsetY
var ixe=window.event.offsetX
document.getElementById('oxo').style.top=igrec-30+'px';
document.getElementById('oxo').style.left=ixe+30+'px';
}
 </script>

</html>
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
je suis fatigué moi...
je ne me remet pas d'avoir du me lever à 2 heures ce dimanche
pour passer tous mes réveils/horloges/montres/pc... à 3 heures.
( et il y a du monde )



je ne voyais pas le div suivre la souris
mais être positionné une fois pour toute lors du survol
( onmouseover et pas onmousemove )
et... le survol du div, déclenchera
le onmouseout de l'area ( donc on cachera le div )

je me trompe ? faut que je retourne me coucher jusqu'à l'heure d'hiver ?
c'est bien possible....
Messages postés
33
Date d'inscription
mardi 23 décembre 2008
Statut
Membre
Dernière intervention
2 avril 2009

merci a tous pour vos réponses
effectivement le div se déclencherait au survol de l'area et ne suivrait pas la souris
ile click servirait a bloquer la div affichée pour pouvoir cliquer que les liens a l'intérieur
un bouton "fermer div" serait installé dans la div
2 heures du mat c'est trop tôt même pour les braves ;))
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
donc... ne cache pas le div au onmouseout de l'area
puisqu'on peut le faire dans le div
 ajoute peut-être ce que je te proposais
  : lors du survol d'un area , cacher le div affiché d'abord ?
Messages postés
33
Date d'inscription
mardi 23 décembre 2008
Statut
Membre
Dernière intervention
2 avril 2009

Non
le but serait que l'utilisateur ballade la souris sur la map et puisse voir les div comme une infobulle.
Il fixerait la div en cliquant sur le lien de la map area uniquement quand il le souhaite.
Le div contiendrait un bouton "fermer"
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, il semble impossible de la rendre statique, de
lui faire contenir des image et des
liens.</td>
</td></tr></tbody></table>tous les
codes d'INFO BULLE permettent d'afficher du HTMLn
ceci étant précisé...

Sur l'événement onclick de ta zone il te suffit de remplacer le
onmouseout par une fonction nulle, que
tu sauvegardes pour la réutiliser quand ton DIV,
attaché, disparaît, cela peut servir.
;O)
Messages postés
33
Date d'inscription
mardi 23 décembre 2008
Statut
Membre
Dernière intervention
2 avril 2009

Avant toute chose,
J'ai rédigé mon premier message car le div ne s'affiche pas sur la page.
J'ai beau vérifier les scripts: JS, html et CSS maintes et maintes fois, je ne trouve pas mon erreur.
Comme je l'ai précisé précédemment:
 affichage d'une infobulle: ok mais le div 'rien a faire"
merci pour votre aide
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
 
<table bgcolor= "#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, J'ai rédigé mon premier message car le div ne
s'affiche pas sur la
page</td>
</td></tr></tbody></table>ce n'est pas
ce que j'avais compris, mais bon...
Il est indispensable de regarder les
consoles d'ERREURs au minimum pour le debugage rapide,

je signalerais
donc que
i is not defined

and also il y a 2
parenthéses fermante à cette ligne
document.getElementById(baliseId)).style.display ='none'; i= false;

<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, affichage d'une infobulle: ok mais le div
'rien a
faire"</td>
</td></tr></tbody></table>quand tu
écris
onmouseover="montre('id_de_la_div');"il est IMPERATIF qu'il
y ait un DIV avec un ID = "id_de_la_div"

nota:
un effort d'indentation dans ton code aiderait tout ceux qui essaient de
te venir en aide..

;O)
Messages postés
33
Date d'inscription
mardi 23 décembre 2008
Statut
Membre
Dernière intervention
2 avril 2009

i
is not defined
merci pour ces conseils.
mais quel parametre mettre dans I

de +:




i
is not defined
mais ca fonctionne avec une infobulle et pourquoi pas avec une div



il est IMPERATIF qu'il y ait un DIV avec un ID = "id_de_la_div"


ok

désolé de ne pas avoir votre niveau, je suis un débutant en JS
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">

----,

mais quel parametre mettre dans
I

</td>

</td>
</tr>
</tbody>
</table>au vue de la
source je mettrais en variable globale var i=false;
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, désolé de ne pas avoir votre niveau, je suis
un débutant en
JS</td>
</td></tr></tbody></table>il n'y a pas à
l'être on l'a tous été, c'est pour cela qu'il faut utiliser les infos des
Debugueurs..

;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
voir ce POST pour les Deboggers, Debugueurs ou autre
écriture...
http://www.javascriptfr.com/forum/sujet-IFRAME-NE-AFFICHE-PAS_1289906.aspx
Merci
qui ?
;O)
Messages postés
33
Date d'inscription
mardi 23 décembre 2008
Statut
Membre
Dernière intervention
2 avril 2009

oui merci pour tout mais

de +: i is not defined
mais ca fonctionne avec une infobulle et pourquoi pas avec une div???
as tu une reponse???

au vue de la source je mettrais en variable globale var i=false;
 oui...mais ou et comment?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Je ne vois pas d'Info Bulle dans ce que tu as mis
comme code, de plus la plupart du temps les Info Bulle son des DIV, quant à var i = false, comme toutes variables globales on la place en
dehors de toutes fonctions, pour qu'elle soit justement visible par toutes ...

;O)
Messages postés
33
Date d'inscription
mardi 23 décembre 2008
Statut
Membre
Dernière intervention
2 avril 2009

Merci pour le de(bo)(bu)ger

Voila mes scripts
la div s'affiche mais en bas de page et pas sur la map
Je suis au bord de renoncer...trop de temps perdu
si tu y trouves l'erreur merci de m'aider
moi, je vois pas.......
merci a tous

CSS
.infocarte
            {
            display: none;
            position:absolute;
            text-decoration: none;
            color: black;
            z-index: 100;
            }

JS
<script language="JavaScript" type="text/javascript">
var i=false;

function move(e) { if(i)
                        { if (navigator.appName!="Microsoft Internet Explorer")
                        {     document.getElementById(baliseId).style.left=e.pageX + 5+"px";
                            document.getElementById(baliseId).style.top=e.pageY + 10+"px";}
 else                 { if(document.documentElement.clientWidth>0)
                         { document.getElementById(baliseId).style.left=20+event.x+document.documentElement.scrollLeft+"px";
                           document.getElementById(baliseId).style.top=10+event.y+document.documentElement.scrollTop+"px"; }
 else                 {    document.getElementById(baliseId).style.left=20+event.x+document.body.scrollLeft+"px";
                             document.getElementById(baliseId).style.top=10+event.y+document.body.scrollTop+"px"; }
 }
 }
 }

 function montre(baliseId) {  if(i==false)
                                 { document.getElementById(baliseId).style.display='block';}
                                                                
                                  }
 function cache(baliseId) 
                                 { document.getElementById(baliseId).style.display='none'; i=false;
                                 }
                                
 document.onmousemove=move;
 
</script>

HTML

et d'autres <area........

essai texte

et d'autres < div....
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
116
il y a qq chose que j'ai du mal a comprendre c'est dans la fonction move tu met

document.getElementById(baliseId)

et je me dit que las fonction ne connait pas baliseId car si je ne me trompe toujour pas l'id concerne c'est AAA autant metre directement document.getElementById('AAA')
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
116
et aussi ne pas oublier de la mettre en position absolute
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
bon je te livres ton code revu et corrigé pour
enseignement et pour repartir sur de "bonnes" bases...
<html>
<head>

<style type= "text/css">
.infocarte {
  display: none;

  position:absolute;
  text-decoration: none;
  color: black;

  z-index: 100;
  border : 1px solid blue;
  width : 200px;

  height : 200px;
}
</style>
<script
type="text/javascript">
var i=false;
var Mouse_X;
var Mouse_Y;

//---------------
function move( e){

  if( e) {
    Mouse_X = e.pageX;
    Mouse_Y = e.pageY;
  }

  else {
    if (document.documentElement.clientWidth > 0) {

      Mouse_X = event.x + document.documentElement.scrollLeft;

      Mouse_Y = event.y + document.documentElement.scrollTop;
    }

    else {
      Mouse_X = event.x + document.body.scrollLeft;

      Mouse_Y = event.y + document.body.scrollTop;
    }
  }
}

//------------------------
function
montre( baliseId){
  var Obj = document.getElementById(baliseId);

  Obj.style.display = 'block';
  Obj.style.left = Mouse_X +5 +"px";

  Obj.style.top = Mouse_X +5 +"px";
  
}
//-----------------------
function
cache( baliseId){
  var Obj = document.getElementById(baliseId);

  Obj.style.display = 'none';
}
document.onmousemove = move;

</script>
</head>


<map name="la_map">
</map>

essai texte



</html>
à toi d'analyser et d'en tirer les enseignements
qui te permetront de ne pas renoncer...
;O)