Faire sortir une infobulle du cadre de son conteneur ?

Faire sortir une infobulle du cadre de son conteneur ? - HTML/CSS - Programmation

Marsh Posté le 16-07-2008 à 01:50:28    

Salut,
 
J'ai un gros problème avec mes infobulles... Elles sont comprises dans un JS qui a ces paramètres (obligatoires) :
 

Code :
  1. width="660px"
  2. height="80px"


 
Ce JS est lui même intégré dans du PHP par :
 

Code :
  1. echo '<SCRIPT LANGUAGE="JavaScript">...</script>'


 
Le problème c'est que quand je passe sur le déclencheur, les infobulles ne sortent pas du cadre de width="660px" height="80px", donc leur contenu est caché ! Ma question est : comment faire sortir l'infobulle du cadre (équivalent à une iframe sûrement) ?
 
 
 
Voici comment j'appelle le CSS :
 

Code :
  1. <a class=\"thumbnail\" href=\"recherche.php?mot=$titre\"><img border=\"0\" height=\"80\" width=\"60\" src=\"'.$resultat['image'].'\">'.addslashes($data).' <span><font style=\"color:#0000FF;\">site</font><br><img border=\"0\" height=\"200\" width=\"150\" src=\"'.$resultat['image'].'\"><br />'.$resultat['titre'].'<br /><br /><div bgcolor=\"#FFFFFF\">Aper&ccedil;u :<br /><br /></div></span></a>


 
Et voici le CSS :
 

Code :
  1. <style type="text/css">
  3. .thumbnail{
  4. text-decoration: none;
  5. position: relative;
  6. z-index: 0;
  7. }
  9. .thumbnail:hover{
  10. background-color: transparent;
  11. z-index: 50;
  12. }
  14. .thumbnail span{ /*CSS for enlarged image*/
  15. position: absolute;
  16. background-color: #000;
  17. padding: 5px;
  18. left: -1000px;
  19. border: 1px solid gray;
  20. overflow:hidden;
  21. width:160px;
  22. height:345px;
  23. visibility: hidden;
  24. color: white;
  25. text-decoration: none;
  27. }
  29. .thumbnail span img{ /*CSS for enlarged image*/
  30. border-width: 0;
  31. padding: 2px;
  32. }
  34. .thumbnail:hover span{ /*CSS for enlarged image on hover*/
  35. visibility: visible;
  36. top: 0;
  37. left: 0px; /*position where enlarged image should offset horizontally */
  39. }
  41. </style>


 
Merci pour votre aide, je désespère depuis 2 jours...


Message édité par jycsd le 16-07-2008 à 08:49:12
Reply

Marsh Posté le 16-07-2008 à 01:50:28   

Reply

Marsh Posté le 16-07-2008 à 06:25:08    

tu vires le overflow:hidden de ".thumbnail span "  
et ca marchera :o

Reply

Marsh Posté le 16-07-2008 à 08:10:46    

Hélas non :(
 
J'ai aussi essayé en foutant des overflow: visible; partout... Nada ! Ca agit à l'intérieur du cadre...
 
Mais "accessoirement" merci pour ton aide.


Message édité par jycsd le 16-07-2008 à 08:13:52
Reply

Marsh Posté le 16-07-2008 à 08:36:39    

ben tu n'as pas que ce cadre en overflow:hidden, tu dois forcément avoir des parents en overflow:hidden.
 
accessoirement, le meilleur est une infobulle purement en JS

Reply

Marsh Posté le 16-07-2008 à 08:51:16    

Non, c'est une seule page avec tout dessus. Y'a pas d'autre overflow:hidden.
 
Le problème vient sûrement du JS non ?
 

Code :
  1. <SCRIPT LANGUAGE="JavaScript">
  2. var direction=0 
  3. var sliderwidth="660px"
  4. var sliderheight="80px"
  5. var sliderleft="15px"
  6. var slidertop="0px"
  7. var pixelstep=1
  8. var timespeed=25
  9. slidebgcolor="#290016"
  10. var himgspace=""
  11. var vimgspace="<div id=vimgspace></div>"
  12. var slideshowspace=0
  13. var moveslide=new Array()
  15. moveslide[0]="' . $myimgs[1] . '"
  16. moveslide[1]="' . $myimgs[2] . '"
  17. moveslide[2]="' . $myimgs[3] . '"
  18. moveslide[3]="' . $myimgs[4] . '"
  19. moveslide[4]="' . $myimgs[5] . '"
  20. moveslide[5]="' . $myimgs[6] . '"
  21. moveslide[6]="' . $myimgs[7] . '"
  22. moveslide[7]="' . $myimgs[8] . '"
  23. moveslide[8]="' . $myimgs[9] . '"
  24. moveslide[9]="' . $myimgs[10] . '"
  25. moveslide[10]="' . $myimgs[11] . '"
  27. </script>


 

Reply

Marsh Posté le 16-07-2008 à 08:54:34    

Ahh non j'ai trouvé un autre overflow hidden dans un js appelé !
 
Mais si je le vire, le cadre est plus limité !

Reply

Marsh Posté le 16-07-2008 à 08:55:43    

il est bien moise en tout ca ce code :(

Reply

Marsh Posté le 16-07-2008 à 09:01:16    

moisi ?
 
Pas tant que ça...
 
J'ai testé avec des iframes et tout... Mais la nouvelle question c'est :
Comment délimiter mon cadre sans overflow hidden ? :/

Reply

Marsh Posté le 16-07-2008 à 09:12:26    

J'ai réussit à faire l'inverse en mettant  
 

Code :
  1. <div style="overflow:visible;"><span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px;">'+moveslide+'</span></div>


 
dans le JS appelé
 
et
 

Code :
  1. <div style="overflow: hidden;"><script language="JavaScript" src="modules/scrollpub/scroller_vh.js"></script></div>


 
Dans le code qui l'appelle...
 
 :o  

Reply

Marsh Posté le 16-07-2008 à 09:52:33    

Y'a pas un truc CSS pour dire au span de l'infobulle d'apparaître en _parent ?

Reply

Marsh Posté le 16-07-2008 à 09:52:33   

Reply

Marsh Posté le 16-07-2008 à 10:44:25    

Bon comme j'en ai ma claque, j'ai fait différemment :
 

Code :
  1. $myimgs [$i] = '<a onMouseOver=\"ChangeMessage(\'.$resultat['titre'].\',\'blocaff\')\" onMouseOut=\"ChangeMessage(\'\',\'blocaff\')\" href=\"recherche.php?mot=$titre\"><img border=\"0\" height=\"80\" width=\"60\" src=\"'.$resultat['image'].'\">'.addslashes($data).'</a>';


 
en gros il affiche les infos dans le div blocaff...
 
Mais j'ai un PB de syntaxe avec : "ChangeMessage(\'.$resultat['titre'].\',\'blocaff\')\"
 
Le mieux que j'arrive à faire, c'est lui faire faire afficher .$resultat['titre']. écrit tel quel !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed