Inhalte über Formular-Elemente

Vie­len ist bestimmt schon auf­ge­fal­len, daß sich For­mu­lar­ele­men­te auf einer Web­sei­te, wel­che im Inter­net Explo­rer ange­zeigt wird, ger­ne in den Vor­der­grund drän­geln. Die­ser Effekt nervt vor allem, wenn indi­vi­du­el­le Tool­tips mit­tels DIV-Layer für eine Ein­ga­be­mas­ke ein­ge­baut wer­den.

Die Lösung die­ses Pro­blems besteht in der Inte­gra­ti­on eines iFrames, wel­ches zwi­schen den Formular-Elementen und dem dar­über anzu­zei­gen­den Inhalt liegt. Die­ser Trick wird auch ger­ne “Iframe Shim” genannt. Ein Beispiel-Code wird hier auf­ge­lis­tet:

<html>
<head>
 <script>
  function DivSetVisible(state)
  {
   var DivRef = document.getElementById('PopupDiv');
   var IfrRef = document.getElementById('DivShim');
   if(state)
   {
    DivRef.style.display = "block";
    IfrRef.style.width = DivRef.offsetWidth;
    IfrRef.style.height = DivRef.offsetHeight;
    IfrRef.style.top = DivRef.style.top;
    IfrRef.style.left = DivRef.style.left;
    IfrRef.style.zIndex = DivRef.style.zIndex - 1;
    IfrRef.style.display = "block";
   }
   else
   {
    DivRef.style.display = "none";
    IfrRef.style.display = "none";
   }
  }
 </script>
</head>
<body>
 <form>
  <select>
   <option>A Select Box is Born ....</option>
  </select>
 </form>
 <div
  id="PopupDiv"
  style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
  .... and a DIV can cover it up<br>through the help of an IFRAME.
 </div>
 <iframe
  id="DivShim"
  src="javascript:false;"
  scrolling="no"
  frameborder="0"
  style="position:absolute; top:0px; left:0px; display:none;">
 </iframe>
 <br>
 <br>
  <a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
 <br>
 <br>
  <a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>

Für das oben ange­spro­che­ne Pro­blem mit den Tool­tips müs­sen die Lay­er nun ent­spre­chend auto­ma­tisch akti­viert bzw. deak­ti­viert wer­den. Dazu wird das Mouse-Move-Event in Kom­bi­na­ti­on eines Timers ein­ge­setzt. Ein gutes Bei­spiel hier­für fin­det man unter ande­rem auch auf der Sei­te von Dyna­mic Web Coding.

0

Schreibe einen Kommentar


Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .