Tutorial: Werbelink
Vorschau
Unten rechts auf dieser Seite oder unter filmag.jimdo.com
Schwierigkeitsgrad
einfach - gut machbar auch ohne HTML-Kenntnisse
Tutorial
1. Grafiken hochladen
Zuerst müsst ihr eure Grafik mit dem Werbetext hochladen. Dazu sind zwei Grafiken notwendig: Eine, die standardmäßig angezeigt wird und eine, die beim Überfahren mit der Maus die erste ablöst. Dazu erstellt ihr eine Versteckte Seite auf eurer Jimdo-Page und ladet dort die Bilder hoch. Bei mir waren es dann folgende 2 Dateien:
| Angezeigte Grafik: | Mouseover Grafik: | |
Größenunterschiede wie bei mir machen nichts aus, die Grafik hat dann einen "Aufpopp"-Effekt. Grundfarben und Aufbau sollten jedoch gleich/ähnlich sein.
2. Code einfügen
Jetzt müsst ihr den unten stehenden Code auf eure Page in ein Widget/HTML-Modul einfügen. Das macht ihr entweder in der Sidebar, wenn der Werbelink auf jeder Unterseite erscheinen soll, oder ganz unten auf der gewünschten Seite, falls er nur auf dieser einen Seite erscheinen soll.
<div class="n">
<div style="position: fixed; bottom: 0; right: 20px;">
<a href="http://Link"><img src="Bild1.jpg" onmouseover="this.src='Bild2'"
onmouseout="this.src='Bild1'" alt="" /></a>
</div>
</div>
3. Folgende Sachen müsst ihr im Code anpassen:
http://Link
Die Zieladresse, hierhin wird verlinkt.
Bild1
Auf der versteckten Seite (Ansichts-Modus eurer Page): Rechtsklick auf eure Grafik, Eigenschaften und die Adresse rauskopieren. Die kommt hier rein.
Bild2
Siehe Bild1, nur dieses mal das Mouseoverbild
bottom: 0; right: 20px;
Das könnt ihr einfach so lassen oder euren Wünschen nach anpassen:
bottom: 0; ist der Abstand vom Rechten Bildschirmrand in Pixel (px) Ihr könnt "bottom" auch durch "top" ersetzen, dann ist der Werbelink eben oben.
right: 20px; ist der Abstand vom rechten Bildschirmrand. Wollt ihr das ganze links haben, einfach "right" durch "left" ersetzen.
4. Die Tutorialsammlung unterstützen
Unterstützt die Tutorialsammlung, damit es auch weiterhin Jimdo Tutorials gibt!
Z.B. indem ihr auf "gefällt mir" drückt oder meine Hauptseite besucht.
Kommentar schreiben
puertocruz1 (Samstag, 05 Februar 2011 00:29)
Herzlichen Dank, funktioniert!
Fabian, was muss ich ergänzen, damit der Link bei einem einfachen Klick in einem neuen Tab aufgeht?
Danke für Deine Unterstützung
Markus
Jimdo Tutorialz (Samstag, 05 Februar 2011 16:19)
So was hängt immer ganz vom Browser des Besuchers ab, man kann es nicht im Code festlegen. Das muss jeder Benutzer in seinen Browsereinstellungen. Wenn du hinter dem href="http://Link" ein Lehrzeichen und dann target="blank" einfügst, öffnen Browser den Link mit höherer Wahrscheinlichkeit in einem neuen Tab.
Gruß Supporter Fabian
scanfoto-breisgau (Donnerstag, 17 März 2011 15:23)
Hallo Fabian,
erstmal ein dickes Lob für deine Seite und die leicht verständlichen Tutorials. Schön daß bei dir auch das Design nicht zu kurz kommt, wirkt alles durchdacht und gut gestaltet.
So, genug geschleimt ;-), folgendes Problem: würde gerne die oberen Flächen (rot, grün, blau)als einzelne mousover Schaltflächen nutzen. Hab dazu versucht, dein "Werbelink" Tutorial zu nutzen. Klappt auch so weit ganz gut, nur sollten natürlich die Schaltflächen (die "absolute"angewendet werden) für zentrierte Pages sein, sprich eine ausrichtung von der Mitte ausgehend.
Also eigentlich die Mischung aus "Werbelink" und dem "Unterseiten Header", für zentrierte Pages mit absoluter, zentraler Ausrichtung, nach links und rechts verschiebbar. Habs jeztzt selbst schon paarmal probiert, bekomms leider nicht hin.
Wäre natürlich für jegliche Tipps und Anregungen dankbar.
LG aus Konstanz
Lukas Marquardt (Sonntag, 17 April 2011 18:02)
Ich bin begeistert ;)
peters-gaestehaus (Freitag, 10 Juni 2011 11:21)
Hat super funktioniert! Vielen Dank! Ich werde bestimmt noch mehr ausprobieren.
Grüße aus Cuxhaven
Speedskating-Salzburg (Dienstag, 29 November 2011 22:40)
Hallo Fabian!
Super Tutorials. Ich habe schon einige umsetzen können und auf meiner Seite auch schon einen Link zu dir gesetzt. Kann ich das Werbelink Tutorial auch mit meiner Facebook Likebox machen? Ich hab so eine Seite schon gesehen.
Jimdo Tutorials (Mittwoch, 30 November 2011 01:05)
Klar. Unter http://developers.facebook.com/docs/plugins/ kannst du die verschiedenen Widgets aussuchen. Dann einfach den Teil des codes hier:
--
<a href="http://Link"><img src="Bild1.jpg" onmouseover="this.src='Bild2'" onmouseout="this.src='Bild1'" alt="" /></a>
--
Mit dem neuen Code ersetzen. Fertig.
Gruß, JimdoFriend Fabian
Speedskating-Salzburg (Donnerstag, 01 Dezember 2011 23:29)
Hallo Fabian!
Danke für den Tipp.
Schöne Grüße
Tom
slrg-obwalden (Sonntag, 29 Januar 2012 16:16)
Hallo Fabian
Hast du auch eine Anleitung wie man einen Mouseover bei einem Text statt bild macht?
z.Bs. Ich gerne den Text über dem text AUSBILDUNG der Mouseover kommt mit den Infos.
Herzlichen Dank im Voraus, übrigens geile Idee mit deinem Tutorial, einfach eine Super Sache mach weiter So, schaue gern herein!!!
Gruss aus der Schweiz
Jimdo Tutorials (Montag, 30 Januar 2012 19:03)
Hallo! Theoretisch ist das möglich, ein Tutorial gibt es dafür von mit dennoch nicht. Das liegt an der Tatsache, dass man so etwas immer ganz spezifisch für einen Fall coden muss. Ein allgemeines Tutorial ist da gar nicht möglich.
Aus Zeitgründen kann ich leider kein persönliches Codeing oder persönlichen Support anbieten.
Gruß, JimdoFriend Fabian
shudoin (Samstag, 25 Februar 2012 19:38)
Hallo Fabian,
hab eine kurze frage, möchte gerne die Bilder untereinander haben. Ist das möglich ?
Gruß Kai
frankfurt-tshirts (Samstag, 25 Februar 2012 20:27)
Hi,
also bei mir klappt alles ausser das wenn man einmal auf den link kommt das bild ausklappt und dann weg ist. Es bleibt dann nur ein kleines quadrat das anzeigt das hier eigentlich ein bild sein sollte.
Wie kann ich es machen das der link permanent da bleibt.
Danke
frankfurt-tshirts (Samstag, 25 Februar 2012 20:32)
Und noch ne frage dazu.
Kann ich es auch so machen das die Grafik z.B. in der mitte der seite auftaucht und nicht nur am ende oder am anfang.
Danke
Jimdo Tutorials (Sonntag, 26 Februar 2012 16:40)
@shudoin
Am besten vorher alle mit einem Grafikprogramm zu einem Bild verschmelzen? Separate Links funktionieren dann natürlich nicht.
@frankfurt-tshirts
Dann hast du den zweiten Bildlink (Mouseover) falsch eingefügt. Bitte noch einmal überprüfen und korrigieren.
Wenn du das "right" im Code durch "center" ersetzt, soltle auch das zentrieren klappen.
Kikki. ♥ (Sonntag, 25 März 2012 19:28)
Was ist bei "Bild1" mit "Eigentschaften" und "Adresse" gemeint? Ich weiß nicht, wo ich die hernehmen soll.
Jimdo Tutorials (Montag, 26 März 2012 10:26)
Na du hast die zwei Bilddateien ja in Schritt 1 auf einer versteckten Seite hochgeladen. Diese Seite öffnest du (im Ansichts-Modus, nicht im Bearbeiten-Modus). Dann musst die die Grafikadresse herauskopieren also ein Rechtsklick auf das Bild und dann:
im Firefox: "Grafikadresse kopieren"
im Internet Explorer: auf "Eigenschaften", dort steht die Adresse, die kopieren.
Gruß, JimdoFriend Fabian
Kikki. ♥ (Montag, 26 März 2012 17:54)
Achso! Dankeschön :)
Es funktioniert (:
maiii (Donnerstag, 19 April 2012 14:42)
bei mit ist da so ein komischer weißer rand :(
Jimdo Tutorials (Freitag, 20 April 2012 11:39)
Ohne einen Link zur Ansicht kann ich dir da schlecht weiterhelfen...
JimdoFriend Fabian
Enise A. (Montag, 14 Mai 2012 09:59)
Super- es funktioniert prächtig! Mouseovers konnte ich zwar schon vorher, aber dass man die Werbelinks uach mit so etwas macht hätte ich nicht gedacht xD Eine frage hab ich aber noch zu deiner Grafik: Welche Schrift(-größe) hast du für dein.. pfeil benutzt? Würde mich freuen wenn du antworten könntest ;)
Sensation Photography- Enise A.
Jimdo Tutorials (Montag, 14 Mai 2012 10:57)
Der Pfeil ist keine Font, sondern eine Standard-Form in Photoshop...
Gruß, JimdoFriend Fabian
pro-heuer (Mittwoch, 17 Oktober 2012 17:56)
das ding ist der burner :-) vielen dank. guck mal www.pro-heuer.de