Mettre de l'HTML dans un layer (type infobulle) en JavaScript.
Mettre de l'HTML dans un layer (type infobulle) en JavaScript. - HTML/CSS - Programmation
Marsh Posté le 09-02-2005 à 21:54:20
Et pourquoi pas sans javascript, grace à la magie du CSS 
à condition que l'on peut se passer de IE.
Code :
|
Marsh Posté le 09-02-2005 à 22:37:06
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>
Marsh Posté le 09-02-2005 à 23:20:44
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. 
Marsh Posté le 09-02-2005 à 23:35:09
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 :
|
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".
Marsh Posté le 09-02-2005 à 23:52:29
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]](https://forum-images.hardware.fr/images/perso/figti.gif "[:figti]")
Une idée ?
Message édité par Master_Jul le 10-02-2005 à 00:02:16
Marsh Posté le 10-02-2005 à 08:05:39
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')
Marsh Posté le 10-02-2005 à 10:14:56
"Une idée ?"
oui, tu dois pouvoir recuperer les positions de la souris en javascript, et donc positionner ton div selon ces coordonnées.
Marsh Posté le 10-02-2005 à 10:19:01
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
Marsh Posté le 10-02-2005 à 13:18:42
il est toujours possible de privilégier le css,
pour les images map il existe cette methode :
Code :
|
Marsh Posté le 10-02-2005 à 13:37:30
Ca marchera pas sous IE ta solution 
En plus les onclick ne vont fonctionner qu'avec JavaScript d'activé, donc accessibilité zéro 
Marsh Posté le 10-02-2005 à 14:30:47
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.
Marsh Posté le 10-02-2005 à 14:46:37
Ah oui, j'avais loupé ça, que le navigateur était exclusivement Gecko
Marsh Posté le 20-11-2005 à 21:12:37
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!
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
Marsh Posté le 09-02-2005 à 21:19:54
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 !