in Weblica kann man Websites ganz einfach mit CSS, HTML und Javascript erweitern und individualisieren
Wussten Sie schon? Mit dem HTML object-Element können Sie beliebige Daten-Dateien in eine Webseite ein­binden.
Mehr dazu auf der Seite Player einbinden und bei SELFHTML.

Notationskonventionen

Code ist in in Lucida Console schwarz oder in Courier schwarz notiert, anpassungs­bedürftige Teile sind farbig.

Die Namen von Weblica- und Ressourcen­feldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Ver­wenden von Code müssen die Ressourcenfelder ersetzt werden.

W3C-Konformität

Unser Code ist standardkonform:
XHTML 1.0 transitional ist valide - zur Prüfung bitte klicken

Seite erstellt / geändert

e 16.02.12  /  update

Codeschnipsel 46: Gadgets aller Art


Javascript und HTML-Code für Gadgets aller Art: IP-Adresse, Referrer, Sprach-Übersetzer, Animationen usw.

IP-Adresse des Besuchers anzeigen

Für die Anzeige nur der IP-Adresse (als Grafik) folgenden Code in einen HTML-Absatz einfügen:

Code gelöscht; alter Code funktionierte nicht mehr.

Neuer Code: pendent.


zurück   |   nach oben

Herkunftsadresse = Referrer anzeigen

Anzeige der URL, von welcher aus auf die Seite, in der der folgende Code eingebettet ist, gesprungen wurde:

<script type="text/javascript">
document.write( document.referrer );
</script>


Anwendungsbeispiel: 
Sie sind von dieser Adresse hierher gelangt:


zurück   |   nach oben

Werbung - mit Event-Handler onmouseout

<a href="https://www.babox.ch/links/index.html" title="hochinteressante Links" target="_self"
onmouseout="alert('Besuchen Sie auch unsere interessanten Links')">Links</a>
<br />


mehr Event-Handler bei SelfHTML

Beispiel, mehr lästig als lustig:
Links


zurück   |   nach oben

Google Translate - einfache Version, individuell konfiguriert

konfigurierbarer Google-Übersetzer / -Translator
Konfigurationsmöglichkeiten:
  • verschiedene Display-Modi
  • Ausgangssprache
  • Zielsprachen

<div id="google_translate_element"></div>
<script>
 function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'auto',
    includedLanguages: 'en,it,fr,nl,es,tr',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


Quelle: Google translate tools

Demonstration: keine, stört nur beim Betrachten dieser Seite

Beispiel: A l'Arbre Vert in Wintzfelden (unterhalb der Navigation, unkonfiguriert)
das Beispiel demonstriert schön die massive Erhöhung der Ladezeit der Seite
Screenshot:   Screenshot: konfigurierter Google Translator  (klicken um zu zoomen)
Vorteile: keine Links auf Google Gadgets (externe Server, die die Ladezeit der Seite erfahrungsgemäss noch mehr erhöhen)


zurück   |   nach oben


Adam Bowmans Gadgets

Adam Bowman hat sehr schöne Gadgets erstellt - alle ohne unerwünschte Nebenwirkungen.

Sehr schön ist sein konfigurierbarer Frosch (in der linken Seitenspalte unten).

Adam Bowmans (konfigurierte) Spinne auf der Box-Seite wird mit folgendem Code implementiert:

<div class="Spinne" style="position:absolute;  margin-left: 0px; top: 282px;">
<object type="application/x-shockwave-flash" style="outline:none;"
data="$(res.304.spider_swf.path)?up_size=.2&up_headColor=666666&up_backgroundImage=http://&up_original=false&up
_spiderName=Spider&up_legColor=333333&up_bellyColor=666666&up_speed=1&up_backgroundColor=&" width="640" height="480">
<param name="movie" value="$(res.304.spider_swf.path)?up_size=.2&up_headColor=666666&up_backgroundImage=http://&up_original=false&
up_spiderName=Spider&up_legColor=333333&up_bellyColor=666666&up_speed=1&
up_backgroundColor=&"></param>
<param name="AllowScriptAccess" value="always"></param>
<param name="wmode" value="transparent"></param>
<param name="scale" value="noscale"/><param name="salign" value="tl"/>
</object>
</div>


Anpassungen:

Pfad des Gadgets (swf- / Flash-Datei) in der Weblica-Dateiablage
Position des Gadgets: linker Rand der mittleren Spalte, ab oberem Rand des Kopfbilds
Breite und Höhe des Gadgets
wmode transparent (Standardwert für wmode: opaque) bewirkt, dass der Hintergrund der dem Seitentext überlagerten swf-Datei transparent ist - siehe Flash Object Attributes in der Adobe Knowledge Base.
Beim Verwenden des Codes Zeilenumbrüche entfernen.
Zu beachten: die Flash-Datei liegt über dem Seitentext; allfällige Links im Seitentext können deshalb nicht mehr geklickt werden.


zurück   |   nach oben