Albert Wilhelm * Der Betten-Bär * Gladbeck * Heilpraktiker

Zurück-Button

zurueck

Dieser Button macht genau dasselbe wie der Zurück-button im Browser. Der Vorteil ist, dass ich diesen Button überall da platzieren kann wo ich will und wo der Seitenbesucher ihn auch findet. Im Gegensatz zu einer "normalen" Navigation führt er zu derselben Stelle, also zu der vorigen Bildschirmansicht zurück.

Wenn ich z.B. im Shop auf >>Details klicke und in Details auf "zurück" dann komme ich zu demselben Artikel (samt Categorie) zurück. Würde ich dagegen die Navigation benutzen, käme ich zum Anfang des Shops und müsste den Artikel neu suchen. Ähnlich natürlich auch bei seitenlangen Texten, z.B. Querverweisen, Tabellen etc. Das "Vorwärts kann z.B. mit normalen links erfolgen, z. B. >>weiterlesen.

Das folgende ist erstellt und getestet mit CMSimple_XH 1.5.3 und tinymce!

Dieser Zurück-Button sitzt immer ganz oben rechts. Alles an Content rutscht automatisch links daneben.

Ich finde das sehr reizvoll, vor allem wenn man keine Seitenüberschrift hat (im Editor-Reiter "Seite" -> "andere Seitenüberschrift?"  "ja"  einstellen, aber keinen Text eintragen).
Sieht z.B. so >>Beispiel1 oder so >>Beispiel2 aus

Um das (immer rechts-oben) zu erreichen wird der code immer direkt unterhalb der <h1> oder <h2> usw. Zeile,
also noch vor dem ersten <p> und auch ggf. vor <p>+cmsimple hide#</p> (# statt + ) eingefügt, und zwar:

den folgenden blau hinterlegten Code hier markieren und kopieren (Strg+c),
dann auf deiner Seite  in die html-Ansicht wechseln und dort einfügen (Strg+v)!!!

<p style="text-align: left;"><img style="float: right;" title="zurück zur vorigen Seite" onclick="history.back()" onmouseover="this.src='./userfiles/images//zurueck-hover.png';" onmouseout="this.src='./userfiles/images//zurueck-button.png';" src="./userfiles/images//zurueck-button.png" alt="zurueck" width="114" height="37" /></p>

Bemerkung: Man kann den button in der Normal-Ansicht nicht kopieren oder einfügen - das geht nur in der html-Ansicht (er sieht zwar nach dem kopieren genauso aus, funzt aber nicht weil was fehlt). Tinymce sollte das aber in der html-Ansicht immer zulassen. Ich hatte mal Probleme damit: siehe >>Beitrag im XH-forum. Auch die komplette Seite in der html-Ansicht kopieren.

title="zurück zur vorigen Seite" ist der tooltip, also was beim "drauf-zeigen" erscheint,
falls du was anderes reinschreiben willst: title="was anderes"

Außerdem braucht man die zwei button-Bilder zurueck-hover.png und zurueck-button.png im CMSimple-Verzeichnis /images. Selbst was hübsches mit einem Bildbearbeitungs-Programm erstellen oder hier downloaden:

Der Button klappt an jeder beliebigen Stelle im Content, z.B. auch mitten im Text: dann aber am besten ohne <P> und </p> (damit es keinen Zeilensprung gibt) und auch ohne style und float - also nur einfügen

in der html-Ansicht:

<img onclick="history.back()" onmouseover="this.src='./userfiles/images//zurueck-hover.png';" onmouseout="this.src='./userfiles/images//zurueck-button.png';" src="./userfiles/images//zurueck-button.png" alt="" title="zurück zur vorigen Seite" />;

text text text text text text text text text text text text text text text text text text text text text text text


klappt auch in Newsboxen

test >>hier


Wenn man style="float: right;" weglässt bzw. löscht oder style="float: left;" schreibt ist er linksbündig.

zurueck


Browserstyle:
So was geht auch - aber nicht mit Umlaut (leider sind wir da mal wieder gehandikappt, deshalb die Lösung mit button.png`s, aber in manchen Fällen würde sich diese form wohl anbieten).

in html-Ansicht einfügen:

<form action="">
<p>
<input type="button" name="zurueck" value="zurueck zur vorigen Seite"
onClick="history.back()" title="test ist">
</p>
</form>

Wenn was anderes auf dem button stehen soll: Wert von value ändern value="was anderes"


als nette Spielerei könnte man auch ein kleines Vorschaubild statt button-hover anbieten,
das ist natürlich nur sinnvoll, wenn immer auf die Seite zurückgeführt wird, die im Vorschaubild gezeigt wird...

aber der Kreativität bieten sich hiermit viele neue Möglichkeiten...

zurueck

in html-Ansicht einfügen:

<p style="text-align: left;"><img style="border: black 0px solid; float: right;" title="zurück zur vorigen Seite" onclick="history.back()" onmouseover="this.src='./userfiles/images/Allgemeine%20Fotos/Vorderseite-Beschreib-HiSpelz.jpg';" onmouseout="this.src='./userfiles/images/zurueck-button.png';" src="./userfiles/images/zurueck-button.png" alt="zurueck" width="114 " /></p>

Bemerkung:
1. der Wert width zeigt das Vorschaubild in derselben Breite wie den button, der Wert height ist hier gelöscht, damit das Vorschaubild nicht gestaucht wird. Man könnte auch height="37" belassen und width löschen - probiers aus!

2. hier ist noch der wert für border border: black 0px solid; hinzugekommen, jedoch auf 0px gesetzt.

zurueck

Wenn man den border-Wert auf 1px setzt (border: black 1px solid; ), hat das Bild einen Rahmen (was mir zwar besser gefällt als ohne), aber der button hätte dann auch einen Rahmen, was ich hier weniger schön fände.

Aber bei einem andern button-Bild könnte das ja vielleicht gut aussehen...

Ist sowieso Geschmacksache mit den Rahmen ...

 


 

zurueck

Das passiert, wenn man width= und height= (also beide) einfach weglässt oder löscht

(manche Browser akzeptieren auch width="" hight="" aber Internet-Explorer z.B. nicht)

 

 

 

weiter zu: alternativ der Java-button von Christoph