quelltext von elementen ermitteln

by Aaron von Schassen

HTML

<div class="tool"></div>
  
  <div class="zleft right" id="ntext">
		<h2></h2>
		<p></p>
	</div>

                
                <div id="tabnav" class="zrelative">
                    
	
	



<ul id="nav-2" class="hmenu zabsolute">
	
	  <li>
	  	<a href="/profil/id:1000234697/"><span class="btn-right"><span class="btn-left">Profil ansehen</span></span></a>
	  </li>
	
	  <li>
	  	<a href="/overview/"><span class="btn-right"><span class="btn-left">Übersicht</span></span></a>
	  </li>
	
	  <li class="active">
	  	<a href="/pet/"><span class="btn-right"><span class="btn-left">Haustier</span></span></a>
	  </li>
	
	  <li>
	  	<a href="/activities/"><span class="btn-right"><span class="btn-left">Aktionen</span></span></a>
	  </li>
	
	  <li>
	  	<a href="/stock/"><span class="btn-right"><span class="btn-left">Inventar</span></span></a>
	  </li>
	
	  <li>
	  	<a href="/speedworld/"><span class="btn-right"><span class="btn-left">Speedwelt</span></span></a>
	  </li>
	
	  <li>
	  	<a href="/itemsale/"><span class="btn-right"><span class="btn-left">Kronkorken</span></span></a>
	  </li>
	
	  <li>
	  	<a href="/votes/"><span class="btn-right"><span class="btn-left">Feedback</span></span></a>
	  </li>
	
</ul>

                </div>
                

                
                





                <div id="content" class="zrelative sitdown">
                    <div id="provocation_area">
                        
                    </div>





					


					
			        
					
					
					
					


					




                    <div id="content-top" class="zabsolute">&nbsp;</div>
                    
					<div id="kk-button" style="position: absolute; right: -10px; top: -30px; z-index:10;">
                        <a href="/itemsale/" class="ttip" title="Deine Kronkorken" rel="Klicke hier, um Kronkorken zu kaufen oder Items zu erstehen">
                            <img src="http://static2.pennergame.de/img/pv4/vcc/mu_DE/kk-button.png" border="0"/>
                      ...

CSS

.tool {
  position: absolute;
  z-index: 1000000;
  display: block;
  color: white;
  background: red;
  display: none;
}

JavaScript

window.document.onmousemove = function(e) { 
	if(!e) e = window.event; 
	var element = e.target; 
  var tool = document.querySelector(".tool");
  
	element.style.border = '1px solid red'; 
	element.onmouseout = function() {
		this.style.border = '';
    tool.style.display = "none";
	}
  
  tool.style.display = "block";
  tool.style.left = event.clientX + 30 + "px";
  tool.style.top = event.clientY + window.pageYOffset + "px";  

 	dasistes = element.outerHTML;
	
  var prefinal = dasistes.replace(/\</g,'&lt;');
  var final = prefinal.replace(/\>/g,'&gt;');
  
  tool.innerHTML = final;
}