Auf dieser Seite findest du die wichtigsten Tutorials zum Thema Bilder im Jimdo Baukasten
Tutorial: Bildqualität erhöhen
Anleitung
Das Problem: Das Problem des Bilder-Uploads bei Jimdo ist, dass die Bilder fast immer neu komprimiert und skaliert (d.h. die Größen verändert) werden. Das wollen wir mit diesen Tipps umgehen oder zumindest die Komprimierung abschwächen.
Bildgröße: Ausschlaggebend für die Qualität des Bildes ist die Auflösung. Das Bild sollte schon von Anfang an in der richtigen Auflösung sein. Ein Banner, das 500 Pixel breit angezeigt werden soll, muss also schon eine Breite von 500 Pixel besitzen und nicht erst mit Jimdo auf 500 Pixel verkleinert werden. Dabei darf es die maximale Seitenbreite eurer Page natürlich nicht überschreiten.
In Originalgröße: Wenn euer Bild (wie in Punkt eins empfohlen) schon die richtige Größe besitzt, solltet ihr das Bild bei Jimdo maximal vergrößern. Verwendet also beim Hochladen des Bildes den „+“ Button, bis sich die Größe nicht mehr ändert. Hinweis: Hierfür darf die Breite des Bildes natürlich nicht größer sein, als die Breite eurer eigentlichen Webseite. Ergebnis: Bildqualität wie in der Originaldatei! Dabei ist eine maximale Bildgröße von 1820 x 10.000 Pixel möglich. Ja ihr habt richtig gelesen, 10.000 Pixel.
Galerie: Bei der Galerie dürfen die Bilder maximal eine Höhe von 1820 Pixel und eine Breite von 1280 Pixel haben. Wenn euer Bild breiter oder höher ist, ändert die Größe bereits vor dem Hochladen auf diese Maximalwerte (außer natürlich es ist bereits kleiner). Pro Upload könnt ihr maximal 100MB auf einmal hochladen oder maximal 150 Bilder.
Format: Noch einen kleinen Tipp zu den Formaten: Während für Fotos jpg eigentlich immer ziemlich gut funktioniert, ist für ein Banner oder Logo mit vielen Farbflächen oder viel Text das Format gif oder png deutlich besser. Bei gif werden zwar die Farben eingeschränkt, dafür ist es viel schärfer. Optimal für Schriften.
Tutorial: Mouseover Bildwechsel
1. Was ihr braucht:
Zwei Grafiken, eine die standardmäßig erscheint und eine, die beim Überfahren des Bilds mit der Maus angezeigt wird. Es empfiehlt sich beim Mouseover-Bild nur kleine Änderungen wie z.B. einen Schwarzweißfilter zu machen.
2. Hochladen
Erstellt eine versteckte Seite (oder nutzt eine vorhandene). Dort erstellt ihr ein Bild-Modul und ladet zuerst das Standardbild hoch, also das, welches ohne Mouseover angezeigt wird. Speichern.
Darunter erstellt ihr ein zweites Bild-Modul und ladet das zweite Bild, also die Mouseover-Grafik hoch.
Jetzt geht ihr in den Ansichts-Modus der versteckten Seite und kopiert beide Links in ein Textdokument: Rechtsklick auf das Bild > Eigenschaften > Die Bild-URL herauskopieren. Alles was nach der Dateiendung (wahrscheinlich .jpg) kommt, löscht ihr.
3. Einbauen
Fügt folgenden Code in ein HTML-Objekt ein (dort, wo das Objekt erscheinen soll):
<a href=“Link“><img src=“Standardbild“ alt=““ onmouseover=
„src=’Mouseoverbild'“ onmouseout=“src=’Standardbild'“ /></a>
Link: Falls das Bild verlinken soll, den Ziel-Link hier einfügen
Standardbild: Bild-Adresse des ersten hochgeladenen Bildes
Mouseoverbild: Adresse des Bilds das beim Mouseover erscheinen soll
4. Preload (optional)
Eigentlich ist das ganze schon fertig, doch wir setzen noch einen drauf: Damit man die Maus nicht erst lange auf das Bild halten muss, bis die Mouseover-Grafik lädt, lassen wir sie vorher laden. Dazu diesen Code in ein neues HTML-Objekt unter dem Bild einfügen:
<script language=“JavaScript“ type=“text/javascript“>
//<![CDATA[
<!– hide from none JavaScript Browsers
Image1 = new Image(570,150)
Image1.src = „Mouseoverbild“
// End Hiding –>
//]]>
</script>
Mouseoverbild: Wieder Link zum Mouseoverbild (s.o.)
570,150: Länge und Breite des Bilds
1: Hier müsst ihr durchnummerieren. Jedes Mouseover-Objekt eine neue Nummer
Tutorial: Mouseover Bildzoom
1. CSS Code einfügen (einmalig)
Bild zum Vergrößern anklickenBild zum Vergrößern anklicken
Geht auf eurer Jimdo-Page auf „Einstellungen“ und dort auf „Head bearbeiten“. Hier fügt ihr folgenden Code oben ein. Ihr müsst euch für einen der zwei Stile entscheiden (mit oder ohne Rahmen).
Diese Aktion muss nur beim ersten mal durchgeführt werden, bei allen weiteren Bildern kann direkt bei Schritt 2 Begonnen werden.
Code mit Rahmen:
<style type=“text/css“>
.zoomimage-container {position: relative;}
.zoomimage-std {}
.zoomimage-zoom {visibility: hidden; position: absolute; background: #EEEEEE; padding: 5px; border: 1px solid #DDDDDD; z-index: 1; top: 0px; left: 0px;}
</style>
Code ohne Rahmen:
<style type=“text/css“>
.zoomimage-container {position: relative;}
.zoomimage-std {}
.zoomimage-zoom {visibility: hidden; position: absolute; z-index: 1; top: 0px; left: 0px;}
</style>
2. Bilddateien hochladen
Erstellt eine neue versteckte Seite auf eurer Page, oder verwendet eine versteckte Seite, welche ihr bereits für andere Tutorials aus der Tutorial- Sammlung verwendet.
Hier ladet ihr euer Bild in zwei Größen untereinander in den normalen Bilder-Modulen hoch: Einmal in der standard-Größe und einmal in der Größe, welche beim Mouseover angezeigt werden soll.
Am Besten bringt ihr die Grafiken schon vor dem Hochladen auf die gewünschte Größe (Auflösung) und vergrößert sie dann über das „+“-Symbol (siehe Bild) bis zum Maximum.
Speichern.
3. Bildadressen heraus kopieren
Geht nun in den Ansichts-Modus dieser versteckten Seite. Hier kopiert ihr die Bildadressen (Bild-URLs) der zwei Bilder einzeln heraus und speichert sie auf eurem PC in einem Dokument zwischen.
Firefox: Rechsklick, „Bildadresse kopieren“
Chrome: Rechsklick, „Bild URL kopieren“
Internet Explorer: Rechsklick, „Eigenschaften“, „Adresse“ (diese auswählen und kopieren)
4. Mouseover Bildzoom einfügen
Nun kommen wir endlich zum eigentlich Bildzoom. Geht in den Bearbeiten-Modus eurer Jimdoseite an die Stelle, an welcher der das Bild mit dem Bildzoom erscheinen soll. Fügt dort ein neues „Widget/HTML“ Modul ein.
In dieses Modul kopiert ihr folgenden Code, an welchem ihr einige Änderungen vornehmen müsst. Diese sind unten farbig beschriftet und erklärt.
<div class=“zoomimage-container“>
<a class=“zoomimage-std“ href=“http://google.de“><img src=“http://bildlink1.jpg“ alt=““ onmouseover=“javascript:document.getElementById(‚zoomimage1‘).style.visibility=’visible'“ /></a> <a href=“http://google.de“ class=“zoomimage-zoom“ id=“zoomimage1″ onmouseout=“javascript:document.getElementById(‚zoomimage1‘).style.visibility=’hidden'“ name=“zoomimage1″><img src=“http://bildlink2.jpg“ alt=““ /></a>
</div>
http://bildlink1.jpg
Diesen Code-Schnipsel ersetzt ihr mit eurer ersten herauskopierten URL, welche die Bildadresse des kleinen Bildes ist
http://bildlink2.jpg
Diesen Code-Schnipsel ersetzt ihr mit eurer zweiten herauskopierten URL, welche die Bildadresse des großen Zoom-Bildes ist
http://google.de (2x)
Diese zwei Code-Schnipsel ersetzt ihr (beide müssen identisch sein) mit der Adresse, zu welcher das Bild verlinken soll. Soll das Bild nicht verlinken, könnt ihr diesen Code-Teil herauslöschen.
1
Diese Nummerierung müsst ihr mit jedem weiteren Zoombild erhöhen. Bei eurem ersten Zoombild kann hier also die „1“ stehen bleiben. Wenn ihr auf der selben Seite ein zweites Zoombild einfügt, müssen hier alle vier 1en mit 2ern ersetzt werden. Beim dritten mit 3ern, usw. Wichtig, keins vergessen!
5. Speichern
Im HTML-Modul auf „Speichern“ klicken. Die Vorschau kann unter Umständen nicht richtig funktionieren, einfach in den Ansichts-Modus der Seite gehen und schon seht ihr das Ergebnis. Fertig.
6. Probleme im Spalten-Modul
Fügt ihr ein Zoombild in ein Jimdo Spaltenmodul ein, wird es meist abgeschnitten. Das Zoombild sollte daher wenn möglich nicht in Spalten eingefügt werden. Könnt ihr nicht darauf verzichten, müsst Ihr zusätzlich folgenden Code unter „Einstellungen“, „Head bearbeiten“ einfügen. Das kann allerdings zu Problemen bei anderen vorhandenen Spalten führen, diese müssen direkt im Anschluss überprüft werden.
<style type=“text/css“>
.cc-m-hgrid-column .n {overflow: visible;}
</style>