|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 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
 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 !
 Télécharger le zip
 Sources de la même categorie
Sources en rapport avec celle ci
 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
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|