|
|
|
|
Bonjour,
j'ai un soucis d'infobulles...
Je voudrai mettre des infobulles liées à des images sur une page de mon site, mais toutes celles que j'ai essayées ne fonctionnent que sous IE et rien ne se produit sous Firefox Mozilla.
Je ne sais pas quoi faire, ni comment faire pour que cela fonctionne... Je suis entièrement novice dans la programmation et écriture en javascript ou script (?) ; enfin un language avec des trucs comme <a></a>...
Aussi je veux bien recevoir toute aide possible, conseils, et autres idées...
Merci
Configuration: Windows XP Internet Explorer 7.0
Salut a tous,
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...
|
Aaaaah ! mais je comprends mieux !
<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é 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 </a><a href="cadeau.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le makhila: un cadeau exceptionnel"> 2 </a><a href="caractere.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="traits de caractère"> 3</a><a href="dates.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Quelques dates"> 4</a><a href="drapeau.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le drapeau basque"> 5</a><a href="droit.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le droit basque"> 6</a><a href="egalite.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="L'égalité des sexes"> 7</a><a href="emigration.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="L'émigration chez les basques"> 8</a><a href="hotel_monnaie.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="L'hotel de la monnaie"> 9</a><a href="irrintzina.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="L'irrintzina (fameux cri basque)"> 10</a><a href="justice_makila.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="La justice au makhila"> 11</a><a href="makila_histoire.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le makhila dans l'histoire"> 12</a><a href="monnaie_basque.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="La monnaie basque"> 13</a><a href="sentences_Akelarre_Es.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Les sentences du procès des sorcières (espagnol)"> 14</a><a href="sentences_Akelarre_Fr.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Les sentences du procès des sorcières (français)"> 15</a><a href="type.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Le type basque"> 16</a><a href="Zugarramurdi_B.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Zugarramurdiko leizea"> 17</a><a href="Zugarramurdi_Es.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Las cuevas de Zugarramurdi"> 18</a><a href="Zugarramurdi_Fr.php" onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="Les grottes de Zugarramurdi"> 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,
<html> <head> <title>Attribut "title"</title> </head> <body> <p title="[title] ce texte est contenu dans un <p>">Je ne comprends pas pourquoi tu veux utiliser une balise <div>.</p> <div title="[title] ce texte est contenu dans un <div>"> <p>Mais, bon si tu préfères j'en ajoute une !</p> </div> <hr /> <img src="#" alt="[alt] alt est utilisé pour fournir un texte alternatif donc seulement quand l'élément ne peut pas être affiché" /> </body> </html> aperçu [ Mathieu ] savoir rester faignant, c'est progresser en informatique. enfin, j'essaie... |
Salut a tous,
<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. |
About config mozilla firefox Afficher bousole sur mozilla firefox Desactiver les fenetre publicitaire d'internet explorer avec mozilla Desinstaller mozilla mac Emplacement non disponible favoris ie Favoris dans mozilla Historique mozilla emplacement Ie frame Liens mozilla vista Mozilla emoticones smileys pour mac gratuit Mozilla firefox mise à jour Mozilla marche ie marche pas Mozilla s'ouvre toute Msn avec mozilla Peut on installer mozilla firefox et ie Plantage de mozilla Probleme compatibilité mozilla ie Start2 mozilla firefox
