ref.thorstn.com /
private moziloCMS und CSS Referenzseite

Bildeffekte


Mouseover Effekt bei Bildern - einfach mal mit der Maus über das Bild fahren!.



Angaben im CSS:
a#bild1 {
    background-image:url("../grafiken/bild_normal1.png");
    background-repeat:no-repeat;
    width:50px;
    height:50px;
    display:block;
}
a#bild1:hover {
    background-image:url("../grafiken/bild_hover1.png");
    background-repeat:no-repeat;
    width:50px;
    height:50px;
    display:block;
}

Inhaltsseite (via HTML Code):
[html|<a id="bild1" href="http://thorstn.com" title="Thorstn seine Webseite"></a>]



Wenn man diese(n) Effekt(e) öfters innerhalb der Webpräsenz benötigt, bietet sich eine Lösung mit einem Benutzerdefinierten Syntax an:
(Die CSS-Angaben sind dieselben wie im ersten Beispiel oben.)

Achtung: Diese Lösung funktioniert nur mit externen Links bzw. absoluten Pfaden (z.B. http://meinmozilo.de/kategorie/inhaltsseite.html), also nicht mit der typischen mozilo Linksetzung zu Kategorien oder Inhaltsseiten via [kategorie|...] bzw. [seite|...]

In den Einstellungen im moziloAdmin Bereich notiert man folgende Benutzerdefinierte Syntax:

bildeffekt1 = <a id="bild1" title="{DESCRIPTION}" href="{VALUE}"></a>
*

(1.) In die Inhaltsseite fügt man bei Link zu externer Seite folgendes ein:

[bildeffekt1=Thorstn seine Webseite|http://www.thorstn.com]



(2.) In die Inhaltsseite fügt man bei Link zu interner Seite folgendes ein:

[bildeffekt1=Link zur Seite 'start' innerhalb dieser Webseite|{BASE_URL}start/start.html]



* Soll bei dem Effekt/Mouseover kein (oben blau gefärbter) Text (Title) angezeigt und/oder (oben rot gefärbter) Link genutzt werden, kann der jeweilige Bereich einfach leer gelassen werden.