Infobulle IE/Mozilla

Bonjour,

Exemple :

<img src="image.jpg" title="Mon image est super" width="750" height="148" />


La balise est donc title=""

bonne journée

Salut a tous,
oui pour IE (et tous les navigateurs en général si l'image est absente par exemple) ça affichera la description:

ALT="ta_description"

.
Pour Firefox, ça ne suffit pas, pour avoir l'info bulle il rajouter:

TITLE="ma_description"

. Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Oui, oui, oui...
Je vois... pas grand chose en fait !

Mo j'ai ça :
<div onmouseover=" tooltip.show(this)"
onmouseout="tooltip.hide(this)"
title="Aïkido, Yoga, Stretching, Piscine">voici
les activités que je
pratique<br>
</div>

Et ça, ça fonctionne sous IE et pas avec Mozilla Firefox.
Pourtant je vois bien apparaître ce fameux title="...

Donc re-HELP !!!
Ou sinon je suis prenneur de tout autre système permettant d'avoir une fenêtre qui s'ouvre en passant ou cliquant sur une image MAIS pas un lien vers une autre page!

Merci

Aaaaah ! mais je comprends mieux !
Tu a mis un div pour qu'il s'affiche au passage de la souris.
Ton problème viens sans doute du script.
Vois ici: http://www.abarka.eu rubrique "curiosités" par exemple.
Tu dois mettre dans le head ceci: (ça fait appel au script en bas du post)

<script language="javascript" src="../scripts/tooltip.js" type="text/javascript"></script>

Ensuite, dans la liste des liens (mon cas) tu fais un tableau avec les n° auquels tu met le texte a afficher au passage de la souris (possibilité de mettre un style, couleurs etc...):

<table width="620" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="200"><div id="MAJ" style="position:relative; z-index:1;" class="maj">
          Modifi&eacute; le: 29 - 01 - 2006      </div></td>
      <td class="liens"><a href="betizua.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Ces vaches sauvages du Pays Basque">1&nbsp;</a><a href="cadeau.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le makhila: un cadeau exceptionnel">&nbsp;2 </a><a href="caractere.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="traits de caract&egrave;re">&nbsp; 3</a><a href="dates.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Quelques dates">&nbsp; 4</a><a href="drapeau.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le drapeau basque">&nbsp; 5</a><a href="droit.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le droit basque">&nbsp; 6</a><a href="egalite.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="L'&eacute;galit&eacute; des sexes">&nbsp; 7</a><a href="emigration.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="L'&eacute;migration chez les basques">&nbsp; 8</a><a href="hotel_monnaie.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="L'hotel de la monnaie">&nbsp; 9</a><a href="irrintzina.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="L'irrintzina (fameux cri basque)">&nbsp; 10</a><a href="justice_makila.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="La justice au makhila">&nbsp; 11</a><a href="makila_histoire.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le makhila dans l'histoire">&nbsp; 12</a><a href="monnaie_basque.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="La monnaie basque">&nbsp; 13</a><a href="sentences_Akelarre_Es.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Les sentences du proc&egrave;s des sorci&egrave;res (espagnol)">&nbsp; 14</a><a href="sentences_Akelarre_Fr.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Les sentences du proc&egrave;s des sorci&egrave;res (fran&ccedil;ais)">&nbsp; 15</a><a href="type.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le type basque">&nbsp; 16</a><a href="Zugarramurdi_B.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Zugarramurdiko leizea">&nbsp; 17</a><a href="Zugarramurdi_Es.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Las cuevas de Zugarramurdi">&nbsp; 18</a><a href="Zugarramurdi_Fr.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Les grottes de Zugarramurdi">&nbsp; 19</a></td>

J'ai fait un copier à l'arrache mais faudra adapter.
Ci-dessous, le script a enregistrer sous tooltip.js:
/**
*
* Can show a tooltip over an element
* Content of tooltip is the title attribute value of the element
* copyright 2004 Laurent Jouanneau. http://ljouanneau.com/soft/javascript
* release under LGPL Licence
* works with dom2 compliance browser, and IE6. perhaps IE5 or IE4.. not Nestcape 4
*
* To use it :
* 1.include this script on your page
* 2.insert this element somewhere in your page
* <div id="tooltip"></div>
* 3. style it in your CSS stylesheet (set color, background etc..). You must set
* this two style too :
* div#tooltip { position:absolute; visibility:hidden; ... }
* 4.the end. test it ! :-)
*
*/


// create the tooltip object
function tooltip(){}

// setup properties of tooltip object
tooltip.id="tooltip";
tooltip.offsetx = -55; //position axiale de la bulle
tooltip.offsety = -40; //position verticale de la bulle
tooltip.x = 0;
tooltip.y = 0;
tooltip.snow = 0;
tooltip.tooltipElement=null;
tooltip.title_saved='';
tooltip.saveonmouseover=null;
tooltip.ie4 = (document.all)? true:false; // check if ie4
tooltip.ie5 = false;
if(tooltip.ie4) tooltip.ie5 = (navigator.userAgent.indexOf('MSIE 5')>0 || navigator.userAgent.indexOf('MSIE 6')>0);
tooltip.dom2 = ((document.getElementById) && !(tooltip.ie4||tooltip.ie5))? true:false; // check the W3C DOM level2 compliance. ie4, ie5, ns4 are not dom level2 compliance !! grrrr >:-(


/**
* Open ToolTip. The title attribute of the htmlelement is the text of the tooltip
* Call this method on the mouseover event on your htmlelement
* ex : <div id="myHtmlElement" onmouseover="tooltip.show(this)"...></div>
*/
tooltip.show = function (htmlelement) {

if ( this.ie4 || this.dom2 ) {
// we save text of title attribute to avoid the showing of tooltip generated by browser
text=htmlelement.getAttribute("title");
this.title_saved=text;
htmlelement.setAttribute("title","");
}
if(this.dom2){
this.tooltipElement = document.getElementById(this.id);
this.saveonmouseover=document.onmousemove;
document.onmousemove = this.mouseMove;
}else if ( this.ie4 ) {
this.tooltipElement = document.all[this.id].style;
this.saveonmouseover=document.onmousemove;
document.onmousemove = this.mouseMove;
}

if ( this.ie4 || this.dom2 ) {
if(this.ie4) document.all[this.id].innerHTML = text;
else if(this.dom2) document.getElementById(this.id).innerHTML=text;

this.moveTo(this.x + this.offsetx , this.y + this.offsety);

if(this.ie4) this.tooltipElement.visibility = "visible";
else if(this.dom2) this.tooltipElement.style.visibility ="visible";
}
return false;
}

/**
* hide tooltip
* call this method on the mouseout event of the html element
* ex : <div id="myHtmlElement" ... onmouseout="tooltip.hide(this)"></div>
*/
tooltip.hide = function (htmlelement) {
if ( this.ie4 || this.dom2 ) {
htmlelement.setAttribute("title",this.title_saved);
this.title_saved="";

if(this.ie4) this.tooltipElement.visibility = "hidden";
else if(this.dom2) this.tooltipElement.style.visibility = "hidden";

document.onmousemove=this.saveonmouseover;
}
}



// Moves the tooltip element
tooltip.mouseMove = function (e) {
// we don't use "this", but tooltip because this method is assign to an event of document
// and so is dreferenced

if(tooltip.ie4 || tooltip.dom2){

if(tooltip.dom2){
tooltip.x = e.pageX;
tooltip.y = e.pageY;
}else{
if(tooltip.ie4) { tooltip.x = event.x; tooltip.y = event.y; }
if(tooltip.ie5) { tooltip.x = event.x + document.body.scrollLeft;
tooltip.y = event.y + document.body.scrollTop; }
}
tooltip.moveTo( tooltip.x +tooltip.offsetx , tooltip.y + tooltip.offsety);
}
}

// Move the tooltip element
tooltip.moveTo = function (xL,yL) {
if(this.dom2){
this.tooltipElement.style.left = xL +"px";
this.tooltipElement.style.top = yL +"px";
}else if(this.ie4){
this.tooltipElement.left = xL;
this.tooltipElement.top = yL;
}
} Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Salut a tous,
Dalida a raison, si c'est juste pour une infobulle toute simple, la balise title suffira amplement. Cette balise, tu la met dans le

<a href="dossier_image/image.jpg" title="mon_texte_a_afficher_dans_infobulle."><img src="dossier_image/image-vignette.gif" alt="Agrandir l'image." title="Agrandir l'image." width="72" height="100" border="0"  /></a>

Mon tooltip a été fait pour avoir les n° pour accéder aux pages suivantes et ont étés regroupés dans une cellule d'un tableau, sépararés par la barre verticale (ALT GR + 6).
Le fichier doit etre enregistré sous tooltip.js et tu peux le mettre dans un dossier. Il faudra simplement indiquer son chemin dans le head (<script language="javascript" src="/dossier/tooltip.js" type="text/javascript"></script>).
Ce fichier js est paramétrable (couleur, police, taille police etc...).
Ah! une chose: moi, j'ai fait en plus, un script pour ouvrir un pseudo pop up qui s'adapte au contenu qu'il reçoit. Comme sur le diaporama d'abarka. S'il t'interresse je peux te l'envoyer aussi.
Le bonheur est la seule chose que l'on peut donner sans l'avoir.