REMPLACER LES "TITLE" PAR DES POPUPS title, popup, remplacer, Source N°44059

Information sur la source

Catégorie :Fenêtre & Pop-up Classé sous : title, popup, remplacer Niveau : Débutant Date de création : 12/09/2007 Vu / téléchargé: 4 196 / 227

Auteur : themioux

Site perso

Ecrire un message privé

Note :

9,00 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (6)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<!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>

<!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

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

test.html 5 677 octets

Télécharger le zip

Sources de la même categorie

Toutes les sources de la catégorie Fenêtre & Pop-up

Sources en rapport avec celle ci

Commentaires

Commentaire de coucou747 le 13/09/2007 06:50:51

c'est faisable entierement en CSS autrement...
Commentaire de themioux le 13/09/2007 08:12:53

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 ?
Commentaire de whoetbe le 13/09/2007 11:24:45

ha oui, c'est intéressant en css ? dis nous !
Commentaire de coucou747 le 13/09/2007 21:06:49

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">
<span class="selfURL">
index
<span>
La page d'accueil de ce site
</span>
</span>
Commentaire de DARKSIDIOUS le 14/09/2007 06:57:20 administrateur CS

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>
Commentaire de themioux le 14/09/2007 09:23:33

C'est vrai, c'est pas une popup, mais je savais pas trop comment l'exprimer :D

Ajouter un commentaire

Discussions en rapport avec ce code source

Changer le Titre d'un Popup par NaarGuileh

generateur de popups defifante par soborne

ouverture et fermeture d'une fenetre popup par sorcier_sly

Affichage d'un popup sans intervention humaine au préalable par phicarre

POPUP par kyript

Aide avec une popup par iomega

centrer fenetre par kyript

POPUP image par TikoMoon

Anti Popup par flasher_13