positionnement div emplacement pointeur et map area

Question

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: mon code html [AAAAA.php ] etc... img src, text, lien

Bul3 · Answer

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

Bul3 · Answer

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 ?

Bul3 · Answer

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

@karamel · Answer

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

Bul3 · Answer

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

demnatis · Answer

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

Bul3 · Answer

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 ?

demnatis · Answer

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"

PetoleTeam · Answer

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)

demnatis · Answer

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

PetoleTeam · Answer

----, J'ai rédigé mon premier message car le div ne s'affiche pas sur la page

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; ----, affichage d'une infobulle: ok mais le div 'rien a faire"

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)

demnatis · Answer

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

PetoleTeam · Answer

----, mais quel parametre mettre dans I

au vue de la source je mettrais en variable globale var i=false; ----, désolé de ne pas avoir votre niveau, je suis un débutant en JS

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)

PetoleTeam · Answer

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)

demnatis · Answer

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?

PetoleTeam · Answer

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)

demnatis · Answer

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 HTML et d'autres

@karamel · Answer

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

@karamel · Answer

et aussi ne pas oublier de la mettre en position absolute

PetoleTeam · Answer

bon je te livres ton code revu et corrigé pour enseignement et pour repartir sur de "bonnes" bases... essai texte à toi d'analyser et d'en tirer les enseignements qui te permetront de ne pas renoncer... ;O)

demnatis · Answer

oui mais le probleme c'est que j'ai plusieurs div a afficher suivant l'area survoler tantot AAA et tantot BBB et bien d'autres.
voila le hic
de + la balise ne s'affcihe pas a coté de l'area mais a l'endoit ou elle est inserée dans le code html
elle ne s'affiche pas sur l'area
si tu vois le probleme...
merci encore

demnatis · Answer

Petrol Team
J E   T ' A I M E ! ! ! ! ! ! ! ! ! ! ! ! !

demnatis · Answer

je vais analyser tout ca mais d'ores et déja je constate mes erreurs
encore merci a tous
voila maintenant une "infobulle" en div située a coté de la souris qui fonctionne a merveille
reste a trouver le script JS pour que onclick ta rende statique histoire de pouvoir cliquer sur les liens situés a l'intérieur

demnatis · Answer

bon est ce que ca ressemblerait a ca?
function click(){
    function cache(baliseId)=false;}
merci

PetoleTeam · Answer

Il te faut regarder du côté des fonctions dites 
anonymes 
exemple : 

Objet.onmouseover = function( parametre_optionnel){ 

...les instructions a exécuter...
} 
;O)

demnatis · Answer

Bonjour a tous j'ai realisé un bout de code pour qui a pour but de stopper la function onemousout et bloquer l'affichade de la DIV. le onemouseout ne fonctionne + et la div reste afficher sans avoir pour autant clicker le lien de l'area. J'y suis presque mais...pourtant encore besoin d'un petit coup de main pour arriver a mon objectif. merci pour vos conseils JS //------------------------ 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'; if (!stop) var Obj = document.getElementById(baliseId); Obj.style.display = 'block'; } //----------------------- function stop( baliseId ) { var stop = false; var Obj = document.getElementById(baliseId); Obj.style.display = 'block'; Obj.style.left = Mouse_X +5 +"px"; Obj.style.top = Mouse_X +5 +"px"; } HTML puis la

PetoleTeam · Answer

Bonjour, 
j'ai un peu de mal à suivre... 
2 
variables stop DIFFERENTESE, un globale, dans fonction cache, et une 
locale, dans la fonction stop... 
Evites d'utiliser les mêmes noms pour une 
fonction et pour une variable. 
Je ne saisi pas ce que tu cherches à faire 
dans ta fonction cache. 
;O)

Positionnement div emplacement pointeur et map area

27 réponses

Votre réponse

Discussions similaires