begin process at 2012 05 29 19:56:01
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

positionnement div emplacement pointeur et map area


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

positionnement div emplacement pointeur et map area

lundi 30 mars 2009 à 15:37:28 | positionnement div emplacement pointeur et map area

demnatis

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
<area  shape="rect" HREF="AAAAA.php"
            onmouseover="montre('id_de_la_div');"
            onclick=comment supprimer le onmouseout et rendre la div statique pour pouvoir cliquer sur ses liens insérés a l'intérieur?
            onmouseout="cache('id_de_la_div');"
            coords="174,164,239,185"/>
<area  shape=....................."/>
<area  shape=....................."/>
etc...


<div class="mon_css" name="AAA" id="mon-id">img src, text, lien</div>
<div class=".....................
<div class=".....................
etc...
lundi 30 mars 2009 à 15:51:02 | Re : positionnement div emplacement pointeur et map area

Bul3

Membre Club


Bonjour,

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

<div style="background-color:#FF0000" id="id_de_la_div">
        <img src="" onclick="alert('ok');">
       <a href="url">lien</a>
       ....
</div>

<area  shape="rect" HREF="AAAAA.php"
            onmouseover="montre('id_de_la_div');"
            onmouseout="cache('id_de_la_div');"
            coords="174,164,239,185"/>

ou j'ai rien compris ?

Cordialement [mon Site] [M'écrire] Bul
lundi 30 mars 2009 à 15:54:19 | Re : positionnement div emplacement pointeur et map area

Bul3

Membre Club
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 ?

lundi 30 mars 2009 à 16:00:53 | Re : positionnement div emplacement pointeur et map area

Bul3

Membre Club

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

lundi 30 mars 2009 à 16:05:32 | Re : positionnement div emplacement pointeur et map area

kazma

Administrateur CodeS-SourceS
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>
<body onclick="deplace()">
<div id='oxo'style="position:absolute;top:0px;left:50px;height:100px;width:100px;background-color:black">
</body>
</html>
lundi 30 mars 2009 à 16:20:51 | Re : positionnement div emplacement pointeur et map area

Bul3

Membre Club
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....

lundi 30 mars 2009 à 16:47:33 | Re : positionnement div emplacement pointeur et map area

demnatis

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

lundi 30 mars 2009 à 16:51:38 | Re : positionnement div emplacement pointeur et map area

Bul3

Membre Club
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 ?

lundi 30 mars 2009 à 18:00:12 | Re : positionnement div emplacement pointeur et map area

demnatis

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"

lundi 30 mars 2009 à 18:16:41 | Re : positionnement div emplacement pointeur et map area

PetoleTeam

Membre Club
Bonjour,
il semble impossible de la rendre statique, de lui faire contenir des image et des liens.
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)

1 2 3

Cette discussion est classée dans : style, document, div, getelementbyid, baliseid


Répondre à ce message

Sujets en rapport avec ce message

document.getElementById() .div [ par abdoulax ] Bonjour, Je voulais faire un truc du genre : document.getElementById(id).div.style.paddingTop="0px"; En faite je veux modifier le style des div enfa probleme avec une fonction javascript + css [ par edelendil ] Voila, je dois créer un menu déroulant composé de deux tableaux le premier contient le titre de la rubrique et reste toujours visible le deuxieme con Parade au style.width sous FireFox ? [ par Shibo_Sources ] Bonjour, je découvre à peine toutes les possibilités qu'offre le javascript ce qui explique mon niveau (je ne me suis pas trompé de section au moins : iframe dans nelle fenetre _blank [ par tonytruand ] BonjourEst ce quelqu'un pourrait me donner un petit coup de main, merci par avancej'aimerai ouvrir le contenu d'un iframe dans une nouvelle page et je pb de refresh de menu [ par tianet ] Bonsoir, Je voudrais faire un menu qui une fois qu'une option est sélectionnée une nouvelle page s'ouvre et que le menu reste selectionné à la bonne o Marche pas sous IE [ par taxidogkiller ] Bonjour, j'ai télécharger un script de galerie d'image et en voulant le bidouiller je suis tomber sur des fonction javascript qui ne marche que sous m Methode "document.getElementById" // Probleme de modification de plusieurs DIV [ par Gunsnake ] Bonjour, Voici mon problème. J'aimerais, au moyen d'un bouton actionné, modifier plusieurs DIV de ma page web. Tout ceci dans le but d'éviter les fra calques div [ par tonytruand ] bonsoirUn petit coup de main SVPje n'arrive pas à coller les div "contenu" juste au dessous des div onglets ??????j'ai essayé en mettant le tout dans connaitre la position (coordonnées) du curseur de la souris? [ par johanb ] Bonjour à tous, tous est dis dans le titre.Je sais c'est censé être qqc de basique, mais j'ai du mal. Voici l'origine de mon probleme: j'ai une liste block/none de div [ par kishkaya ] voila j'ai des contenu et j'essaye de creer une fonction pour cacher ou afficher ces div en m'inspirant d'une fonction trouver sur ce site . Moi j'ai


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,842 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales