Sujet Précédent Sujet Suivant

Infobulle IE/Mozilla

Fermé
Justvincent - 15 avril 2007 à 21:40
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 19 avril 2007 à 13:11
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
A voir également:

6 réponses

Réponse 1 / 6
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
17 avril 2007 à 10:47
salut,

te faut-il une info-bulle avec un rendu particulier ou la version standard te suffit-elle ?
si tu veux une simple info-bulle, utilise l'attribut universel général 'title'. il s'affiche dans IE & Firefox et demande beaucoup moins de code !!! 
<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
3
Justvincent Messages postés 4 Date d'inscription dimanche 15 avril 2007 Statut Membre Dernière intervention 19 avril 2007
19 avril 2007 à 12:34
Bonjour,
je viens de suivre ta suggestion et effectivement cela fonctionne bien.
Je vais garder cette idée sous le coude ; si je n'arrive à rien d'autre, je ferai avec.

Merci.
Tchô
0
Réponse 2 / 6
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
15 avril 2007 à 22:37
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"
.
1
Réponse 3 / 6
laurent
15 avril 2007 à 21:47
Bonjour,

Exemple :

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


La balise est donc title=""

bonne journée
0
Réponse 4 / 6
Justvincent Messages postés 4 Date d'inscription dimanche 15 avril 2007 Statut Membre Dernière intervention 19 avril 2007
17 avril 2007 à 00:47
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
17 avril 2007 à 07:53
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;
}
}
0
Justvincent Messages postés 4 Date d'inscription dimanche 15 avril 2007 Statut Membre Dernière intervention 19 avril 2007
19 avril 2007 à 12:31
Bonjour,
j'avais été faire un tour sur ljouanneau.com sur les conseil d'une copine... et j'avais trouvé ça obscur pour moi.

Ce script "tooltip.js" je dois le mettre où ? Je l'enregistre sous...? Quoi ?
Il doit figurer dans mon dossier comme toutes les imges et pages du site ; c'est ça ?

Je suis tout novice dans ce domaine...

Sinon ton site sur le pays basque est trés sympa, je vais y retourner pour apprendre des trucs...

Tchô
0
Justvincent Messages postés 4 Date d'inscription dimanche 15 avril 2007 Statut Membre Dernière intervention 19 avril 2007
19 avril 2007 à 12:37
Et, encore une chose..., dis-moi ton tableau, il est bien dans le body ? ou head ?
0
Réponse 6 / 6
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
19 avril 2007 à 13:11
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.
0

Discussions similaires

Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
celine -

3 réponses
Prélèvement "CB Google" inconnu. Arnaque ?
sandrinepommelet -
Roanisel -

29 réponses
arnaque cb google sur mon compte bancaire
patooun -
samgunsjovirow -

1 réponse