18041 sujets

Questions générales et questions de débutants

Affichage d'une Infobulle

Bonjour à tous,
j'aimerai mettre en place un système d'infobulle lorsqu'un visiteur survole une partie d'une image présente sur mon site.
Dans cette infobulle j'aimerai aussi mettre un lien vers une autre page
Pour se faire, j'ai insérer des zones cliquable sur mon image (ainsi je peux aussi mettre un document en téléchargement)
Après une recherche sur le web, j'ai réussi soit à afficher l'infobulle au bon endroit(c'est à dire sur la zone cliquable) mais sans pouvoir cliquer sur le lien
soit afficher l'infobulle toujours au même endroit (en haut de ma page) Smiley biggol
J'aimerai donc afficher l'infobulle au bon endroit et pouvoir cliquer sur le lien
voici le code (désolé c'est un peu long):

script javascript:
function GetId(id)
{
	return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function move(e)
{
	//alert("coucou");
	if(i) // Si la bulle est visible, on calcul en temps reel sa position ideale
	{	 
		if (navigator.appName!="Microsoft Internet Explorer") // Si on est pas sous IE
		{ 
			GetId("curseur").style.left=e.pageX + 5+"px";
			GetId("curseur").style.top=e.pageY + 10+"px";
		}
		else 
		{ 
			if(document.documentElement.clientWidth>0) 
			{
				GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
				GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
			}
			else
			{
				GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
				GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
			}
		}
	}
}

function montre(text)
{
	if(i==false) 
	{
	  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
	  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
	  i=true;
	}
}
function cache()
{
	if(i==true)
	{
		GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
		i=false;
	}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à  jour la position de la bulle.

function tempo()
{
	setTimeout("cache()",3000);
}
[code]
[b]script html[/b]
[code]<div id="curseur" class="infobulle">
</div>
<IMG NAME="projet6400" SRC="projet640.png" WIDTH="640" HEIGHT="394" BORDER="0" USEMAP="#projet640"/>
<MAP NAME="projet640">
<AREA SHAPE="rect" COORDS="5,0,148,60" HREF="www/doc1.ppt" TARGET="_self" ALT="doc1"  onmouseover="montre('un peu de texte, <a href=\'http://www.google.fr\'>lien</b> !'); " onmouseout="tempo();">
<AREA SHAPE="rect" COORDS="3,148,123,197" HREF="doc2.ppt" TARGET="_self" ALT="doc2" onmouseover="move();montre('autre texte, <a href=\'http://www.google.fr\'>lien</b> !');" onmouseout="tempo();">
</MAP>


script css
.infobulle
{
	position: absolute;   
	visibility : hidden;
	border: 1px solid Black;
	padding: 10px;
	font-family: Verdana, Arial;
	font-size: 10px;
	background-color: #FFFFCC;
}


Vous pouvez essayer de commenter la ligne 
document.onmousemove=move;
dans le script javascript et vous pourrez voir qu'on peut alors cliquer sur le lien mais que l'infobulle ne s'affiche plus au bon endroit

Merci Smiley smile
Salut !
difficile de comprendre cela, puisque justement le zonage d'une image crée un lien cliquable alors normalement c' est comme cela,


<MAP name=FPMap0>

<AREA shape=RECT  coords=27,38,134,127 href="tonlien.php"
 onMouseOver="javascript:Labule('Alain Coachon ',1);" 
onMouseOut="javascript:EfaceHelp();"  >

<AREA shape=RECT  coords=198,57,260,144 href="un autre.php" 
onMouseOver="javascript:Labule('Fortune Ayivi Fandalor',1);" 
onMouseOut="javascript:EfaceHelp();"  >

</MAP>


donc si le javascript est bien fait, l' infobule est juste sous la souris,
et donc on peut cliquer la zone !!
Modifié par FoxLeRenard (22 Apr 2009 - 13:50)
Bonjour
désolé je ne vous ai pas mis le html
En effet avec tu aurai pu voir que il y a déjà un href dans mes area mais qui sert à télécharger un fichier. Donc il faut que j'ai la possibilité d'avoir 2 liens : un pour le clic et un autre pour "une redirection"

PS: je suis entrain de voir si je ne peux pas tout faire en css, html sans utiliser de js
Sujet clos
Aller à