begin process at 2012 05 28 09:57:36
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > EXPLORATEUR DOM

EXPLORATEUR DOM


 Description

Cliquez pour voir la capture en taille normale
Un petit programme bien utile qui donne les infos des éléments de votre page. L'essentiel y est. C'est un bon début pour ce qui veulent étudier le DOM

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • <html>
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  • <meta name="generator" content="PSPad editor, www.pspad.com">
  • <title></title>
  • <style>
  • body
  • {
  • cursor : crosshair;
  • }
  • #infobulle
  • {
  • border : 1px solid black;
  • position : absolute;
  • font-size :10px;
  • font-family : Arial;
  • background-color : #ccff66;
  • filter:alpha(opacity=80);
  • -moz-opacity:0.8;
  • opacity: 0.8;
  • }
  • </style>
  • </head>
  • <script>
  • var objbull;
  • var oldx = 0;
  • var oldy = 0;
  • var oldtarg = null;
  • var bordure;
  • function getinfo(e)
  • {
  • var txt = '';
  • if (!e) e=window.event;
  • if (e.target) targ = e.target;
  • else if (e.srcElement) targ=e.srcElement;
  • if(targ.Name){txt+="<u>Name :</u> "+targ.Name+"<br>";}
  • if(targ.id){txt+="<u>Id :</u> "+targ.id+"<br>";}
  • if(targ.tagName){txt+="<u>TagName :</u> "+targ.tagName+"<br>";}
  • txt+="<center>---------------</center>";
  • txt+="X : "+targ.offsetLeft +", Y : "+targ.offsetLeft+", L: "+targ.offsetWidth+", H: "+targ.offsetHeight+"<br>";
  • var obj = targ;
  • txt+="<u>Parent :</u>";
  • var tmp = '';
  • while(obj.parentNode)
  • {
  • if(obj.id){tmp= obj.tagName + "("+obj.id+")" + "> "+tmp;}else{tmp= obj.tagName+ "> "+tmp;}
  • obj = obj.parentNode;
  • }
  • //targ.oldstyle = targ.style.border;
  • //alert(targ.oldstyle);
  • //targ.onmouseout = function () { targ.style.backgroundcolor="#333" = targ.oldstyle;targ.onmouseout = null;targ.oldstyle='';}
  • //targ.style.border = "1px solid red";
  • txt+=tmp+"<br>";
  • txt+="<center>---------------</center>";
  • var x = e.clientX;
  • var y = e.clientY;
  • if(x!=oldx || y!=oldy)
  • {
  • txt += "Souris X : "+x+", Souris Y : "+y;
  • oldx = x;
  • oldy = y;
  • with(objbull.style)
  • {
  • left = e.clientX+5+"px";
  • top = e.clientY+5+"px";
  • }
  • objbull.innerHTML = txt;
  • }
  • }
  • function init()
  • {
  • document.body.innerHTML+="<div id=\"infobulle\"></div>";
  • objbull = document.getElementById("infobulle");
  • }
  • onload = init;
  • document.onmousemove = getinfo;
  • </script>
  • <body>
  • <div id="cool" style="border : 1px solid black;">
  • Super
  • <div id="fort" coucou="bien">
  • On essaie !
  • <table id="tableau" style="border : 1px solid black;">
  • <tbody>
  • <tr><td>Case 1</td><td>Case 2</td></tr>
  • <tr><td id="case">Case 3</td><td>Case 4</td></tr>
  • </tbody>
  • </table>
  • </div>
  • <div>
  • </body>
  • </html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
  body
  {
  cursor : crosshair;
  }
  #infobulle
  {
  border : 1px solid black;
  position : absolute;
  font-size :10px;
  font-family : Arial; 
  background-color : #ccff66;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  opacity: 0.8;

  }
  </style>
 
  </head>
   <script>
  var objbull;
  var oldx = 0;
  var oldy = 0;
  var oldtarg = null;
  var bordure;
  function getinfo(e)
  {
  var txt = '';
  
  if (!e) e=window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ=e.srcElement;
	if(targ.Name){txt+="<u>Name :</u> "+targ.Name+"<br>";}
  if(targ.id){txt+="<u>Id :</u> "+targ.id+"<br>";}
  if(targ.tagName){txt+="<u>TagName :</u> "+targ.tagName+"<br>";}
  txt+="<center>---------------</center>";
  txt+="X : "+targ.offsetLeft +", Y : "+targ.offsetLeft+", L: "+targ.offsetWidth+", H: "+targ.offsetHeight+"<br>";
  var obj = targ;
  txt+="<u>Parent :</u>";
  
  var tmp = '';
  while(obj.parentNode)
  {
   if(obj.id){tmp= obj.tagName + "("+obj.id+")" + "> "+tmp;}else{tmp= obj.tagName+ "> "+tmp;}
   obj = obj.parentNode;
  }
  
  //targ.oldstyle = targ.style.border;
  //alert(targ.oldstyle);
  
  //targ.onmouseout = function () { targ.style.backgroundcolor="#333" = targ.oldstyle;targ.onmouseout = null;targ.oldstyle='';}
  //targ.style.border = "1px solid red";
  txt+=tmp+"<br>";
  txt+="<center>---------------</center>";
	var x = e.clientX;
	var y = e.clientY;
	if(x!=oldx || y!=oldy)
	{
	txt += "Souris X : "+x+", Souris Y : "+y;
	oldx = x;
	oldy = y;
	with(objbull.style)
	{
  left = e.clientX+5+"px";
  top = e.clientY+5+"px";
  }
  objbull.innerHTML = txt;
	}
	}
	
	
	function init()
	{
  document.body.innerHTML+="<div id=\"infobulle\"></div>";
  objbull = document.getElementById("infobulle");
  
  }
  
	onload = init;
  document.onmousemove = getinfo;
  </script>
  <body>
  <div id="cool" style="border : 1px solid black;">
   Super
   <div id="fort" coucou="bien">
   On essaie !
   <table id="tableau" style="border : 1px solid black;">
   <tbody>
   <tr><td>Case 1</td><td>Case 2</td></tr>
   <tr><td id="case">Case 3</td><td>Case 4</td></tr>
   </tbody>
   </table>
   </div>
   <div>
  </body>
