EmailScript + MouseOver-Effekt
 HomeEmails • Spiderschutz 02 B ScriptCode 

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 Adresse Link Spam Schutz Spider Robot

Funktion für der mehrfachen Einsatz

Email-Link mit Grafik und MouseOver

Dieses Email-Script ist vom Beispiel "Email verstecken mit Image" abgeleitet. Eine MouseOver-Funktion (Grafiktausch) für die Grafik wurde hinzugefügt. Die dazu notwendigen beiden Grafiken sind im JavaScript festgelegt. Die erste der beiden Grafiken wird automatisch in den Email-Link eingefügt. Die zweite Grafik 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


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.



3 Beispiele für den Aufruf:


Die Emailadresse ist: JuppZupp123@web.de

<script type="text/javascript" language="JavaScript">
<!--
mail('JuppZupp123','web.de','Email an Jupp Zupp','Link01')
//-->
</script>


Die Emailadresse ist: Susi123@gmx.de

<script type="text/javascript" language="JavaScript">
<!--
mail('Susi123','gmx.de','Email an Susi Soglos','Link02')
//-->
</script>


Die Emailadresse ist: Zenzi123@aol.com

<script type="text/javascript" language="JavaScript">
<!--
mail('Zenzi123','aol.com','Post für Zenzi','Link03')
//-->
</script>





   Erklärungen zur Funktion

Die JavaScript-Anweisungen gestalten sich hier ein wenig komplizierter. Damit Leerzeichen zwischen Grafik 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 URLs der beiden Grafiken sind im Script festgelegt und für alle Emal-Links identisch. Der erste Eintrag ist die URL der Standard-Grafik (brief-02.gif), der zweite die URL für die MouseOver-Grafik (brief-03.gif).

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)


Anmerkung:

Verwenden Sie eine Grafik mit ausreichendem (transparenten) Leerraum rechts ersparen Sie sich den Mehraufwand. na ja, ich muss ja auch erklären Wie Sie mit ausgerwöhnlichen (wenn auch unwirtschaftlichen) Arbeitsweisen fertig werden. :-)

Beispiele Grafikbreite 30 Pixel (Briefsymbol 16 Pixel) Breite:

Darstellung hier mit puktiertem Rand.




   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 Grafiken werden dem System als img-Objekt bekannt gemacht und in die Funktion für den Bildtausch bei MouseOver eingebunden.

Auszug:
// 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")
}