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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mettre de l'HTML dans un layer (type infobulle) en JavaScript.

Master_Jul

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 !

Publicité

oirom

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

Code :

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

nico168

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>

Master_Jul

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:

Master_Jul

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 :

<img src="rainbow.gif" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com">
</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".

Master_Jul

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

FlorentG

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')

nico168

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

FlorentG

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

oirom

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

Code :

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

Publicité

FlorentG

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

oirom

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.

FlorentG

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

gamer-fou

AHHHHHH§§§!!!

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!

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.

Page générée en 0.043 secondes