anapajari s/travail/glanding on hfr/gs; | Je mettais amusé a faire le truc en dessous, il y a quelque temps. En gros ça te permet "d'explorer" le code html (ça affiche la source de l'element survolé) de ton document dynamiquement.
Il va surement falloir que tu améliores 2/3 trucs mais je pense que ça pourrait t'être utile:
Code :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
- <head>
- <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
- <title>Source html Element</title>
- <script type="text/javascript">
- //<![CDATA[
- var highLightColor = 'red';
- var elOver = null;
- window.onload = function (e){
- var aNode = document.createElement('a');
- aNode.appendChild(document.createTextNode('Demarrer'));
- aNode.setAttribute('id', 'start');
- aNode.setAttribute('href', 'nojs.html');
- aNode.onclick = function (e){
- startDemo();
- return false
- }
- document.getElementsByTagName('body')[0].appendChild(aNode);
- }
- function startDemo(){
- nodes = document.getElementsByTagName('body')[0].getElementsByTagName('*');
- for(var i = 0; i<nodes.length; i++){
- if ( nodes[i].id != 'start' ){
- nodes[i].onmouseover = function (e){
- if ( elOver == null){
- elOver = this;
- this.style.backgroundColor = highLightColor;
- displaySrc(this);
- }
- }
- nodes[i].onmouseout = function(e){
- if ( elOver == this){
- elOver = null;
- }
- this.style.backgroundColor = '';
- }
- }
- }
- var dispContent = document.createElement('div');
- dispContent.setAttribute('id','dispContent');
- var clDemo = document.createElement('input');
- clDemo.setAttribute('type', 'button');
- clDemo.setAttribute('value', 'X');
- clDemo.onclick = endDemo;
- dispContent.appendChild(clDemo);
- var dispNode = document.createElement('div');
- dispNode.setAttribute('id','dispNode');
- dispContent.appendChild(dispNode);
- document.getElementsByTagName('body')[0].appendChild(dispContent);
- }
- function endDemo(){
- document.getElementById('dispContent').parentNode.removeChild(document.getElementById('dispContent'));
- nodes = document.getElementsByTagName('body')[0].getElementsByTagName('*');
- for(var i = 0; i<nodes.length; i++){
- if ( nodes[i].id != 'start' ){
- nodes[i].onmouseover = null;
- nodes[i].onmouseout = null;
- }
- }
- }
- function displaySrc(el){
- try{
- var nodeSrc = ''
- for(var i=0; i<el.attributes.length; i++){
- nodeSrc += el.attributes[i].nodeName+"='"+el.attributes[i].value+"' ";
- }
- nodeSrc = "<"+el.tagName.toLowerCase()+" "+nodeSrc;
- if ( el.innerHTML.length != 0){
- nodeSrc += ">"+el.innerHTML+"</"+el.tagName.toLowerCase()+">";
- } else {
- nodeSrc += "/>";
- }
- nodeSrc = nodeSrc.replace("background-color: "+highLightColor+";", '');
- nodeSrc = nodeSrc.replace(/ style=('|" ){2}/g, '');
- /*** needed for IE ***/
- nodeSrc = nodeSrc.replace(/ [A-z]+=''/g, '');
- nodeSrc = nodeSrc.replace(/ [A-z]+='null'/g, '');
- nodeSrc = nodeSrc.replace(/ hideFocus='false'/, '');
- nodeSrc = nodeSrc.replace(/ disabled='false'/, '');
- nodeSrc = nodeSrc.replace(/ tabIndex='0'/, '');
- nodeSrc = nodeSrc.replace(/ contentEditable='inherit'/, '');
- nodeSrc = nodeSrc.replace(/ +>/, '>');
- /*** end IE ***/
- document.getElementById('dispNode').innerHTML = '<xmp>'+nodeSrc+'</xmp>';
- }
- catch(ex){
- alert("Unknown element" );
- }
- }
- //]]>
- </script>
- <style type="text/css">
- fieldset{
- margin: 10px;
- }
- form{
- padding: 10px;
- background-color: blue;
- }
- #dispContent{
- position: absolute;
- left: 0px;
- bottom: 0px;
- border: 1px solid black;
- margin: 5%;
- width: 90%;
- height: 200px;
- background-color: white;
- }
- #dispNode{
- margin: 5px;
- border: 1px solid black;
- }
- </style>
- </head>
- <body>
- <h1>Demonstation</h1>
- <p>Un paragraphe de blabla avec <a href="lien.html">un lien</a></p>
- <form action="truc" method="post">
- <fieldset class="f">
- <legend>Champs 1</legend>
- <input type="text" name="f1" id="champs1" value="pouet"/>
- </fieldset>
- </form>
- <div>
- <p> Blavlfm dcmdlaa <span id="s" style="font-weight:bolder;">span</span></p>
- </div>
- </body>
- </html>
|
|