11548 sujets

JavaScript, DOM et API Web HTML5

Mettre une image dans une infobulle Javascript

Bonjour à tous Smiley smile

J'utilise un script d'infobulle trouvé sur l'éditeur javascript.
Je sais, ce n'est pas accessible, tout ça, mais je vais prendre mes dispositions pour que les informations soient aussi accessibles pour les navigateurs textes ou sans javascript.

Voici le code de ma page:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Tests de Sylvain</title>
		<style type="text/css">
			#infobulle{
				position: absolute;	
				visibility : hidden;
				border: 1px solid #CCCCCC;
				padding: 10px;
				font-family: Verdana, Arial;
				font-size: 0.7em;
				background-color: Yellow;
				width:150px;
				height:200px;
			}
		</style>
		<script type="text/javascript">
			/*******************
			* infobulles
			* Ben, 23/07/2005
			*******************/
			
			// espacement entre le curseur et l'infobulle
			cursor_padding = 5;
			
			// gestion des navigateurs (IE, MOZ, NS)
			nav = navigator.appName;
			
			ie = document.all;
			ns = document.layers;
			fi = document.getElementById && !document.all;
			
			if(!ie && !ns && !fi){
				alert("navigateur "+nav+" incompatible !");	
			}
			
			if(!ie){
				document.captureEvents(Event.MOUSEMOVE); 	
			}
			
			document.onmousemove = get_mouse;
			
			// recupere les coordonnees de la souris
			// les affecte au style de la div infobulle
			function get_mouse(e){
				if(ie){
					x = event.x;
					y = event.y;
					window.status = x;
				}else{
					x = e.pageX;
					y = e.pageY;
				}	
				
				bubble = document.getElementById("infobulle");
				bubble.style.left = x + cursor_padding+'px';
				bubble.style.top = document.documentElement.scrollTop + y + cursor_padding+'px';
				
			}
			
			
			// affiche la bubble
			function affiche(text){
				bubble.style.visibility = "visible";
					  bubble.style.display = "block";
				
				// bubble.innerHTML = text; 
				// déconseillé pas aux normes
				
				longueur_bubble = bubble.firstChild.length;
				bubble.firstChild.replaceData(0, longueur_bubble, text); 
			}
			
			// cache la bubble
			function cache(){
				bubble.style.visibility = "hidden";
					  bubble.style.display = "none";
			}
		</script>
	</head>
	<body>

		<div id="infobulle">bubble</div>
		<div onmouseover="javascript:affiche('Malheur, tu es maudit !');" onmouseout="javascript:cache();">4 8 15 16 23 42</div>
	</body>
</html>


Voilà. Je suis assez nul en javascript, mais je pense que vous comprendrez son fonctionnement...
Seulement, il y a un soucis: j'aimerai pouvoir mettre des images dans les infobulles.
Toujours les même, une image 1.png avant le texte de l'infobulle, et une image 2.png après le texte de l'infobulle.
Celà servira à la mise en page de l'infobulle.

J'ai mis essayé de les insérer, sans succès, et je viens donc demander secours ici Smiley cligne
Je vous remercie d'avance.

Voici une page de test.
Sujet clos
Aller à