see Attachment

.wrapper {
   position:relative;
   overflow: hidden;
 }

Wenn die Checkboxen alle denselben Namen haben, überschreibt die zweite die erste etc. Aber in PHP gibts dafür ja Arrays. Und man glaubt es kaum, man kann den Namen der Checkbox als Array definieren:

<input type="checkbox" name="types[]" value="html"> html<br>
<input type="checkbox" name="types[]" value="php"> php<br>
<input type="checkbox" name="types[]" value="jpg"> jpg<br>

und dann ist:

$a_types = ($_REQUEST["types"]);

JavaScript Function:

 <script language="JavaScript">
 function toggle(element)
 {
  //    alert (document.getElementById(element).style.display);
  var neuer_status;
  if(document.getElementById(element).style.display == 'block')
    neuer_status = 'none'
  else
    neuer_status = 'block'
  document.getElementById(element).style.display = neuer_status;
 }
 </script>

HTML Source Code

(in a loop with $i)

 <a href=# onMouseOver=javaScript:toggle(\"mem".$i."\");
           onMouseOut=javaScript:toggle(\"mem".$i."\");>".Toggle!."</a>
 <div class=\"hiddenbox\" id=\"mem".$i."\">".Some hidden Text."</div>

CSS Definition

 .hiddenbox {
       position:absolute;
       display:inline;
       display:none;
       width:200px;
 }

Move a block to another position

how to move a div box with JavaScript (das kann man natuerlich noch beliebig verfeinern, see also: http://www.html-world.de/program/dhtml_3.php.):

  onClick = "document.getElementById(element).style.top=600+'px';"

 <style>
 ul.gallery {list-style-type: none; margin:1em;}
 li.gallery {padding: 6px; float:left;  text-align:center;
             width:118px; height:160px;
             background:#DDDDDD; margin:2px; overflow:hidden;}
 div.image1 {width: 118px; height:114px; overflow:hidden;}
 </style>

 [...]

 <ul class="gallery">
   <li class="gallery">
   <div class="image1"><a href="$pre$PicPathIn$bild">
      <IMG src="$pre$Thumbnail" ></a></div>
   Some Text
   </li>
 </ul>

used on the gallery pages of Catch a Star! 2007 ff.

 <script language = "JavaScript" type="text/javascript">
	 //	 alert ("hallo");
	 var counter = 1;
	 function addExchangeField() {
	   var table = document.getElementById("form");
	   counter = counter + 1;
	   document.forms[0].exchangefields.value = counter;
	   if (document.createElement) {
		 var tr = document.createElement("tr");
		 var td1 = document.createElement("td");
		 var td2 = document.createElement("td");
		 var input1 = document.createElement("input");
		 input1.id = "replacex_"+counter;
		 input1.name = "replacex_"+counter;
		 input1.type = "text";
		 var input2 = document.createElement("input");
		 input2.id = "replacey_"+counter;
		 input2.name = "replacey_"+counter;
		 input2.type = "text";
		 var text1 = document.createTextNode(" by ");
		 td2.appendChild(input1);
		 td2.appendChild(text1);
		 td2.appendChild(input2);
		 tr.appendChild(td1);
		 tr.appendChild(td2);
		 table.appendChild(tr);
	   }

	 }
 </script>

 <SCRIPT TYPE="text/javascript">
 function checkboxhandler(checkbox) {
   if (checkbox.checked) {
       alert ('checked');
   } else {
       alert ('unchecked');
   }
 }
 </SCRIPT>

 <input type="checkbox" name="somename" value="somevalue" onclick="checkboxhandler(this);">