Inhalte über Formular-Elemente

Vielen ist be­stimmt schon auf­ge­fal­len, daß sich Formularelemente auf ei­ner Webseite, wel­che im Internet Explorer an­ge­zeigt wird, ger­ne in den Vordergrund drän­geln. Dieser Effekt nervt vor al­lem, wenn in­di­vi­du­el­le Tooltips mit­tels DIV-Layer für ei­ne Eingabemaske ein­ge­baut wer­den.

Die Lösung die­ses Problems be­steht in der Integration ei­nes iF­rames, wel­ches zwi­schen den Formular-Elementen und dem dar­über an­zu­zei­gen­den Inhalt liegt. Dieser Trick wird auch ger­ne „Iframe Shim“ ge­nannt. Ein Beispiel-Code wird hier auf­ge­lis­tet:

<html>
<head>
 <script>
  func­tion 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";
   }
   el­se
   {
    DivRef.style.display = "no­ne";
    IfrRef.style.display = "no­ne";
   }
  }
 </script>
</head>
<bo­dy>
 <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 co­ver it up<br>through the help of an IFRAME.
 </div>
 <if­rame
  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 hi­de DIV.</a>
</body>
</html>

Für das oben an­ge­spro­che­ne Problem mit den Tooltips müs­sen die Layer nun ent­spre­chend au­to­ma­tisch ak­ti­viert bzw. de­ak­ti­viert wer­den. Dazu wird das Mouse-Move-Event in Kombination ei­nes Timers ein­ge­setzt. Ein gu­tes Beispiel hier­für fin­det man un­ter an­de­rem auch auf der Seite von Dynamic Web Coding.

0

Schreibe einen Kommentar