Webdesign - Eselsohr zum Aufklappen ist ein Eye-Catcher für eine Website

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Eye-Catcher für eine Website ist ein Eselsohr zum Aufklappen

19Apr2014

Ein Eselsohr zum Aufklappen.


Eine kreative Lösung um eine Werbung auf einer Webseite zu platzieren, ist ein Eselsohr zum Aufklappen, oft auch unter dem Namen "Pagepeel" oder "Sexy Curls" zu finden. Wie auf dieser Demonstrationsseite auch, wird das Eselsohr auf Webseiten meistens an der rechten, oberen Ecke eingeblendet.
Sobald der Mauszeiger die Ecke berührt, wird das Eselsohr aufgeklappt um die dahintergelegene Information anzuzeigen. Oder man zieht, wie auf dieser Seite eingestellt, mit dem Mauszeiger die Ecke auf. Als Information oder Werbung können Sie dann einen Text, ein Bild oder einen Verweis zu einer anderen Seite hinterlegen.

Das jQuery Plugin fand man auf der Seite von Elliott Kember (Leider ist die Seite nicht mehr vorhanden). Ich habe es allerdings noch ein wenig meinen Wünschen angepasst.

  • Bei meiner Umsetzung kann man die Ecke in allen Richtungen ziehen und erzielt damit einen besonderen, flexiblen Effekt beim Aufklappen der Ecke.
  • Nach vollständigem Ausklappen des Eselsohrs besteht die Möglichkeit, über einen Verweis, zu einer anderen Seite zu springen.
  • Ich habe das Script soweit erweitert, dass auch eine umklappbare Ecke rechts unten möglich ist.
  • Mein Eselsohr bleibt fest in der Ecke und wandert beim scrollen nicht mit.
  • Bei ausgeschaltetem JavaScript (objektorientierte Programmiersprache) sind die Ecke und die Information nicht sichtbar.

Und so wird das Eselsohr auf einer Webseite eingebunden.

Der div-Container mit der Bezeichnung "id = werbung" kann an einer beliebigen Stelle im HTML (HyperText Markup Language) geschrieben werden und sieht auf dieser Beispielseite wie folgt aus:

<div id="werbung">
    <p>Was hat sich denn hinter<br>dieser Ecke versteckt?<br>
        <a href="../" title="Startseite: webdesign klamonfra">
            webdesign<br>klamonfra<br>
        </a>
        <span>Klaus Franz</span>
    </p>
</div>

Durch die Bezeichnung des "div-Container" mit "id = werbung" kann ich im CSS (Cascading Style Sheet) das gewünschte Design erzielen.

#werbung {
    cursor: default;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
}

#werbung a {
    font: italic 1.3em/1.1 Arial;
    color: #5f5f5f;
    text-shadow: 2px 2px 1px #101010, 1px 1px 0 #505050;
    text-decoration: none;
    transition: .4s;
}

#werbung a:hover,
#werbung a:focus {
    text-shadow: -1px -1px 0 #202020, 1px 1px 0 #fff;
}

#werbung span {
    font-size: .7em;
    text-shadow: none;
}

#gesamt.rechts #werbung {
    right: 10px;
}

Für die Umsetzung der Ecke sind dann noch weitere Festlegungen im CSS (Cascading Style Sheet) zu treffen die aus dem Original-CSS (Cascading Style Sheet) entnommen wurden. Ich habe diese für die Umsetzung meiner Wünsche allerdings noch geändert, beziehungsweise einige Zeilen ergänzt oder entfernt.

#gesamt {
    width: 5em;
    height: 5em;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    cursor: se-resize;
    text-align: left;
}

#versteck {
    background: #e0f2f4;
    width: 85%;
    height: 85%;
    overflow: hidden;
    display: block;
    position: absolute;
}

#ecke {
    position: fixed;
}

img#ohr {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 999;
    right: 0;
    position: absolute;
}

#gesamt.rechts #ecke,
#gesamt.rechts #versteck  {
    float: right;
    right: 0;
    left: auto;
}

#gesamt.rechts {
    right: 0;
    cursor: sw-resize;
    text-align: right;
}

#gesamt.rechtsunten #ecke,
#gesamt.rechtsunten #versteck {
    float: right;
    right: 0;
    left: auto;
    bottom: 0;
}

#gesamt.rechtsunten,
#gesamt.rechtsunten #werbung {
    bottom: 10px;
    top: auto;
    left: auto;
    right: 10px;
    text-align: right;
}

#gesamt .ui-wrapper {
    left: 0;
    top: 0;
}

#gesamt .ui-resizable-handle {
    position: absolute;
    border: none;
    background: none; 
    width: 100%;
    height: 100%;
}

Mit den dargestellten Änderungen konnte ich meinen Wunsch, die Ecke nach links oben, rechts oben oder auch nach rechts unten zu platzieren, umsetzen. Möchte man die Ecke nicht fest in einer Ecke setzen, so ist die Deklaration "#ecke" von "position: fixed" auf "position: relative" zu ändern.

Um das Design und den Ort der Ecke zu ändern, muss man dann nur noch die folgenden Einstellungen in der "ecke.js" nach seinen Wünschen verändern.

var defaults = {
  // Maximale Höhe der Ecke beim Ausklappen
  maxHeight: 350,

  // Maximale Breite der Ecke beim Ausklappen
  maxWidth: 400,

  // Höhe und Breite der Ecke beim Start
  startHeight: 100,

  // Ort der Ecke "rechts", "links" oder "rechtsunten"
  side: 'rechts',

  // "true": Ecke geht automatisch auf oder
  // "false": man zieht die Ecke mit dem Mauszeiger auf
  autoCurl: false
};

Und schon ist die kreative Werbung auf der Webseite eingebunden.

Was hat sich denn hinter
dieser Ecke versteckt?


Startseite von
webdesign
klamonfra
Klaus Franz

Zum Seitenanfang springen Λ