Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
534 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mettre de l'HTML dans un layer (type infobulle) en JavaScript.

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Mettre de l'HTML dans un layer (type infobulle) en JavaScript.

n°977027
Master_Jul
Posté le 09-02-2005 à 21:19:54  profilanswer
 

Hello,
 
Je voudrais afficher un pop up d'info formaté (passage à la ligne, liens) lorsque je survole la zone d'une image.
 
Voilà ma référence :
http://www.bosrup.com/web/overlib/
 
Déplacez la souris sur les différents liens pour voir ce que ça donne :
http://www.bosrup.com/web/overlib/?Features
 
Le truc c'est que j'aimerais pouvoir faire ça moi même ou avoir accès à un script de beaucoup plus simple car je dois m'en servir en projet et si nécessaire, expliquer comment celà marche en détail...
 
Pour info voilà la tête de ce qu'il faudrait expliquer:
http://www.bosrup.com/web/overlib/overlib.js
 
Merci !

mood
Publicité
Posté le 09-02-2005 à 21:19:54  profilanswer
 

n°977066
oirom
Posté le 09-02-2005 à 21:54:20  profilanswer
 

Et pourquoi pas sans javascript, grace à la magie du CSS ;)
à condition que l'on peut se passer de IE.
 

Code :
  1. <style type="text/css" media="all">
  2. a .infobulle { display: none; position: absolute; }
  3. a:hover .infobulle { display: block; background-color: white; border: solid 2px gray }
  4. </style>
  5. <a href="#">lien<span class="infobulle">texte infobulle</span></a>

n°977091
nico168
Posté le 09-02-2005 à 22:37:06  profilanswer
 

tu peux partir d'un truc comme ca (aux bugs près, j'ai pas testé) :
<script >
function montre(div)
{
var item=getElementbyId(div);
item.style.visibility='visible';
item.style.display='block';
}
function cache(div)
{
var item=getElementbyId(div);
item.style.visibility='hidden';
item.style.display='none';
}
</script>
<div id="info1">infobulle</div>
<a onmouseover="montre('info1');" onmouseout="cache('info1');"><img src="femmeapoil.png"/></a>
 

n°977128
Master_Jul
Posté le 09-02-2005 à 23:20:44  profilanswer
 

Merci pour vos conseils et vos exemples. :)
 
Je n'avais pas pensé au CSS et j'essaierai aussi ce code nico168. Le navigateur sera Firefox/Mozilla exclusivement donc pas de prob. :)
 
Bonne soirée à vous deux. :hello:

n°977142
Master_Jul
Posté le 09-02-2005 à 23:35:09  profilanswer
 

En fait, je crois que ça ne pas malheureusement pas aller le CSS dans mon cas un peu chiant, c'est avec un mapping donc voilà le code :
 

Code :
  1. <img src="rainbow.gif" usemap = #example border=0>
  2. <map name=example>
  3. <area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
  4. <area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com">
  5. </map>


 
La balise <area> ne se ferme même pas et ça ne marche pas en en "simulant" une fermante </area> avec le span class entre.
 
J'ai juste trouvé qu'on pouvait afficher une infobulle "classique" avec l'attribut "title".

n°977163
Master_Jul
Posté le 09-02-2005 à 23:52:29  profilanswer
 

Comme le code Javascript n'a pas l'air de marcher, je fais des tests censés être plus simples mais ça ne passe pas :
 
<html>
  <head>
  <script language="JavaScript1.1" type="text/javascript">
  function cache()
  {
    document.info1.style.visibility='hidden';
    document.info1.style.display='none';
  }
  </script>
  </head>
  <body onload="cache();">  
    <div id="info1">infobulle</div>
  </body>
</html>
 
Et ça affiche "infobulle alors que ça ne devrait pas.
 
Edit, bon j'ai trouvé ça, je vais me débrouiller avec :
http://developpeur.journaldunet.co [...] trer.shtml
 
Le problème n'est pas tout à fait réglé, il faudrait maintenant que je puisse afficher ce div à côté de mon pointeur (pour reprendre le principe de l'infobulle). [:figti] Une idée ?


Message édité par Master_Jul le 10-02-2005 à 00:02:16
n°977213
FlorentG
Unité de Masse
Posté le 10-02-2005 à 08:05:39  profilanswer
 

