begin process at 2010 03 22 17:01:59
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Fenêtre & Pop-up

 > REMPLACER LES "TITLE" PAR DES POPUPS

REMPLACER LES "TITLE" PAR DES POPUPS


 Information sur la source

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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é :5 983 / 298
Auteur : themioux

Ecrire un message privé
Site perso
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon
Source avec Zip Source avec une capture FENETRE DE LOGIN par kazma
Source avec Zip Source avec une capture MESSAGES VIRTUELS par grarestephane
Source avec Zip Source avec une capture ENVOIE DE MESSAGE AUTOMATIQUE par grarestephane
Toutes les sources de la catégorie Fenêtre & Pop-up

 Sources en rapport avec celle ci

POPUP INFOBULLE par hedi_tounsi
Source avec Zip REMPLACER PLUSIEURS MOTS ET CARACTÈRES DANS UN CHAMP par abdelaziz_info
REMPLACER UN MOT DANS UNE CHAINE par askil2000
RECHERCHE ET REMPLACEMENT DE MOT INTERDIT SUR VALIDATION DE ... par Fwdavy
Source avec Zip MISE À JOUR D'UNE LISTE DÉROULANTE VIA UN POPUP par ahcorad

Commentaires et avis

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 dans le forum

Changer le Titre d'un Popup [ par NaarGuileh ] Bonjour &#224; tous, Ma question est simple, je voudrais savoir comment changer dynamiquement le titre d'une fen&#234;tre popup. J'ai essay&#233; avec generateur de popups defifante [ par soborne ] voila jai une balise mais lorsque je le met dans les template sa marche pas alors que faire pouvez vous maider peut etre faut le modifier voici la bal ouverture et fermeture d'une fenetre popup [ par sorcier_sly ] Salut tout le monde, Je voudrais ouvrir une fenetre popup avec une certaine taille. J'utilise le code suivant :window.open('nomdelafenetre', height=50 Affichage d'un popup sans intervention humaine au préalable [ par phicarre ] La plupart des exemples d'affichage de popup sont bas&#233;s sur une action au pr&#233;alable du client: formulaire-envoi-popup.J'ai une application e POPUP [ par kyript ] bonjour&nbsp; je cherche le moyen d'ouvrir un popup lors de l'arriv&#233; sur la page qui ne serai pas pris en compte comme un popupc'est a dire que w Aide avec une popup [ par iomega ] Bonjour &#224; tous, j'ai une page index.htm qui contient une liste d&#233;roulante avec des noms de ville et un bouton qui ouvre une popup nomm&#233; centrer fenetre [ par kyript ] sltet&nbsp; oui&nbsp; encore une question&nbsp; betej'ai ceci&lt;a href="comment.php?id56=&lt;?php echo $row_Recordset2['ident']; ?&gt;" onclick='wind POPUP image [ par TikoMoon ] Bonjour,Je souhaiterais cr&#233;er une popup aux dimensions d'une image. Il s'agit d'un d&#233;filement (sorte de diaporama) d'images cr&#233;er&nbsp; Anti Popup [ par flasher_13 ] Bonjour &#224; tous,depuis quelques jours je cherche un script qui me permettrais d'emp&#234;cher d'ouvrir la publicit&#233; (POPUP) qui s'ouvre au la


Nos sponsors


Appels d'offres

Sondage...

Comparez les prix


iPod touch 8Go - 2ème génération
Entre 189€ et 224€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,576 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)