Weitere Hover-Effekte
OnMouseOver - OnMouseOut (html-Widget)
Bei dieser Methode wird das ursprüngliche Bild "OnMouseOver" durch ein anderes Bild ausgetauscht und bei "OnMouseOut" wieder zurück gewechselt. Nachteil: die Quelldateien für die Bilder müssen online erreichbar sein und per Pfadangabe richtig zugewiesen werden - html-Kentnisse erforderlich.
Beispiel 1
html-Widget
<a class="link" href="#cc-m-13945978690" target="_self" title="light to dark">
<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
<a class="link" href="#cc-m-13945978390" target="_self" title="dark to light">
<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:
Pfad:
https://stockholmtest-pottery.jimdofree.com/app/download/13945965990/standard-light.jpg?t=1652522432
Pfad:
https://stockholmtest-pottery.jimdofree.com/app/download/13945966090/standard-dark.jpg?t=1652522448
Pfade extrahieren:
CSS-Hover Effekt mit filter-animation
Mit dieser Methode können verschiedene Effekte erzielt werden (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)
format following element:
animate filter1 = filter: brightness(0.5) grayscale(50%) drop-shadow(8px 8px 10px gray);
filter: brightness(50%) grayscale(50%) drop-shadow(8px 8px 10px gray);
format following element:
animate filter2 = filter: contrast(150%) brightness(150%) 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)
SwapImage-Widget
ID = #cc-m-13945971490
SwapImage-Widget
<script type="text/javascript">
//<![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)
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)
format next element: animate filter1
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.
format next element: animate filter1
Hovereffekt (Filter)
für Jimdo-Standard Galerie (Slider)
- CSS- und jQuery-Lösung
- benötigt:
-
- Jimdo-Standard-Galerie (Slider)
- jQuery-Widget für Klassenzuweisung
- CSS-Klasse für Filter (Style-Anweisung)
format next element: animate filter1
Hovereffekt (Filter)
auf Jimdo-Standard Galerie (Vertikal.)
- CSS- und jQuery-Lösung
- benötigt:
-
- Jimdo-Standard-Galerie (Slider)
- jQuery-Widget für Klassenzuweisung
- CSS-Klasse für Filter (Style-Anweisung)
format following element: animate filter3
Hovereffekt (Filter)
Für Jimdo-Standardelement
- reine CSS-Lösung
- benötigt:
-
- Jimdo-Standard-Element (z.B.: Bildelement)
- CSS-Klasse für Filter (Style-Anweisung in html-Widget)
Mit dieser Methode kann man jedem Jimdo Standard-Element einen einfachen "Filter" Effekt zuweisen, wenn die Maus über das Element gefahren wird. Dazu wird dem Element über die ID des Containers, indem es sich befindet, eine CSS-Anweisung gegeben (...in html-Widget), die bei :hover ausgeführt wird.
Beispiel:
HowToDo:
Die Style-Anweisung im html-Widget (<style type="text/css"> ... </style>) wirkt sich direkt auf das im Container (#cc-m-14184979990) enthaltene Bild (img) aus:
<style type="text/css">
div#cc-m-14184979990 img:hover {
filter: brightness(0.5) grayscale(50%) drop-shadow(8px 8px 10px gray);
}
</style>
CSS
Hovereffekt (Filter)
auf Jimdo-Standard Galerie (Horizontal.)
- CSS- und jQuery-Lösung
- benötigt:
-
- Jimdo-Standard-Galerie (Slider)
- jQuery-Widget für Klassenzuweisung
- CSS-Klasse für Filter (Style-Anweisung)
format following element: animate filter3
Skripte
CSS
