SPECIALS FÜR JIMDO-IMAGES - TEIL 2

weitere Hover-Effekte

OnMouseOver - OnMouseOut (html-Widget)

reines html
benötigt:
- Quelldateien für Bilder auf versteckter Seite oder auf externem Webspace
- URLs der Quelldateien müssen extrahiert werden (Pfade)
- ggf. CSS zur Formatierung der Bilder

Beispiel 1

html-Widget

<img src="https://stockholmtest-pottery.jimdofree.com/app/download/13945965990/standard-light.jpg?t=1652522448" alt="light to dark"

onmouseover= "src='https://stockholmtest-pottery.jimdofree.com/app/download/13945966090/standard-dark.jpg?t=1652522432'"

onmouseout= "src='https://stockholmtest-pottery.jimdofree.com/app/download/13945965990/standard-light.jpg?t=1652522448'" />

</a>

Beispiel 2

html-Widget

<img src="https://stockholmtest-pottery.jimdofree.com/app/download/13945966090/standard-dark.jpg?t=1652522432" alt="dark to light"

onmouseover= "src='https://stockholmtest-pottery.jimdofree.com/app/download/13945965990/standard-light.jpg?t=1652522448'"

onmouseout= "src='https://stockholmtest-pottery.jimdofree.com/app/download/13945966090/standard-dark.jpg?t=1652522432'" />

</a>

Quelldateien:

Jimdo Standard-Image (light)

standard-light.jpg

JPG Bild 13.5 KB

Download

Pfad:

https://stockholmtest-pottery.jimdofree.com/app/download/13945965990/standard-light.jpg?t=1652522432

Jimdo Standard-Image (dark)

standard-dark.jpg

JPG Bild 11.1 KB

Download

Pfad:

https://stockholmtest-pottery.jimdofree.com/app/download/13945966090/standard-dark.jpg?t=1652522448

Pfade extrahieren:

CSS-Hover Effekt mit filter-animation

jQuery + CSS Lösung
benötigt:
- Jimdo-Standard-Bildelement (Basis-Element)
- jQuery-Widget (Klasse mit filter zuweisen)
- CSS-Klasse (Filter)

Mit dieser Methode sind verschiedene Effekte möglich, als die hier dargestellten (s.h.: https://www.w3schools.com/cssref/css3_pr_filter.asp). Sie Funktioniert bei allen Jimdo-Standardelementen, die Bilddateien enthalten (...auch Jimdo-Slider). Besondere Effekte lassen sich mit transparenten .png-Images erzielen.

Wichtig: Der Bildinhalt wird bei dieser Methode nicht geändert!

Beispiel:

Jimdo Standardelement mit CSS hover-effect (filter)

filter: brightness(50%) grayscale(50%) drop-shadow(8px 8px 10px gray);

filter: contrast(150%) brightness(150%) drop-shadow(8px 8px 10px gray);

CSS-Hover Effekt für Jimdo-Standard-Bildelemente

jQuery-Lösung

html + jQuery Lösung
benötigt:
- Jimdo-Standard-Bildelement (Basis-Element)
- Quelldatei für Overlay-Bild auf versteckter Seite oder auf externem Webspace
- Pfad der Quelldatei für Overlay-Bild
- ID des Basiselements
- jQuery-Widget (SwapImage)
ggf. CSS zur Formatierung der Bilder

Beispiel:

Basis-Image

(Jimdo-Standard-Bildelement)

ID = #cc-m-13945971490

SwapImage-Widget

//<![CDATA[

$(document).ready(function(){

$('#cc-m-13945971490 img').removeAttr('srcset');

$('#cc-m-13945971490 img').attr("data-hover", "https://stockholmtest-pottery.jimdofree.com/app/download/13945977690/swapimage.jpg?t=1652524719");

});

$("#cc-m-13945971490 img").mouseover(function() {

$(this).attr('src', $(this).data("hover"));

}).mouseout(function() {

$(this).attr('src', $(this).data("src"));

});

//]]>

</script>

ID extrahieren

SwapImage (Overlay)

swapimage.jpg

JPG Bild 10.1 KB

Download

Bildadresse (Pfad) :

https://stockholmtest-pottery.jimdofree.com/app/download/13945977690/swapimage.jpg?t=1652524719

Hover-Effekt (filter) mit PNG (transparent)

CSS- und html-Lösung (automatisierung per jQuery möglich = Klassenzuweisung für Standardbildelemente)
benötigt:
- CSS-Klasse für Standardbild
- Jimdo-Standard-Bildelement (oder html einer Quelldatei s.o.)
- jQuery-Widget für Klassenzuweisung oder html-Zuweisung class="my_filter"
- CSS-Klasse für Filter (Style-Anweisung)

Portfolio

Hallo, ich bin ein Textblock! Ich bin hier, um dir ein wenig Inspiration für deine eigenen Texte auf deiner neuen Webseite zu liefern. Gut? Super, los geht’s:Kennst du die KISS-Regel? Heißt: Keep it short and simple, also halte es kurz und einfach. Leser lieben nämlich knackige Texte. Versuch also, alles so gut wie möglich auf den Punkt zu bringen.Texte, die Google & Co. lieben: Verwende Suchbegriffe, mit denen du selbst nach dir googeln würdest. Gerne am besten in der Überschrift, das kommt bei Suchmaschinen besonders gut an.

Das Studio

Hallo, ich bin ein Textblock! Ich bin hier, um dir ein wenig Inspiration für deine eigenen Texte auf deiner neuen Webseite zu liefern. Gut? Super, los geht’s: Kennst du die KISS-Regel? Heißt: Keep it short and simple, also halte es kurz und einfach. Leser lieben nämlich knackige Texte. Versuch also, alles so gut wie möglich auf den Punkt zu bringen. Texte, die Google & Co. lieben: Verwende Suchbegriffe, mit denen du selbst nach dir googeln würdest. Gerne am besten in der Überschrift, das kommt bei Suchmaschinen besonders gut an.