infobulle et superposition d'image

kronos12
Invité n'ayant pas de compte PHPfrance

01 avr. 2011, 12:25

Salut !

J'ai un petit soucis, voila je dois faire apparaitre une infobulle lors du survol d'une image
L'infobulle marche bien sur une image toute simple
Par contre quand j'essaie de l'afficher sur une image comportant un z-index, l'infobulle s'affiche mais sous l'image !
mon travail consiste à afficher un plan sur lequel il y a des autres images et, je voudrais que l'infobulle s'affiche lorsque la souris passe sur ces images,
or même quand je n'ai qu'une seule image (comportant donc un "z-index:1") l'infobulle s'affiche en dessous (et s'affiche bien dessus lorsqu'il n'y a pas de z-index)

Que dois je faire pour que cette infobulle s'affiche sur l'image superposée ?
Merci d'avance
cordialement

ViPHP
xTG
ViPHP | 7331 Messages

01 avr. 2011, 12:28

z-index:999 ?
Et au cas où, ton image serait-elle dans un fichier flash ? Si c'est le cas il y a il me semble un bug qui fait que le fichier flash est toujours le plus haut.

kronos12
Invité n'ayant pas de compte PHPfrance

01 avr. 2011, 12:32

en fait je suis allé trop vite ..
c'est pas le z-index qui fait que je ne vois pas mon infobulle c'est à cause du position:absolute que j'ai mis en attributs de l'image ...
Il y a moyen de passer outre ?

ViPHP
xTG
ViPHP | 7331 Messages

01 avr. 2011, 13:03

position absolute ou non cela ne change rien au z-index normalement.
Mets ton info-bulle en z-index:999 et redis nous. :)

kronos12
Invité n'ayant pas de compte PHPfrance

01 avr. 2011, 13:24

Avec un bout de code je pense que ce sera plus clair :wink:
<img src="BA.jpg" style="position:absolute; z-index:1" border="0" />
<img src="repère.png" style="position:absolute; left:530px; top:480px; z-index:2" 
alt="Une image test" onmouseover="montre('<?php echo "$var"; ?>');" onmouseout="cache();" id="$var"/>


Voila, avec ce code ci quand je lance mon fichier, je ne vois pas du tout l'infobulle (qui doit se trouver sous les images)
En touchant au z-index, rien ne change.
Avec ce code :
<img src="BA.jpg" style="position:fixed; z-index:1" border="0" />
<img src="repère.png" style="position:absolute; left:530px; top:480px; z-index:2" 
alt="Une image test" onmouseover="montre('<?php echo "$var"; ?>');" onmouseout="cache();" id="$var"/>
Je vois mon infobulle lorsque ma souris est sur la deuxième image, mais si la taille du navigateur change, forcément la position de la deuxième image et donc de l'infobulle change ...
en fait, en terme de position de l'image le premier code est juste mais je ne vois pas l'infobulle et en ce qui concerne l'affichage de l'infobulle le deuxième est bon mais pas la position de l'image :mrgreen:

Que puis je faire pour avoir les deux ? LOL

Modérateur PHPfrance
Modérateur PHPfrance | 2575 Messages

01 avr. 2011, 13:53

Bonjour, voici des éléments de correction:
<?php
$var = "infoBulle1";
?>

<img src="image1.jpg" style="position:absolute; left:530px; top:480px; z-index:1" border="0" onmouseover="montre('<?php echo "$var"; ?>');" onmouseout="cache('<?php echo "$var"; ?>');" />

<img id="<?php echo "$var"; ?>" src="infobulle1.png" style="position:absolute; left:530px; top:480px; z-index:2; visibility:hidden" alt="Une image test" />

<script>
function montre(nom_objet){
	document.getElementById(nom_objet).style.visibility='visible';
}
function cache(nom_objet){
	document.getElementById(nom_objet).style.visibility='hidden';
}
</script>
--------//////----//---//----//////
-------//---//----//---//----//---//
------//////----//////-----//////
-----||--------||--||---||
Prendre le recul n'est pas une perte de temps.


ps: Affrontez moi dans l'arène

kronos12
Invité n'ayant pas de compte PHPfrance

06 avr. 2011, 10:38

Salut !

désolé de ne répondre qu'aujourd'hui
Je viens de tester ton code sadeq mais il ne marche pas ...
j'ai oublié de préciser que je tourne sur IE version 6 !

sinon, n'y a t'il pas un moyen de placer une image sur une autre en fonction des coordonnées de la première image ?
par exemple, l'image A se trouve aux coordonnées x,y,z de l'image B, comme ça la position de la deuxième image ne se décalerait pas

J'ai cherché sur internet mais je ne trouve rien, à part des infos sur les images réactives ... :(

kronos12
Invité n'ayant pas de compte PHPfrance

13 avr. 2011, 10:24

Salut,

finalement j'ai choisi une autre méthode : j'ai passé ma première image en image de fond et je place les autres images dessus grace à l'attribut style
j'obtiens bien ce que je veux.

Merci de votre aide