Accueil > > > REMPLACER LES "TITLE" PAR DES POPUPS
REMPLACER LES "TITLE" PAR DES POPUPS
Information sur la source
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
- <!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
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Changer le Titre d'un Popup [ par NaarGuileh ]
Bonjour à tous, Ma question est simple, je voudrais savoir comment changer dynamiquement le titre d'une fenêtre popup. J'ai essayé 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és sur une action au préalable du client: formulaire-envoi-popup.J'ai une application e
POPUP [ par kyript ]
bonjour je cherche le moyen d'ouvrir un popup lors de l'arrivé 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 à tous, j'ai une page index.htm qui contient une liste déroulante avec des noms de ville et un bouton qui ouvre une popup nommé
centrer fenetre [ par kyript ]
sltet oui encore une question betej'ai ceci<a href="comment.php?id56=<?php echo $row_Recordset2['ident']; ?>" onclick='wind
POPUP image [ par TikoMoon ]
Bonjour,Je souhaiterais créer une popup aux dimensions d'une image. Il s'agit d'un défilement (sorte de diaporama) d'images créer
Anti Popup [ par flasher_13 ]
Bonjour à tous,depuis quelques jours je cherche un script qui me permettrais d'empêcher d'ouvrir la publicité (POPUP) qui s'ouvre au la
|
Derniers Blogs
[WF4] PASSAGE D'ARGUMENTS LITERAL, VISUALBASICVALUE OU LAMBDAVALUE?[WF4] PASSAGE D'ARGUMENTS LITERAL, VISUALBASICVALUE OU LAMBDAVALUE? par JeremyJeanson
Avec la sortie de la RC de Visual Studio 2010, Microsoft a mis un peu les points sur leS i en ce qui concernait le passage d'arguments. Mais nous somme un certain nombre à avoir pris ce changement comme un coup dur. Pour résumer la situation : à la sortie...
Cliquez pour lire la suite de l'article par JeremyJeanson [RIA SERVICES] INCLUDE ET DOMAINDATASOURCE[RIA SERVICES] INCLUDE ET DOMAINDATASOURCE par Audrey
Dans un de mes articles précédents , j'avais parlé des DomainDataSource avec RIA Services dans le cas d'une interface Maître - Détail. Dans le même principe, je vais parler d'une autre manière de mettre en forme ce cas d'interface avec RIA Services. Et po...
Cliquez pour lire la suite de l'article par Audrey ZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATIONZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATION par ROMELARD Fabrice
Une des nouveautés de la version V 3.0 était l'apparition de l'onglet Social qui ne fonctionnait que si le MarketPlace était activé sur son poste. Cela limitait donc son intérêt, car hors du cadre commercial USA-CANADA, peu de monde trouva...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSIPRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE
Je viens de finir la lecture du dernier livre d'
Eric Ambrosi
éditions PEARSON
Son livre donne une approche pratique de Silverlight qui sera aussi bien comprise par le développeur que par le designeur.
Tous les aspects du développement RIA sont abor...
Cliquez pour lire la suite de l'article par MPOWARE APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NETAPPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit
2 déclinaisons de Silverlight et 2 déclinaisons de Mono permettent dorénavant (ou permettront prochainement) de développer des applications .NET mobiles pour les principales plates-formes du marché :
Silverlight pour Symbian, basé sur Silverlight 2...
Cliquez pour lire la suite de l'article par odewit
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|