UP  NEXT
Dec. 24, 1998

Popups

 
 
About:
 
english  Compatibel with Netscape 4.x and Internet Explorer 4.x
deutsch  Kompatibel zu Netscape 4.x und Internet Explorer 4.x
 
Move the mousecursor over this two links (den Cursor über diese Links bewegen)
  • A short message (eine kurze Nachricht)
  • A little bitmap (ein kleines Bild)
     
    How was it done?
    The popups are realized with javascript. The functions are in the external helpmaster.js file. You can use this external file as a blackbox or you can modify helpmaster.js. Do not modify other than the marked areas if you do not know what you are doing. Die Popups wurden mit JavaScript realisiert. Die erforderlichen Funktionen habe ich nach helpmaster.js ausgelagert. Helpmaster.js kann wie eine Blackbox ohne jegliche Änderung benutzt oder aber modifiziert werden. Möchten Sie in helpmaster.js andere als die markierten Anweisungen ändern wollen, sollten Sie sehr genau wissen, was Sie tun.
     
    Step one
    You have to refer to the helpmaster.js in the head section of your HTML file. This could look like this example (it's from this page). Zunächst muß die Datei im Header der HTML-Datei eingebunden werden. Das sieht dann etwa so aus (das Beispiel habe ich aus dem Dateikopf dieser Seite kopiert:
    <head>
    <script type="text/javascript" language="JavaScript" src="../../scripts/helpmaster.js">
    </script>
    </head>
    
    
    Step two
    In the second step you define in the body section of your HTML the messages that should appear in the popups. That can be text, pictures, sounds or some other content. The example shows how it was done on this page. Danach wird im Body der HTML-Datei der Inhalt der einzelnen Popups definiert. Auch dieses Beispiel entstammt dieser Seite :
    <body>
    <script language="JavaScript">
    popupvar1 = 'This is the popup message. You can write long ones and short ones';
    popupvar2 = '<img src="../../helpmaster_ss.gif" width=110 height=114 border=0 alt="">';
    </script>
    
    
    Step three
    You have to insert links to call the popups. They work like standard links with some javascript-hocuspocus. If you are a little bit familiar with JavaScript you may test other events instead of "onmouseout" and "onmouseover". Here is the example from this page (you have to write every call into one line). Nun werden Links zum Aufruf der Popups eingefügt. Es handelt sich im Prinzip um ganz normale Links, die um etwas JavaScript Hokuspokus erweitert wurden. Wenn Sie mit JavaScript vertraut sind, können Sie statt "onmouseout" und "onmouseover" auch andere Ereignisse ausprobieren (die Befehlszeilen dürfen übrigens keinen Zeilenumbruch enthalten) :
    <a href="#" onmouseout="popupoff()" onmouseover="popupon(popupvar1,document.all
    ||document.layers?event:null)">A short message</a>
    
    <a href="#" onmouseout="popupoff()" onmouseover="popupon(popupvar2,document.all
    ||document.layers?event:null)">A little bitmap</a>
    
    <div id="popup" style="position:absolute; z-index:1; visibility: hidden"></div>
    
    
    Step four
    In the helpmaster.js I have marked the lines you can modify without risk. This lines determine the optical behaivior of your popups. Here they are. In der Datei helpmaster.js habe ich einige Zeilen als veränderbar deklariert. Sie können den Variablen risikolos andere Werte zuweisen, um das optische Erscheinungsbild Ihren Vorstellungen anzupassen. Vom restlichen Code sollten Sie im Zweifelsfall jedoch besser die Finger lassen :
    //-- Start Editable Area --
          borderColor = '#000000';
          bgColor = '#ffffcc';
          border = 1;
          padding = 3;
          xOffset = 3;
          yOffset = 3;
          Font = 'face="Verdana, Arial, Helvetica, sans-serif" size=2';
    //-- End Editable Area --  
    
    
    Freeware by Josef Becker, based on a script by Andrew Castles
     
      Download http://www.helpmaster.com/zip/jbpopup.zip
      Contact http://www.helpmaster.com
     
  •  
      © Josef Becker · Mediendidaktische Beratung, Usastrasse 42-46, D-61267 Neu-Anspach