Remplacer les "title" par des popups

Soyez le premier à donner votre avis sur cette source.

Vue 8 908 fois - Téléchargée 499 fois

Description

Ce script permet de remplacer les attribut "title" sur tous les éléments de la page par une popup style infobulle. Il y a certainement des améliorations à apporter (dans la détection du navigateur par exemple, je n'ai fais que copier la fonction position() et la fonction getElementsByAttribute())

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Page de test</title>
    <style type="text/css">
        .popupCommentaire
        {
        	position:absolute;
        	left:0px;
        	top:0px;
        	visibility:hidden;
        	border:1px solid #000000;
        	background-color:#FFFFE1;
        	width:auto;
        	height:auto;
        	padding: 3px;
        	padding-left: 10px;
        	padding-right:10px;
        }
    </style>
    <script language="javascript" type="text/javascript">
    /*********************************************************************

  • Robert Nyman *
  • getElementByAttributes *
  • Sélection d'un tableau d'éléments en fonction de leur attributs *
  • *
  • Syntaxe : *
  • getElementByClass(objet, balise, attribut, <valeur>) *
  • *
  • objet : Objet de recherche (document.body par ex) *
  • balise : Balise de recherche ('*' pour toutes les balises) *
  • attribut : Attribut a rechercher *
  • valeur : Optionnel - Spécifier la valeur de l'attribut *
                                                                                                                                          • /
/* Copyright Robert Nyman, http://www.robertnyman.com Free to use if this text is included
  • /
function getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue) { var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|\\s)" + strAttributeValue + "(\\s|$)") : null; var oCurrent; var oAttribute; for(var i=0; i<arrElements.length; i++) { oCurrent = arrElements[i]; oAttribute = oCurrent.getAttribute(strAttributeName); if (typeof oAttribute == "string" && oAttribute.length > 0) { if (typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){ arrReturnElements.push(oCurrent); } } } return arrReturnElements; } </script> </head> <body> <span title="un texte très long dans le but de créer un commentaire sur deux lignes pour tester l'utilisation du remplacement des attributs 'title' par une popup ceci afin de voir la ltotalité de ce texte En plus ca prends en compte les retours à la ligne" style="cursor:help; border-bottom: 1px dotted #000000;">un texte dans le style commentaire</span> <script language="javascript" type="text/javascript"> var reg = new RegExp('\n', 'g'); /************************************************************
  • position de la souris et du div contenant le commentaire *
                                                                                                                        • /
var x = 0; var y = 0; function position(e) { x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; x += 10; y += 10; var larg = 0; if (document.body) larg = (document.body.clientWidth); else larg = (window.innerWidth); if(x > (0.85 * larg)) { x = 0.85 * larg; } window.document.getElementById('popupCommentaire').style.left = x + 'px'; window.document.getElementById('popupCommentaire').style.top = y + 'px'; } if (navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE); document.onmousemove = position; /***************************************
  • Remplacement des title par la popup *
                                                                              • /
var eltsAvecTitle = getElementsByAttribute(document.body, '*', 'title') for(i = 0; i < eltsAvecTitle.length; ++i) { eltsAvecTitle[i].onmouseover = function() { if(!this.titleText) this.titleText = this.title.replace(reg, '<br />\n'); this.title = ''; window.document.getElementById('txt_popupCommentaire').innerHTML = this.titleText; window.document.getElementById('popupCommentaire').style.visibility = 'visible'; } eltsAvecTitle[i].onmouseout = function() { window.document.getElementById('popupCommentaire').style.visibility = 'hidden'; window.document.getElementById('txt_popupCommentaire').innerHTML = ''; } } </script> <div id="popupCommentaire" class="popupCommentaire"> <center id="txt_popupCommentaire"></center> </div> </body> </html>

Conclusion :


Reste à faire :
- Une meilleure détection du navigateur plutôt qu'en passant par le navigator.appName (c'est caca, mais j'ai laissé quand même)
- Une compatibilité avec Opera (en fait, j'ai pas cherché à la faire, parce que le title qui est de base avec Opera fais exactement la même chose que ça, celui ci a été développé pour IE principalement)

Testé sous Firefox 2, IE6 et IE5.5 (il semblerait qu'il y ait un bug avec IE5.01)
Le fonctionnement voulu est aussi visible sous IE5.01 et sous IE4 (on voit la totalité du texte). J'ai pas essayé avec des textes vraiment très très long :D

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

themioux
Messages postés
51
Date d'inscription
dimanche 29 mai 2005
Statut
Membre
Dernière intervention
14 avril 2011

C'est vrai, c'est pas une popup, mais je savais pas trop comment l'exprimer :D
cs_DARKSIDIOUS
Messages postés
15815
Date d'inscription
jeudi 8 août 2002
Statut
Modérateur
Dernière intervention
4 mars 2013
94
Ce n'est pas un popup mais une simulation d'info-bulle.

Voir ici pour un exemple en pur css qui marche très bien (bon cela oblige de créer un span dans la balise a par contre) :
<STYLE>
a.info{
position:relative;
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{
/*le contenu de la balise span ne
sera visible que pour l'état a:hover */
display:block;
position:absolute;


top:2em; left:2em; width:15em;
border:1px solid #6699cc;
background-color:#eeeeee; color:#6699cc;
text-align: justify;
font-weight:none;
padding:1px;

}
</STYLE>
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
30
a vrai dire, j'ai pas reussi a gerer le positionnement avec du CSS... MAIS :
#linkbar>a{
background-color: #E0F0FF;
}
#linkbar>span{
background-color: #00AAFF;
color:#FFF;
}
#linkbar>a>span, #linkbar>span>span{
display:none;
font-size:small;
}
#linkbar>a:hover>span, #linkbar>span:hover>span{
display:block;
position:absolute;
margin-left:5%;
color:#00AAFF;
}

avec le code xhtml suivant :
<td colspan="2" id="linkbar">

index

La page d'accueil de ce site
cs_whoetbe
Messages postés
9
Date d'inscription
lundi 8 mars 2004
Statut
Membre
Dernière intervention
21 novembre 2008

ha oui, c'est intéressant en css ? dis nous !
themioux
Messages postés
51
Date d'inscription
dimanche 29 mai 2005
Statut
Membre
Dernière intervention
14 avril 2011

Arf ! Je savait pas, justement j'avais fais une recherche rapide sur google et j'avais pas trouvé :D

Tu aurais pas un lien ou un exemple ?

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (themioux)