</html>

 Conclusion

Je ne suis pas vraiment sur d'être très rigoureux. Néanmoins, je pense que ce code sera utile à ceux qui veulent s'initier au DOM !


 Sources du même auteur

Source avec une capture PETIT EDITEUR D ICONE
Source avec une capture SYSTEME DE NOTATION
TRIANGLES EN JAVASCRIPT
Source avec Zip FENETRE DHTML ( FONCTIONNE AVEC OPERA ET IE )
Toutes les sources de biskbart

 Sources de la même categorie

Source avec Zip Source avec une capture SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth
Source avec Zip INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges
Source avec Zip Source avec une capture TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia
COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Toutes les sources de la catégorie Divers

 Sources en rapport avec celle ci

GÉNÉRATEUR D'INFO-BULLES DYNAMIQUES par Lomendil
Source avec Zip INFO BULLE COMPATIBLE SELECT ET DOCTYPE par PetoleTeam
Source avec Zip BULLE par Zart
Source avec Zip Source avec une capture INFO BULLE MULTI -TEXTE OU FAUSSE FENÊTRE POPUP (SIMPLE ET P... par xloadx
Source avec Zip Source avec une capture INFO-BULLE PERSONNALISABLE COMPATIBLE FIREFOX ET IE par mobman02

Commentaires et avis

Commentaire de roro06 le 02/01/2007 15:15:08

Bonjour, et bonne année 2007 à toutes et à tous

tant qu'a utiliser le dom, dans init :
    function init()
    {
  document.body.innerHTML+="<div id=\"infobulle\"></div>";
  objbull = document.getElementById("infobulle");
  
  }
j'aurais préféré voir :
var d=document.createElement("div")
d.id="infobulle"
document.getElementsByTagName("body")[0].appendChild(d)

Sinon l'idée est bonne

Commentaire de mickaelpfr le 17/01/2007 17:09:01

ce que j'adore le plus ==> les codes non commentés !!!

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

bug info bulle [ par ntfree ] voila, c tt simple, g chopé le script info bulle de ce site.mais le probleme, c'est ke maintenant, il est impossible de selectionner du texte sur le s info bulle [ par fixou47 ] Bonjour à touscomment pouvoir mettre plusieurs lignes dans une info bulle ?du type : ordre du jour -approbations PB avec INFO BULLE [ par renaud1102 ] Bonjour,J'ai un formulaire, et quand je passe le curseur de ma souris sur un des liens, l'info bulle apparait sous les cases du formulaire. Donc je ne une info bulle qd je survole une checkbox [ par adilou1981 ] bonjour je voudrais savoir quel script permet d'afficher une info bulle qd le curseur passe dessus une case &#224; cocher merci info bulle [ par adilou1981 ] bonjour je voudrais savoir quel script permet d'afficher une info bulle qd le curseur passe dessus une case &#224; cocher merci info bulle dans un select [ par corback ] Bonjour, J'utilise actuellement un select contenant une liste d'options. Le probl&#232;me est que la taille de mon select est fixe et que le contenu problème affichage info bulle [ par _lolo ] Bonjour,Voilà j'ai récupéré un p'tit script pour faire de belles infos bulles :)Malheureusement les infos bulles qui apparaissent dans le menu droit d info bulle dans exploreur de windows [ par diiity ] Bonjour,Est-il possible de modifier le contenu des infos-bulle des fichiers que l'onvoit dans la f&#233;n&#234;tre de l'exploreur de fa&#231;on &#224; Comment changer une info bulle texte en info bulle image ? help svp [ par westernz ] Bonjour, J'ai recuperer ce qui semble etre le meilleur code d'info bulle (sans bug de scroll ou autre). Seulement je cherche (depuis deja pas mal de slectmultiple et infobulle [ par goulouk ] Bonjour,Je vous expose mon prolblème :J'ai un select multiple et je voudrais qu'au passage de la sourie sur une des options du select avoir une info b


Nos sponsors


Sondage...

Comparez les prix


iPod touch 3rd Generation (64 Go)
Entre 374€ et 379€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Green Energy Solutions With Light Bulb Morphed Into Landscape
Photo Crique turquoise - Lavezzi 

Visiter la photothèque

A découvrir
 
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 : 4,898 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)