Jedes Bild, dass an beliebiger Stelle im Internet* verfügbar ist, kann durch einfaches Kopieren in ein beliebiges Jimdo-Textfeld eingefügt werden.
*Vorsicht: wird die Quelle gelöscht, ist auch das Bild auf der Jimdo-Seite weg!
Ein auf diese Weise eingefügtes Bild...
Öffnet man das so eingefügte Bild Im html-Modus, kann man sehen, dass es alle vereinbarten Attribute wie Höhe und Breite, Alt-Tag und Title-Tag etc. mitgenommen hat.
Beispiel:
Quell-Code:
<img id="cc-m-imagesubtitle-image-5695921864"
style="width: 95px; height: 90px; display: block; margin-left: auto; margin-right: auto;" title="Kostenlose Jimdo-Seite erstellen!"
src="http://u.jimdo.com/www32/o/s69854fd484825586/img/i330af2f39250bfa9/1349162600/std/
image.png" alt="Kostenlose Jimdo-Seite erstellen!"
name="cc-m-imagesubtitle-image-5695921864" />
TIPP: Die Image-id (hier: id="cc-m-imagesubtitle-image-5695921864") kann gelöscht oder zu Formatierungszwecken über den head-Editor verwendet werden.
Das eingefügte Bild lässt sich im Jimdo-Texteditor wie normaler Text bearbeiten (ausschneiden, verschieben, kopieren, verlinken etc).
Außerdem bekommt es sog. "Anfasser", wenn es markiert wird. Mit diesen kann man sehr bequem die Bildgröße ändern, wenn man vorher im html-Modus die Parameter für "width" und "height" gelöscht hat (!).
TIPP: Durch eine solche händische Grössenänderung werden die Parameter für "width" und "height" vom Jimdo-Editor automatisch wieder hinzugefügt, dann allerdings nicht mehr fixiert, sondern flexibel!
Um ein auf oben beschriebene Weise in ein Textfeld eingefügtes Bild (...wie in diesem Absatz) rechts- oder linksbündig neben den Text zu stellen, kann man es entweder in eine Tabelle setzen, oder folgendermaßen vorgehen:
Im Beispiel oben ist der Quellcode des Bildes auf diese Weise folgendermaßen abgeändert worden:
<img id="cc-m-imagesubtitle-image-5695925864"
style="margin: 0 20px; float: left;"
src="https://u.jimcdn.com/www32/o/s69854fd484825586/img/i330af2f39250bfa9/1349162600/std/image.png" alt=""
width="50" height="50" />
Lösung: Statt "Bild im Textfeld" nimm "Bild in Tabellenfeld" In Tabellenfeldern werden für alle eingesetzten Elemente Anfasser generiert!
Wenn man auf einer Webseite einen html-Code einsetzen möchte, durch den Bildelemente eingebunden werden, muss man oft im html-Widget-Element den Pfad der Bilder anpassen.
Beispiel:
<a href="/">
<img border="1px solid #666"
onMouseOver="this.src='ico/view.hover.png';"
onMouseOut="this.src='ico/view.png';"
src="ico/view.png"
alt="hover effect"
/>
</a>
Die Pfade der Bilder ico/view.hover.png und ico/view.hover.png wären auszutauschen mit den Pfaden der eigenen Bilder, damit der Code im Jimdo html-Widget funktioniert.
Vorgehensweise:
1. beide Bilder hochladen als Jimdo Standard-Bildelement
2. rechte MT: Klick auf Bild und auswählen "Bildadresse kopieren"
3. Inhalt der Zwischenablage in html einsetzen anstelle von this.src='...'
Beispiel:
<a href="/">
<img style="border: 1px solid #666" onMouseOver="this.src='https://image.jimcdn.com/app/cms/image/transf/dimension=107x10000:format=jpg/path/s69854fd484825586/image/i6ee21f7f1ccc65f6/version/1609864256/image.jpg';" onMouseOut="this.src='https://image.jimcdn.com/app/cms/image/transf/dimension=107x10000:format=png/path/s69854fd484825586/image/i03ff06665419f15e/version/1609864235/image.png';" src="https://image.jimcdn.com/app/cms/image/transf/dimension=107x10000:format=png/path/s69854fd484825586/image/i03ff06665419f15e/version/1609864235/image.png" alt="hover effect" width="80px" height="auto" alt="map" title="Map" />
</a>
Ergebnis: