map area - affichage des blocs div comprenant des liens

Question

Bonjour a tous,

Après avoir galéré des jours sur mon problème, je m'en remets a la communauté pour votre aide. Bien entendu, j'ai essayé de mettre en pratique les conseils et les scripts donnés sur d'autres posts.de + je ne maitrise que trés peu le javascript.

Mon probleme est le suivant:
- j'ai créé une map comprenant des map area.
- chaque map area devrait afficher dans une position fixe un bloc div créé dans mon css
- au survol des differentes map area le bloc devrait changer et remplacer le precedent.
 ces bloc comprendraient des liens cliquables.
voili voilou!
j'espère avoir été assez clair et peut etre pourrez vous me donner un coup de main?
Merci d'avance pour votre aide.

Bul3 · Answer

Bonjour,

et qu'est-ce qui ne fonctionne pas dans ce que tu fais ?
parce que sans le moindre ch'tiot bout de code, impossible
de te dire où il y a des erreurs...
un tout petit extrait serait le bien venu

Cordialement	[mon Site]	[M'écrire]	Bul

demnatis · Answer

Bonjour Bul3, Tout d'abord, je te remercie de t'inquiéter de mon problème et de bien vouloir me donner un coup de main. Afin que tu saisisses plus clairement mon travail voici ce que je fais. Je bosse actuellement sur un portail referenceant certaines maisons d'hotes au maroc. - J'ai besoin d'une carte du maroc (c'est fait) contenant des areas. - Au survol de la souris, ces areas, afficheraient des infobulles. - Ces infobulles afficheraient une liste de liens (etablissements hoteliers) qui redirigeraient vers une page en php. Mais (y en a toujours un) et c'est la le hic, c'est que l'on puisse cliquer les liens contenu dans la boite. Ces liens ouvriraient une page en php. L'idéal serait que cette infobulle s'ouvre a coté du pointeur de la souris au survol de l'area et se ferme en quittant l'area. L'infobulle devrait s'afficher uniquement dans la frame (centrale) sans en sortir etant donné que ma page est divisé en 3 colonnes: - 1 menu a gauche - 1 frame centrale contenant le blabla et donc dans cette page ma map - 1 bandeau a droite reservé aux annonces publicitaire Voici ci dessous le bout de code que j'ai bidouillé (un parmi tant d'autres). 1/ ca ne marche pas 2/ Ca ne répond pas du tout a ce que je voudrais faire mais bon...j'ai pas trouvé mieux. Voila. Merci encore pour ton aide. contenu de mon div

Bul3 · Answer

donc pas en ccs comme tu semblais dire, mais en javascript ? 
si je lis bien ?

c'est quoi les this_ que tu utilises dans tes fonction ?
ils ne sont pas définis, ça ne peut pas marcher

tu veux afficher un div ? met l'id du div
que tu auras chargé le contenu avec que tu veux 
et positionne le là où tu veux ( style.left et style.top )

les coordonnées de la souris ?
tu trouveras une foultitude d'exemples et
on vient d'en parler ici par exemple

en pur ccs, on pourrait et/mais le div serait
affiché toujours au même endroit

Bul3 · Answer

function _0(afficheId"bloc1")
pas la bonne syntaxe
function nom_de_la_fonction( parametre_et_sans_guillemets )
{ ici on peut utiliser  parametre_et_sans_guillemets
  qui est = à ce qu'il y a dans l'appel }
appel : nom_de_la_fonction( toto );
          et dans la fonction parametre_et_sans_guillemets = toto
@+

demnatis · Answer

function nom_de_la_fonction( parametre_et_sans_guillemets )
{ ici on peut utiliser  parametre_et_sans_guillemets
  qui est = à ce qu'il y a dans l'appel }
appel : nom_de_la_fonction( toto );
          et dans la fonction parametre_et_sans_guillemets = toto

c'est clair pour beaucoup mais pour moi....
function? affiche ou cache tu veux dire
appel? j'imagine onmouseover par exemple?

demnatis · Answer

Je tente un nouveau "up" au cas ou quelqu'un qui passerait par là et qui pourrait m'aider voit le topic !
galere je plante

demnatis · Answer

bonjour a tous! voici un bout de code qui m'a fait avancer mon div apparait au chargement de la page je souhaiterais qu'il n'apparaisse qu'en onmouseover un idée? merci style css: .bloc { display:none; visibility: hidden; } javascript: function afficheId(baliseId) { document.getElementById(baliseId).style.visibility='visible'; document.getElementById(baliseId).style.display='block'; } function cacheId(baliseId) { document.getElementById(baliseId).style.visibility='hidden'; document.getElementById(baliseId).style.display='none'; } html: Ouzoud

Bul3 · Answer

#bloc   {  display:none;  }
function afficheId(baliseId)
{ document.getElementById(baliseId).style.display='block'; }
function cacheId(baliseId)
{ document.getElementById(baliseId).style.display='none';  } 

ça devrait le faire...

Bul3 · Answer

ch'tiote remarque :

tu ne positionnes pas le div en fonction du curseur.

si c'est ce que tu veux, javascript inutile, le css suffit

sinon, met ton div en position:absolute et quand tu
      le montres, met style.top et style.left à là où est la souris

demnatis · Answer

merci pour ton aide mais ca: blablaba apparemment de ce que j'ai lu sur les différents posts: pas possible d'afficher une div sur une map sans javascript est ce vrai?

demnatis · Answer

ca ne marche pas

demnatis · Answer

.display none
dans le css ca ne marche pas
on voit toujours la div

Bul3 · Answer

"bloc" id"bloc">Ouzoud si si ( l'impératrice ) ça baigne >>pas possible d'afficher une div sur une map sans javascript et pourquoi ça ne fonctionnerait pas ? avec les vieux navigateurs et pas le bon doctype peut-être mais :hover aujourd'hui ça devrait fonctionner ( pas testé )

PetoleTeam · Answer

Bonjour, 
pourquoi reposer la question sur un autre 
POST quand la réponse est on ne peut plus clair de la part de TheBul... 
;O)

demnatis · Answer

Bonjour Petrole et a tous,

Merci pour ton aide.
La dernière réponse de TheBul... est claire, effectivement.
Celles auparavant, pas assez pour moi qui est un niveau en javascript "débutant".
Désespéré, j'ai tenté un nouveau post.
Merci encore et mes excuses.

Le script de Thebul... fonctionne mais pas comme souhaité:
j'ai 2 map area (pour le moment)
les 2 div s'affichent au chargement de la page.(pas normal)
onmouseout la  div"1" disparait et réaparait au onmouseover.ok
la div "2", elle reste en permanence affichée et ne répond pas aux comme onmouse...
derniere souci, malgré la fonction CSS display:none; les div s'affichent aux chargement de la page.

c'est un casse tete, si si...(r'culaire),
depuis trois jours, sans trouver d'expliquation a mon probleme.
Désolé d'etre lourd mais je plante
bonne journée a tous

