Bilder in Textfeldern

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!

 

  • Bilder hochladen (ggf. auf versteckter Unter-Seite)
  • Seite mit Bildern im Ansichtsmodus öffnen und Bild in den Zwischenspeicher kopieren (...rechte Maustaste Klick auf Bild = Kontextmenü Bild kopieren)
  • Textfeld im Bearbeitungsmodus erstellen
  • Bild aus Zwischenspeicher einfügen

 

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:

 

Kostenlose Jimdo-Seite erstellen!

 

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!

 

Bildposition (rechts/links) festlegen

 

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:

 

  1. Bild im Texteditor markieren
  2. mit einem Klick auf die Schaltflächen für die Ausrichtung "links ausgerichtet" oder "rechts ausgerichtet" dem Bild die gewünschte Position  zuweisen
  3. Im HTML-Modus danach den Randabstand des Bildes einstellen
    (style-Anweisung eränzen mit Zusatz "margin: ...;" oder "padding: ...;" )

    Erklärung s.h.:

 

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" />

 

 

 

PS: keine Anfasser mehr im neuen Jimdo?

Lösung: Statt "Bild im Textfeld" nimm "Bild in Tabellenfeld" In Tabellenfeldern werden für alle eingesetzten Elemente Anfasser generiert!

Aktualisierung:

Pfade von Bildern in html austauschen

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

original
original
hover (MouseOver)
hover (MouseOver)

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:

map