 Spiderschutz 02 B mit MouseOver-Effekt
Ein 'Email-Verstecken-Script' zur Mehrfachverwendung. Gut geeignet, wenn innerhalb einer Webseite häufiger Email-Links eingetragen werden sollen. Die Emailadresse wird 'zerpflückt' und bei der Darstellung des Links vom Script wieder zusammen gefügt.
Email-Link mit Grafik und MouseOver
Dieses Email-Script ist vom Beispiel "Email verstecken mit Image" abgeleitet. Eine MouseOver-Funktion (Grafiktausch) für das Image wurde hinzugefügt. Die dazu notwendigen beiden Images sind im JavaScript festgelegt. Das erste der beiden Images wird automatisch in den Email-Link eingefügt. Das zweite Image erscheint bei MouseOver.
Aufagben des Scripts
Neben der Aufgabe den Email-Link (mit SPAM-Schutz) in das Dokument zu schreiben, soll das Ereignis MouseOver überwacht werden. Bei MouseOver greift die Anweisung, eine Grafik gegen eine andere auszutauschen (tausche das blaue Symbol gegen das rote Symbol). Beim Ereignis OnClick (die hier vom Browser überwacht wird, soll der Email-Client (das Emailprogramm) aktiviert werden.
Demo: Bewegen sie den Mauszeiger über den Link.
Aufwand
- Script im HEAD-Bereich notieren
- Aufruf im Body-Bereich notieren
- 2 Grafiken herunterladen
Verwendete Images:  
Mehr gibts in meiner  MINI-IMAGE-BOX 
Anweisungen im Body
Was steht hinter "mail" innerhalb der Klammern?
Der Funktion mail() werden 4 Parameter übergeben! Diese Parameter stehen in Anführungszeichen und werden durch ein Komma getrennt.
- Die beiden "Bauteile" der Emailadresse werden übergeben
- Der erklärende Text wird übergeben
- Der Bildname (keine Doppelnennungen) wird übergeben
3 Beispiele für den Aufruf:
<script type="text/javascript">
<!--
mail('JuppZupp','web.de','Email an Jupp Zupp','Link01')
//-->
</script>
<script type="text/javascript">
<!--
mail('Susi','gmx.de','Email an Susi Soglos','Link02')
//-->
</script>
<script type="text/javascript">
<!--
mail('Zenzi','aol.com','Post für Zenzi','Link03')
//-->
</script>
Erklärungen zur Funktion
Die JavaScript-Anweisungen gestalten sich hier ein wenig komplizierter. Damit die abstandhaltenden Leerzeichen zwischen Image und Text auch ohne entsprechende CSS-Anweisungen ohne Unterstrich erscheinen, wurde der Link 2 x eingetragen. Einmal für die Grafik und ein zweites mal für den Textlink.
Die URL der beiden Grafiken sind im Script festgelegt und für alle Emal-Links identisch. Der erste Eintrag ist die URL der Standard-Grafik, der zweite die URL für die MouseOver-Grafik (i01.src).
Bei einer Mehrfachverwendung der Funktion innerhalb einer Seite soll jede Grafik eine andere Bezeichnung (Namen) erhalten (Link01, Link02, ...). Diese Bezeichnung wird der Funktion als Parameter übergeben, in das Image-Tag als Attribut für den Objektnamen eingetragen und vom MouseOverScript als Referenz verwendet. Über den Objektnamen wird festgelegt, welche Grafik getauscht werden soll.
Einzelheiten entnehmen sie dem Quelltext (Textdatei)
Script-Anweisungen für den Bildtausch
Die Anweisungen für den Mouseover-Effekt gehören zu meinen Erweiterungen des Basis-Scripts in Spiderschutz 01. Die beiden Images werden definiert und eine Funktion für den Bildtausch bei Mouse-Over eingetragen.
// mouseover
i01 = new Image();
i01.src = "../images/brief-02.gif"; /* Standard-Grafik */
i01h = new Image();
i01h.src = "../images/brief-03.gif"; /* Highlight-Grafik */
function BildTausch(imgID,imgObjName) {
// imgID ID des auszutauschenden Bildes
// imgObjName Name des Bildes mit dem ausgetauscht wird
document.images[imgID].src = eval(imgObjName + ".src")
}
|
HOME
ZURÜCK