Bul3 · Answer

>>les 2 div s'affichent au chargement de la page
tu ne mets pas le css nécessaire ( style="display:none" ça baigne toujours )
>>...La div "2", elle reste en permanence affichée....
ah ? tu as 2 div maintenant ?
tu n'en aurais pas autant que d'area ? par hasard ?
=> bah, quand tu en affiches une, cache donc la précédente ! non ?
>>sans trouver d'explication a mon probleme.
c'est un problème de logique, d'algorithme si tu veux, rien d'autre

demnatis · Answer

.bloc
            {
            display: none;
            }

chez moi ca marche pas!

demnatis · Answer

>>sans trouver d'explication a mon probleme.
c'est un problème de logique, d'algorithme si tu veux, rien d'autre

logique: oui, compris 

mais

mettre en pratique: +difficile

Bul3 · Answer

.
bloc  {  display: none;   }
chez moi ca marche pas

chez moi non plus dans le contexte mis en exemple
par contre #bloc  {  display: none;   }   c'est mieux

Bul3 · Answer

# s'applique à un ID
comme tu auras (?) plusieurs div,  il faudra probablement
faire la même chose pour tous, dans ce cas mettre .bloc
dans le css et dans les div class="bloc"

PetoleTeam · Answer

Concernant l'écriture des styles, avec juste un peu de rigueur on s'en sort... 

- 
Modification du style d'une balise 
div { 
  border : 1px solid blue; 
  width : 400px; 
}
s'appliquera à tous les DIV de la page 

- Création d'une classe, son 
nom est précédé d'un point . 
.ma_class { 
  color : red; 
  font-family : Verdana; 
  display 
: none; 
}
s'appliquera à toutes les balises qui auront la class 
ma_class 
exemple : 

Le texte

- Création d'un style 
pour un ID particulier, son nom est précéde d'un dièse # 
#D_MAIN { 
  color : red; 

  font-family : Verdana; 
  display : none; 
}
s'appliquera 
à la balise dont l'ID sera D_MAIN
exemple : 

Le texte

...et encore bien d'autres...
;O)

demnatis · Answer

Merci a tous mon problème est résolu.
voici le code 
ca intéressera certainement "un" en galère

HTML

<map  name="map">

  

JAVSCRIPT
function afficheId(baliseId)
    {    document.getElementById(baliseId).style.display='block';    }
function cacheId(baliseId)
    {   document.getElementById(baliseId).style.display='none';   }

CSS
.infocarte
            {
            display: none;
            }

PetoleTeam · Answer

Bonjour, 
Penses, dans ce cas, à mettre ta réponse 
en Réponse acceptée !
;O)

Map area - affichage des blocs div comprenant des liens

23 réponses

Votre réponse

Discussions similaires