var: div bei onmouseover einblenden u. b. onclick eingeblendet lassen

Beitrag lesen

Hallo iasonas.

<script language="javascript">
function show(id) {
document.getElementById(id).style.display = 'block';
    }
function hide(id) {
document.getElementById(id).style.display = 'none';
    }
</script>

Du solltest dein Script in eine externe Datei schreiben und dann per Link im <head> deiner Seite einbinden.

Darüber hinaus kannst du dir das language-attribute sparen. <script> wird standardmäßig als JavaScript interpretiert, aber du kannst auch type="application/x-javascript" reinschreiben, wenn du dadurch besser schläfst.

der link:

<a href="#" onMouseOver="show('layer1'); window.status=''; return true" onMouseOut="hide('layer1'); window.status='';return true">Layer1</a>

und der dazugehörige layer:

<div id="layer1" onMouseOver="show('layer1'); window.status=''; return true" onMouseOut="hide('layer1'); window.status='';return true" style="position:absolute; display:none;">
LAYER EINS
</div>

Auch deine Eventhandler solltest du nicht inline notieren, sondern im eingebundenen script in Form von bspw. element.addEventListener( 'click', function );

Gib deinem Link eine ID, lass dem div seine ID, schmeiß den Rest aus deinen HTML-Tags raus und dann schreib in JS:

var link1 = document.getElementById( 'link1' );  
  
var layer1 = document.getElementById( 'layer1');  
  
link1.addEventListener( 'click', function ( ) {  
  
  if ( layer1.style.display === 'block' ) {  
  
    layer1.style.display = 'none';  
  
  }  
  
  else {  
  
    layer1.style.display = 'block';  
  
  }  
  
});

Oder sowas in der Art. ;)

Kannst aber auch statt einer anonymen Funktion einfach schreiben:

link1.addEventListener( 'click', link1OnClick );  
  
function link1OnClick ( ) {  
  
/* ... */  
  
}

Je nach dem, was du mit dem DIV Element bezweckst, solltest du auch schauen, ob dafür nicht ein anderes HTML Element besser passt.

Hoffentlich hilfts etwas.

Gruß.

var

formerly known as Roadster