C'est normal que ça ne marche pas, lorsque le navigateur rencontre la ligne "document.info1.style.visibility='hidden';", la <div> en question n'existe pas encore. Aussi, document.info1 n'existe pas, faut utiliser document.getElementById('info1')


---------------
last.fmflickr
n°977327
nico168
Posté le 10-02-2005 à 10:14:56  profilanswer
 

"Une idée ?"
oui, tu dois pouvoir recuperer les positions de la souris en javascript, et donc positionner ton div selon ces coordonnées.

n°977329
FlorentG
Unité de Masse
Posté le 10-02-2005 à 10:19:01  profilanswer
 

Dans l'objet event, renvoyé par un événement genre onmouseover, y'a les propriétés clientX et clientY. Par contre faut un code un peu spécial pour récupérer l'event suivant si t'es sous IE ou Gecko. Vois cet article chez quirksmode.org qui explique tout ça en détail :)


---------------
last.fmflickr
n°977575
oirom
Posté le 10-02-2005 à 13:18:42  profilanswer
 

il est toujours possible de privilégier le css,
pour les images map il existe cette methode :

Code :
  1. <style type="text/css" media="all">
  2. .infobulle { display: none; position: absolute; }
  3. /* en jouant sur le positionnement du background on utilise qu'une seule image*/
  4. #image1 { width:40px; height:20px; background: Blue url(menu.jpg) no-repeat 0px 0px; }
  5. #image2 { width:40px; height:20px; background: Red url(menu.jpg) no-repeat 40px 20px; }
  6. a:hover .infobulle, #image1:hover .infobulle, #image2:hover .infobulle { display: block; background-color: white; border: solid 2px gray }
  7. </style>
  8. <div onclick="window.open('page.html'); return false;" id="image1"><span class="infobulle">texte infobulle</span></div>
  9. <div onclick="window.open('page.html'); return false;" id="image2"><span class="infobulle">texte infobulle</span></div>
  10. <a href="#">lien<span class="infobulle">texte infobulle</span></a>

mood
Publicité
Posté le 10-02-2005 à 13:18:42  profilanswer
 

n°977593
FlorentG
Unité de Masse
Posté le 10-02-2005 à 13:37:30  profilanswer
 

Ca marchera pas sous IE ta solution :/ En plus les onclick ne vont fonctionner qu'avec JavaScript d'activé, donc accessibilité zéro :(


---------------
last.fmflickr
n°977666
oirom
Posté le 10-02-2005 à 14:30:47  profilanswer
 

vu que IE n'est pas indispensable dans ce cas.
et j'aurais du placer les <div> entre des <a></a> avec l'attribut href, plus besoin de JS.
niveau accessibilité c'est meme mieux que l'image map.

n°977685
FlorentG
Unité de Masse
Posté le 10-02-2005 à 14:46:37  profilanswer
 

Ah oui, j'avais loupé ça, que le navigateur était exclusivement Gecko :)


---------------
last.fmflickr
n°1249458
gamer-fou
AHHHHHH§§§!!!
Posté le 20-11-2005 à 21:12:37  profilanswer
 

gros up, mais mon probleme est assez similaire :
j'ai un map (carte de france avec des regions) et j'aimerai que le nom de la region s'affiche quand on passe la souris au dessus. Bien sur il y a l'attribut Title, mais j'aimerai ne pas avoir de delai d'affichage de l'infobulle, donc je me suis tourné vers le CSS (puisque je prefere aussi eviter le javascript)... et donc jsuis a la recherche d'une solution qui fonctionne aussi sur IE ;)
merci d'avance!


---------------
Music is the most high!

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mettre de l'HTML dans un layer (type infobulle) en JavaScript.

 

Sujets relatifs
Mettre un texte dans le coin droit en bas d'un div ?PHP et HTML
Existe t-il des free wares du type flash ou dreamweaver[ASP.NET JAVASCRIPT]
mime_content_type ne renvoie que text/plain :'-([Javascript][résolu] Empêcher les posts monosmilesques
type password avec target ?[HTML/Javascript] gallerie avec image survolée et affichage séparé
Modifier le type d'un élément de formulaire en javascript 
Plus de sujets relatifs à : Mettre de l'HTML dans un layer (type infobulle) en JavaScript.


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR