Discussion :

[Mister Jingles]

Salut tout le monde,

J'ai un petit problème avec des images. J'ai un bloc conteneur avec une image, et ce bloc contient des images en position:absolute.

En gros, mon but est de faire une carte avec des points dessus pour donner des information via un javascript qui affiche une bulle d'info.

Mon problème est que mais images, qui sont sous la forme <div style=""><img src=""></div>, n'apparaissent pas sur la carte mais à coté en haut à droite.

j'essaye toutes les solutions possible sans succès.

Donc pour l'instant j'ai :

<div STYLE="position:static;zoom:1;"> pour le bloc conteneur

<div STYLE="position:relative;zoom:1;">img pour l'image de fond (la carte)

<div STYLE="position:absolute;top:yy;left:yy;z-index:2;">img</div>
<div STYLE="position:absolute;top:zz;left:zz;z-index:2;">img</div> pour les points

</div>
</div>

Merci de m'aider

@++ =^_^=

[grabriel]

Salut,

Je pense que map serait plus approprié pour ce que tu veux faire.

Un petit tuto veux mieux qu'un long blabla :
http://cyberzoide.developpez.com/html/map.php3

[Mister Jingles]

C'est plus simple c'est vrai mais ça fait pas ce que je veux.

Un des problème est que c'est une image, si on veux faire une mise à jour, il faut modifier l'image. (pas terrible)

Deuxième problème, mes points sont des gifs animés. En gros il faudrait faire une bidouille pour que toute l'image soit un gif animé. (pas terrible)

merci quand même.

[grabriel]

Sinon tu mets ton image de fond en position absolute et tes gif animés aussi avec le z-index tu peux positionner tes images gif par dessus ton image de fond, et le tour est joué!!!

[Mister Jingles]

En gros :

<div STYLE="position:absolute;">img pour l'image de fond (la carte)

<div STYLE="position:absolute;top:yy;left:yy;z-index:2;">img</div>
<div STYLE="position:absolute;top:zz;left:zz;z-index:2;">img</div> pour les points

</div>

C'est ça?

[grabriel]

Oui

[Mister Jingles]

Je suis completement d'accord avec toi, c'est exactement comme ça que j'ai fait mon bloc.

Le problème c'est que si je le colle comme ça, mon texte passe en dessous. Donc j'ai mis un div en position static. Et voilà où j'en suis, mes images ne sont pas sur ma carte mais en haut à droite.

[grabriel]

Mets ton code en entier (pas trop non plus), t'as peut etre une balise mal fichu ailleurs dans ton code.

[Candygirl]

Pourquoi ne pas mettre ton image de fond en background de ton conteneur ?
Tu peux aussi positionner tes images directement en absolute, sans passer par un div:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="position:relative;background-image:url(tonimgdefond.jpg);width:xxxpx;height:xxxpx;"> 
  <img style="position:absolute;top:yy;left:yy;" src="img1.gif" alt="description img1" width="xxx" height="xxx" />
  <img style="position:absolute;top:zz;left:zz;" src="img2.gif" alt="description img2" width="xxx" height="xxx" />
</div>

[Mister Jingles]

Un truc bizarre,

Pour faire la modif, j'ai utilisé FrontPage (je sais c'est pas top). il y a un truc bien sur front page c'est qu'on a des onglets Normal, HTML, Apercu.

Le truc bizarre c'est qu'en normal le points sont bien placés, mais pas en apercu . La je me dis que c'est peut être pas le bloc qui bug mais plutot la page....



en tout cas merci pour la compression

[Mister Jingles]

Rien ne rentre dans mon bloc

un sceen :


en dessous du bloc on voit du texte. Normalement ce texte est dans le bloc

[grabriel]

Ton exemple peut etre fait avec une map!!!

tu traces des polygones sur tes régions et tu fais apparaitre des div avec ton texte quand la souris passe sur un point. A ce que j'ai compris.

[Mister Jingles]

Voilà mon bloc brut:
Carte Sud Est

Je me vois mal faire ça en map.

[MasterOfChakhaL]

Ton exemple peut etre fait avec une map!!!

tu traces des polygones sur tes régions et tu fais apparaitre des div avec ton texte quand la souris passe sur un point. A ce que j'ai compris.

Avec les maps, ce n'était pas vraiment jouable car il devait rajouter des points par dessus l'image.
Il y a toujours la possibilité de refaire toute la carte a chaque fois qu'un point est ajouté ou change de place, mais bon, c'est pas très pratique...

[Mister Jingles]

Vous allez rire...

C'est mon DOCTYPE qui fait tout bugger trop drole....

Vous auriez pas un bon doc sur les doctypes... par hasard?