In diesem Tutorial möchte ich euch zeigen wie es in den Designs Iceblue, Red, Butterfly und Colourful möglich ist den Header zu verlinken.
Da die Möglichkeiten im Homepage-Baukasten begrenzt sind habe ich das Ganze mit dem Javascript-Framework jQuery umgesetzt.
Somit ist das Anklicken des Headers nur mit eingeschaltenem Javascript möglich.
1. Gehe zu "Design einstellen"
2. Wähle "Erweiterte Einstellungen"
3. Füge bei "Text über dem Design" den richtigen Code der folgenden Liste ein.
Es ist egal, wenn sich dort schon Code befindet.
Füge diesen Code einfach ganz am Anfang, vor dem ganzen anderen Code, ein.
Colourful:
Code: <script type="text/javascript" src="http://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header2").css('cursor','pointer');
$("td.edit_header2").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
Iceblue:
Code: <script type="text/javascript" src="http://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header_full").css('cursor','pointer');
$("td.edit_header_full").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
Red:
Code: <script type="text/javascript" src="http://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header").css('cursor','pointer');
$("td.edit_header").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
Butterfly:
Code: <script type="text/javascript" src="http://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header").css('cursor','pointer');
$("td.edit_header").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
4. Ersetze in dieser Zeile
Code: $("td.edit_header").click(function() { document.location.href="URL"; });
das URL mit der Zieladresse, auf die der Header verlinkt werden soll, beispielsweise http://www.homepage-baukasten.de/.
Damit würde die Codezeile so aussehen:
Code: $("td.edit_header").click(function() { document.location.href="http://www.homepage-baukasten.de/"; });
5. Drücke Speichern.
Für die Fortgeschritteneren unter euch gehe ich den Code noch Zeile für Zeile durch. Leider kann ich den jQuery Code, wegen der Komplexität dieses Themas, nicht genau erklären. Aber es gibt genügend Tutorials im Internet dazu.
1. Code: <script type="text/javascript" src="http://img.webme.com/designs/globals/jquery.js"></script>
Diese Zeile bindet nur das Javascript-Framework jQuery, das wir später noch verwenden, ein.
2. Code: <script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
Die erste dieser 2 Zeilen signalisiert dem Browser, dass ein Javascript-Code folgt.
Die 2. Zeile verhindert, dass es bei älteren Browsern zu Problemen kommt, indem sie den folgenden Code für diese Browser einfach auskommentiert.
3. Code: $(document).ready(function(){ //Wenn Seite vollständig geladen ist...
Man schaut, dass jQuery-Code immer erst nach dem vollständigen Laden der Seite ausgeführt wird. Diese Zeile bewirkt genau das.
4. Code: $("td.edit_header2").css('cursor','pointer');
Da es Benutzer gewohnt sind, dass bei anklickbaren Sachen das Symbol einer Hand erscheint, ändert diese Zeile den Cursor beim überfahren des Headers in eine Hand.
5. Code: $("td.edit_header2").click(function() { document.location.href="URL"; });
Das ist die ausschlaggebende Zeile.
Sie sagt, dass bei einem Klick auf den Header diese Anweisung
Code: document.location.href="URL";
ausgeführt werden soll.
Diese ändert die URL der gerade geladenen Seite auf die angegebene.
6.
Hier werden nur ein paar Klammern geschlossen, die vorher in Punkt 3 aufgemacht wurden.
7. Code: // -- Ende verstecken -->
</script>
Diese letzten beiden Zeilen sind sozusagen das Gegenstück zu Punkt 2.
Es wird zuerst den älteren Browsern signalisiert, dass sie jetzt wieder "aufpassen" dürfen und in der letzten Zeile wird dem Browser mitgeteilt, dass hier der Javascript-Code endet.
Wenn du Verbesserungsvorschläge für dieses Tutorial hast kannst du mir diese gerne per PN mitteilen. ______________ Forenregeln, FAQ, Suchfunktion |
