Remplacer les "title" par des popups

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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)