Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Mit einem CSS-Hover-Effekt und JavaScript ist es möglich, Bilder beim Ăberfahren mit der Maus zu wechseln und Audio abzuspielen. Die Idee besteht darin, zwei Bilder hintereinander zu platzieren, wobei das zweite Bild erst sichtbar wird, wenn die Maus darĂŒber fĂ€hrt. Dieser Effekt wird im Netz oft als 'CSS-Bild-Hover-Effekt' bezeichnet und kann mit CSS und HTML realisiert werden. Im Folgenden wird kurz erklĂ€rt, wie man den Effekt ohne Umrandung um das Bild und gĂŒltigem HTML erreichen kann. AuĂerdem wird erlĂ€utert, wie man den Effekt mit @keyframes stylen und Audio mithilfe von JavaScript einbinden kann.
Wolken k-images, Doppeldecker OpenClipart-Vectors u. Audio salamisound.
Missfallen: Browser 'Firefox' kann das mit dem Propeller nicht so ab.
Hiesig Beispiele
Tab 1: CSS-Hover-Effekt und HTML: Positionierung der beiden Bilder.
Tab 2: Bild durch Hover-Effekt ausblenden: Text wird sichtbar.
Tab 3:Verwendung von transform: rotateY(720deg)
und EinfĂŒgen eines dritten Bildes zwischen zwei anderen
Tab 4: Styling des Hover-Effekts mit @keyframes
 + das Bild bleibt am Ende des Mouseovers stehen.
Tab 5: Ein Bild beim Mouseover einblenden und beim Anklicken durch ein anderes ersetzen: Àhnlich wie beim Widget 'Suche' in der Mitte der Seitenleiste rechts.
Tab 6: Worauf bei SVG-Bildern zu achten ist und ein Hinweis zur Bildbeschriftung.
Tab 7: Das Audio mit Hover starten, das geht dann mit JavaScript
Tab 8: HÀufige Probleme bei der Audiowiedergabe im Browser und wie man sie löst
Tab 9: Interaktion SVG-Bild und Ditty News Ticker.
1
CSS-Hover-Effekt und HTML: Positionierung der beiden Bilder
Um ein Bild durch ein anderes zu ersetzen, kannst du die Class image-mouseover
 im Customizer oder im Child-Theme in der style.css
definieren. Die Attributwerte können dann je nach Bedarf und Zweck angepasst werden.
/* Class: .image-mouseover */
.image-mouseover {
position: relative;
width: auto;
height: auto;
float: left;
margin: 0 15px 15px 0;
}
.image-mouseover .before {
z-index: 1;
}
.image-mouseover:hover .after {
display: block;
}
.image-mouseover .after {
display: none;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
Pr. WP-Freund
Um schnell zwischen Bildern zu wechseln, kann die Eigenschaft display: none
verwendet werden. Wenn jedoch ein weicher Ăbergang gewĂŒnscht wird, sind Eigenschaften wie opacity
und transform
geeignet. Anstatt der letzten beiden Selektoren, die im vorherigen Beispiel gezeigt wurden, können die folgenden Selektoren verwendet werden.
.image-mouseover:hover .after {
display: block;
opacity: 1;
}
.image-mouseover .after {
opacity: 0;
transition: opacity 0.5s;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
Im HTML ist das dann die Class image-mouseover
. Siehe weiter hier im Beitrag. Erst mal âŠ
Die Bilder nach links oder rechts floaten!
Dies ist eine wichtige Lektion. Die beiden Bilder sollten nicht ohne den Float-Stil Beispiel float: right;
verwendet werden. Der Fehler ist hier im Mouseover-Bild auf der rechten Seite zu sehen.
Deshalb sollten die Bilder mit Float-Stilen positioniert werden, da dies eine genauere Positionierung ermöglicht. Andernfalls mĂŒssten sie mit Margins ausgeglichen werden.
Die Bilder floaten:
style="float: left;"
style="float: right;"
Das mit dem margin
- Die CSS-Eigenschaft
margin
wird verwendet, um AbstĂ€nde um ein Element herum zu definieren. Wenn sie bei einem Bild verwendet wird, kann sie beispielsweise den Abstand zwischen dem Text und dem Bild oder den Abstand des Bildes zum Rand des ĂŒbergeordneten Elements einstellen.
HTML
<div class="image-mouseover" style="float: right;"><img class="before alignnone" style="margin: 10px 20px 10px 10px;" src="https://..wegerl_wurmi1.svg" alt="image" width="120" height="150" /> <img class="after alignnone" style="margin: 10px 20px 10px 10px;" src="https://..wegerl_wurmi2.svg" alt="image" width="120" height="150" /></div>
<div class="image-mouseover" style="float: right;"><img class="before alignnone" style="margin: 10px 20px 10px 10px;" src="https://..wegerl_wurmi1.svg" alt="image" width="120" height="150" /> <img class="after alignnone" style="margin: 10px 20px 10px 10px;" src="https://..wegerl_wurmi2.svg" alt="image" width="120" height="150" /></div>
Die beide Bild zentrieren?
Dazu ist eine Class sehr gut.
CSS
.ctr {
position: relative;
margin-left: auto;
margin-right: auto;
width: 180px;
height: 225px;
}
Wenn das CSS so in Childs-Theme, dann ist fĂŒr width: 180px !important;
 und fĂŒr height: 225px !important;
HTML
So beide Bild in einem zentriert.
<div class="image-mouseover ctr">
<div class="image-mouseover ctr">
<img class="before" src="https://..wegerl_wurm1.svg" alt="image" width="180" height="225" />
<img class="after" src="https://..wegerl_wurm2.svg" alt="image" width="180" height="225" /></div>
Apfel, cdz
Wurm, memoangeles
Anders bspw der Auszeichnung style="margin-left: 135px;"
ist das hier auch mittig, aber nicht responsive. Auch die beiden Bild mit aligncenter
und so wird das nichts.
Das SVG, ob das Bild mit
oder ohne Hintergrund?
So im Untertitel: Siehe da! â es ist hier zu sehen. Im Mouseover des Apfels rechts zeigt sich das ĂŒberlagert. Denn hier ist das SVG-Bild der Class after
ohne Hintergrund. âŠ

So nÀchst das erste Bild mit Class grayscale
Hinweis: Der Website im 'Dark Mode' ist das nicht visuell. Siehe den Switchbutton in der Headerzeile.


Also ist im Customizer oder so Childs-Theme in der style.css
eine Class zu erstellen.
CSS
/* grayscale(wert) â Graustufe */
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
HTML
<div class="image-mouseover" style="float: left;> <img class="before grayscale alignnone" style="margin-right: 10px;" src="https://..Foto.jpeg" alt="image" width="250" height="167" /> <img class="after alignnone" style="margin-right: 10px;" src="https://..Foto.jpeg" alt="image" width="250" height="167" /> </div> <p style="clear: both;">Text Text Text.</p>
Weiter: So allein mit <div class="image-mouseover">
, also ohne style="float: left;"
, ist zu bemerken, dass der Text nicht um das Bild flieĂt und der Hover die ganze Breite ausfĂŒllt. Somit ist es auch schöner, das Floaten anzuwenden. Wenn dann aber der Text darunter zu sein hat âŠ
Im HTML style="clear: both;"
<p style="clear: both;">Text Text Text</p>
Dasselbe so in Graustufe mit nur einem Bild
Zudem ist dem Bild, das von S/W auf farbig wechseln soll, eine Class zu erstellen. Somit ist dann nur ein Bild anstatt der zwei wie das Beispiel oberhalb. â CSS die Class grauauto
, die Attributwerte individuell.
/* Class: grau-auto */
.grauauto img {
display: block;
width: auto;
height: auto;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
filter: grayscale(1);
transition: 0.5s;
}
.grauauto:hover img {
filter: grayscale(0);
}
HTML
<div class="grauauto"> <img src="https://..schul.svg" alt="image" width="600" height="400" /> </div>
<div class="grauauto"> <img src="https://..schul.svg" alt="image" width="600" height="400" /> </div>
Also in Einfachheit S/W zu farbig:
Hinweis: Der Website im âDark Modeâ ist das nicht visuell. Siehe den Switchbutton in der Headerzeile.
Tab 2: Text zwischen die zwei Bilder + dasselbe durch
opacity
zum langsamen Ăbergang.2
Bild durch Hover-Effekt ausblenden: Text wird sichtbar
In Bezug auf das Beispiel ist nach dem ausblenden von Bild der Text zu sehen.
Das sind nun drei Varianten, wobei der ersten in Darstellung so ruckzuck ist. Die Zweite das Beispiel mit transition
. Dann die dritte Variante, wie das mit background-image
zu machen ist.
- Die ersten beiden Varianten unterscheiden sich untereinander, dass der ersten Variante zwei Bilder im HTML sind. Das zweite Beispiel (zweite Variante) ist aber das schönere, aber ich belasse hier auch die vorhergehende Variante zum Durchsehen. â evtl. ist das auch mal von nutzen.
- Die dritte Variante ist das Bild im CSS als
background-image
.
Anmerkung: Den Beispielen ist das mit Shortcode vom Plug-in Statify Widget.Â
Erste Variante
Dem Beispiel ist der Text zwischen die zwei Bilder zu setzten. ⊠Mouseover erst mal den Farbroller.
⊠besuch ebenda? â so in 8-Tage
mag sein 12 Ă
⊠ich danke ziemlich!
Das Beispiel obig ist mit zwei Bilder:
Die Bilder sind hier SVG. Das erste Bild ist evtl. mit Hintergrund zu arrangieren, weil so auch der Griff seitlich abgedeckt ist.
Folgend nun das HTML; das mit dem anzuzeigenden Text ist in blau.
<div class="image-mouse"> <img class="before alignnone" src="https://../farbroller.svg" alt="image" width="225" height="70" /> <p style="margin: -85px 0 0 35px; font-size: 16px;">[statify-count prefix="d.h. hier in 8-Tage:" suffix="x"] ⊠ich danke ziemlich! â.</p> <img class="after alignnone;" src="https://../farbroller-hintergrund.svg" alt="image" width="225" height="78" /> </div> <p style="clear: both;">Text</p>
NatĂŒrlich ist zur obigen Class image-mouse
diese auch zu erstellen.
/* Class: image-mouse */
.image-mouse {
position: relative;
width: auto;
height: auto;
float: left;
margin: 5px 10px 10px 0;
}
.image-mouse .before {
z-index: 1;
}
.image-mouse:hover .after {
display: none;
}
.image-mouse .after {
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
Wie immer das Fluchten bleibt fĂŒr sich. â dass es passt!
Zweite Variante
Weiter nun das mit transition
.
mag sein 12 Ă
⊠Dankeschön.
HTML
<div class="image-mouses"> <p style="margin: 10px 0 0 40px; font-size: 16px;">[statify-count prefix="mag sein" suffix="Ă" days="8"] ⊠Dankeschön. â.</p> <img class="alignnone;" src="https://../farbroller.svg" alt="image" width="225" height="78" /> </div> <p style="clear: both;">Text</p>
Weiter das CSS:
.image-mouses {
position: relative;
width: 225px;
height: auto;
float: left;
margin: 5px 10px 10px 0;
overflow: hidden;
height: 70px;
}
.image-mouses img {
position: absolute;
top: 0;
left: 0;
transition: left 1s ease-out;
}
.image-mouses:hover img {
transition: 0.25s ease-in;
left: -142px;
}
Wie immer das Fluchten bleibt fĂŒr sich. â dass es passt!
Oder die Lösung mit background-image
, dann ist folgendes zu machen.
Dritte Variante
https://jsfiddle.net/Pixelbart/ra03fm61/
Des Beispiels
Besuch dem Beitrag in 8-Tage:
mag sein 12 Ă
âŠ
HTML
<div class="abroller"> <div class="content"> <p style="margin-top: -5px; margin-left: -25px; font-size: 16px; font-weight: bold; color: #77a1a0;">[statify-count prefix="mag sein" suffix="Ă" days="8"] âŠ</p> </div> <div class="image"></div> </div> <p style="clear: both;">Text</p>
Weiter das CSS:
.abroller {
position: relative;
height: 50px;
width: 120px;
display: flex;
align-items: center;
padding: 0px 19px 6px 50px;
margin-bottom: -30px;
margin-left: auto;
margin-right: auto;
}
.abroller .image {
position: absolute;
margin-top: -20px;
background-image: url(https://wegerl.at/wp-content/uploads/2022/06/farbroller-3.svg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
left: 0;
transition: background 1s ease-out;
}
.abroller:hover .image {
transition: 0.25s ease-in;
background-position: -119px;
}
Wie immer das Fluchten bleibt fĂŒr sich. â dass es passt!
Tab 3:
transform: rotateY(720deg);
und drittes Bild zwischen die zwei Bilder. â wozu? + Drehende Icons: 10-Fache DrehungâŠ3
Verwendung von 'transform: rotateY(720deg)' und EinfĂŒgen eines dritten Bildes zwischen zwei anderen
So Beispiel von solcher Animation:
FĂŒr die Browser Chrome, Safari und Opera ist das okay, mit Firefox hapert das noch.
Das SVG-Bild ist in drei Teile zu zerlegen. Das Erste in Original, das Zweite ohne Propeller und mit Hintergrund. Das dritte Bild der Propeller und ohne Hintergrund.
- Die MĂŒtze im Original und ohne Hintergrund. Das erste Bild ist dasjenige, das zuerst sichtbar ist.
- Das zweite Bild ist ohne Propeller mit Hintergrund. Das zweite Bild zeigt dasselbe Bild ohne Propeller und mit einem Hintergrund. Es wird nur sichtbar, wenn die Maus darĂŒber bewegt wird. Da das zweite Bild einen Hintergrund hat, wird das erste Bild abgedeckt.
- Das dritte Bild ersetzt den Propeller vom ersten Bild. Gleichzeitig wird der Propeller im dritten Bild visuell dargestellt und ersetzt den Propeller im ersten Bild. Dieser Propeller soll sich nun auch drehen.
Es funktioniert auch so mit nur dem ersten und dritten Bild, die beide ohne Hintergrund sind. Die Animation wirkt aber viel besser mit den drei Bildern. Siehe hier nochmals oben.
Das CSS
Das CSS besteht aus zwei Teilen. ZunĂ€chst wird wie in Tab 1 des Abschnitts 'CSS-Hover-Effekt und HTML' eine erste Class definiert. AnschlieĂend ist wie hier gezeigt eine weitere Class zu erstellen, die fĂŒr die Rotation der Propeller verantwortlich ist.
/* Rotate horizontal=rotateY, Class myrot */
.myrot:hover {
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotateY(720deg);
-moz-transform: rotateY(720deg);
-o-transform: rotateY(720deg);
-ms-transform: rotateY(720deg);
transform: rotateY(720deg);
}
Animation mit zwei Bilder
- Da ist im zweiten Bild, das auch mit
<img class="afterâŠ
 dann die Class Namensmyrot
dabei.
Das HTML bspw.
<div class="image-mouseover" style="float: right;">
<img class="before alignnone" style="margin-top: -18px;" src="https://../geek.svg" alt="" width="150" height="150" />
<img class="after myrot alignnone" style="margin-top: -18px;" src="https://../geek-propeller.svg" alt="" width="150" height="150" />
</div>
Animation mit drei Bilder
- Hierbei ist dem mittleren Bild die die Class
after
- und dem folgenden Bild die Class
after
+Âmyrot
.
Das HTML bspw.
<div class="image-mouseover"> <img class="before alignnone" src="https://wegerl.at/wp-content/uploads/2020/12/Clker_Free_Vector_Images-geek-orig.svg" alt="" width="113" height="150" /> <img class="after alignnone" src="https://wegerl.at/wp-content/uploads/2020/12/Clker_Free_Vector_Images-geek-ohne.svg" alt="" width="113" height="150" /> <img class="after myrot alignnone" src="https://wegerl.at/wp-content/uploads/2020/12/Clker_Free_Vector_Images-geek-propellera.svg" alt="" width="113" height="150" /> </div>
Noch mal so bspw:
Drei Bilder zur Animation. Erst das Flugzeug in original. Dem Zweiten ist der Propeller opak. â somit scheint der Propeller vom ersten Bild durch. Im Anschluss der Propeller allein. Der Dreien SVG jeweils ohne Hintergrund.
Anmerkung: Das CSS der Class image-mouseover
ist das mit display: none;
bedingend! Also wie es Tab 1 vorgestellt ist.
<div class="image-mouseover" style="float: right; margin: -30px 50px 0 0;"> <img class="before alignnone" src="https://..OC-V-flugz-2-orig.svg" alt="" width="150" height="66" /><img class="after alignnone" style="margin-bottom: 2px;" src="https://..OC-V-flugz-2-propeller-ohne-opac80.svg" alt="" width="150" height="66" /><img class="after myrox" src="https://..OC-V-flugz-2-propeller-solo.svg" alt="" width="150" height="66" /> </div>
Dasselbe ⊠und đ Mouseover
So Spielerei
⊠im Zusammenspiel mit Plug-in Ditty:
Mouseover das Flugzeug âŠ
Das Beispiel ist auch im anklicke von Button anzuwenden. Wie das so mit anklicke Button gemeint ist, siehe zum Beitrag Das Plug-in Easy FancyBox. "Und mit Klick hier so fliege auch in den Wolken!"
Nur Drehung von Bild
⊠Das Tun fĂŒr die Website đ
Das HTML fĂŒr:
<img class="myrot alignnone" style="margin-left: 160px; margin-bottom: -10px; margin-top: 15px;" src="https://../geek.svg" alt="" width="150" height="150" />
Von
so sehr Ausgesuchtes
Drehende Icons:
10-Fache Drehung
(3600 Grad, 10 secunden)
Unter anderen Codes von Oliver Gast!
img.myrotes {
-webkit-transition: -webkit-transform 10s ease-out; /* Saf3.1+, Chrome */
-moz-transition: -moz-transform 10s ease-out; /* FF3.5+ */
-o-transition: -o-transform 10s ease-out; /* Opera */
transition: 10s ease-out;
}
img.myrotes:hover {
-webkit-transform: rotate(3600deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(3600deg); /* FF3.5+ */
-o-transform: rotate(3600deg); /* Opera */
transform: rotate(3600deg);
}
HTML
<img class="myrotes aligncenter" src="https://../Clker-Free-Vector-Images-cd-bplaced.svg" alt="" width="300" height="300" />
Des CSS Dank an Oliver Gast!
Anders der CD Lichtreflexe
So CD mit Lichtreflexe, die sind ja fĂŒr sich gleichbleibend. Somit kann es besser sein, wenn der Text darĂŒber gelegt und nur der sich dreht.
So mein frickeln:
/* Class: image-mouserl */
.image-mouserl {
position: relative;
width: auto;
height: auto;
display: block;
}
.image-mouserl .before {
z-index: 1;
}
.image-mouserl .after {
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
⊠so das HTML
<div class="image-mouserl myrotes" style="clear: both; float: left; margin-left: 68px;" data-hoverioaudio=""><img class="before alignnone" src="https://..cd-bplaced-1.svg" alt="" width="300" height="300" /> <a class="no-icon" href="https://www.bplaced.net" target="_blank" rel="noopener nofollow"><img class="after myrotes alignnone" src="https://..bplaced-cd-2.svg" alt="" width="300" height="300" /></a><audio><source src="https://..local-forecast-MP3-schnitt-clideo.com_.mp3" /></audio></div>
Das zum Audio siehe
Tab 7: Das Audio mit Hover starten.
Tab 4: Den Hover-Effekt stylen mit
@keyframes
. Das ist dann fĂŒr mehrere Bilder + Im Mouseover bleibt das Bild am Ende stehen.4
Hover-Effekt stylen mit @keyframes
Mit so @keyframes
lĂ€uft auch das mit den Bildern ĂŒber Stylesheet. Also die Pfade zu den Bilder mit Stylesheet von Drumherum sind im Customizer bzw. in der style.css
 einzutragen. Im HTML ist da nur die class
der Animation.
HTML
<div class="animation"></div>
"Die Class dazu die Bilder im CSS bei den @keyframes
."
â âŠMouseover hier malÂ
Siehe! â
jsfiddle.net/Pixelbart.
Das ist zum Einstieg mit den @keyframes
sehr hilfreich.
Das obige Beispiel mit den Jahreszeiten ist der Bildwechsel ab 0 % zu 33 % 66 % 100Â %. Die animation-duration: 4s;
, das ist die Zeitdauer der Animation im Gesamten.
So ist das CSS:
/* Animation Baum Jahreszeiten */
.animation {
margin: 0;
width: 180px;
height: 180px;
background-image: url(https://..kmicican-seasons-fruÌhling.svg);
background-repeat: no-repeat;
background-size: 100% auto;
}
.animation:hover {
animation-name: bildwechsel;
animation-duration: 4s;
animation-delay: 0.5s;
animation-timing-function: step-start;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes bildwechsel {
0% {
background-image: url(https://..kmicican-seasons-fruÌhling.svg);
}
33% {
background-image: url(https://../kmicican-seasons-sommer.svg);
}
66% {
background-image: url(https://../kmicican-seasons-herbst.svg);
}
100% {
background-image: url(https://../kmicican-seasons-winter.svg);
}
}
Gleich mit mehr von Bildern der Bildwechsel mit 0Â %, 20Â % 35Â % 50Â % 65Â % 80Â % und 100Â %. Mehr oder weniger Bildwechsel, wie 0Â %, 14Â % 28Â % 42Â % 56Â % 70Â % 85Â % 100Â %.
- Hinzuweisen ist da noch auf animation-iteration-count. Das ist dann so fĂŒr die Wiederholungen. Usw. Und dort der Website ist das alles erst mal der li. Seitenleiste unter 'Eigenschaften' âŠ
Im 'Mouseover' bleibt das Bild am Ende stehen?
Somit ist das fĂŒr so Animation wie schon oben zu sehen und hier der Roboti.
Das letzte Bild bleibt so stehen, solang Mouseover. Da ist wieder die Seite animation-fill-mode. Relevant ist dort nun der Code animation-fill-mode: forwards;
.
Siehe! â
jsfiddle.net/Pixelbart/. Dort ist das CSS auch.
- Die Animationen funken soweit auch mit Touch wie iPads und Handy. Aber so sehe auch im Titel
mouse over, mouse move, mouse outâŠ
 Die Animation zum Ersten 'Mouseover' ruckelfreiÂ
Des nÀchst ist so durchzulesen, aber ob von Erfolg, das bleibt dahingestellt.
Wenn man zum Ersten so @keyframes
Animation im Mouseover, da ist das meist nicht ruckelfrei. Hierzu oben die Animation mit dem BÀumchen ist das evtl. nicht so aufgefallen, aber mit Browser Safari die Verzögerung sicher schon.
Eine andere Möglichkeit ist, die Animationsgeschwindigkeit anzupassen. Man kann zum Beispiel die Anzahl der Schritte im @keyframes
-Block reduzieren oder eine lĂ€ngere Animationsdauer festlegen, um eine flĂŒssigere Bewegung zu erzeugen.
AuĂerdem kann man versuchen, die BildgröĂe zu reduzieren oder das Format zu Ă€ndern, um die DateigröĂe zu verringern und somit die Ladezeit zu verkĂŒrzen.
NĂ€chst Beispiel mit dem Roboti ist das aber augenfĂ€llig. So auszubĂŒgeln ist das mit Vorladen der Bilder in der header.php
im <head>
.
Bspw hier der drei Bilder zum Roboti, HTML:
<link rel="preload" href="/wp-content/uploads/../roboti.svg" as="image"> <link rel="preload" href="/wp-content/uploads/../roboti-soso.svg" as="image"> <link rel="preload" href="/wp-content/uploads/../roboti-maske.svg" as="image">
Infolge der TEST zu Browsern:
- Chrome hat 'Teilweise UnterstĂŒtzung', aber es funktioniert wie nicht!
- Zu Safari da steht 'KompatibilitĂ€t unbekannt', aber es funktioniert! â und hier ist das Vorladen schon die Bedingung, dass die Animation annehmbar ist.
- Feuerfuchs 'Volle UnterstĂŒtzung' und ist okay!
Nun, dass es auch zur Funktion im Chrome, so bedarf es nochmal von Codes. Damit dient das als "Fallback" fĂŒr nicht unterstĂŒtzte Browser:
<link rel="stylesheet" href="style.css">
Bemerkung
Allein des gewohnten Codes von <link rel="stylesheet" href="style.css">
ist das weder in Chrome noch in Feuerfuchs funktionell. Im bspw Safari genĂŒgte das!
Also dem Beispiel
Also dem Beispiel hier der Code fĂŒr die header.php
im <head>
. Sowohl des Codes zur style.css
als auch die Preloads der Bilder, das HTML:
<link rel="stylesheet" href="style.css"> <link rel="preload" href="/wp-content/uploads/../roboti.svg" as="image"> <link rel="preload" href="/wp-content/uploads/../roboti-soso.svg" as="image"> <link rel="preload" href="/wp-content/uploads/../roboti-maske.svg" as="image">
Childs Theme Preload
FĂŒr Freunde, welche Childs Theme mit wp_enqueue_style
in der functions.php
wird die CSS-Datei bereits korrekt von WordPress eingebunden. Also statt <link rel="stylesheet" href="style.css">
 reicht dann folgender Preload im Head-Bereich:
<link rel="preload" href="<?php echo esc_url( get_stylesheet_directory_uri() . '/style.css' ); ?>" as="style">
Browser Chrome: Soundso ist mit Browser 'Chrome' die Zeit von ca. 4 sec. zu gewÀhren. Mal so mal so lÀuft es nicht rund.
Die Nachlese
Vorladen von Inhalten mit rel = "Preload" und da
VORLADEN, VORRENDERN & NACHLADEN
Und wer jetzt meint, das hat sich der Wegerl so gefrickelt, der irrt! â denn das Basiswissen hier ist von Internet-Freund. FĂŒr den Support hier meine Danksagung!Â
Das nun Folgende funktioniert nicht so gut, eigentlich gar nicht! Da somit die Bilder der Animation im Ganzen ausgeblendet werden und der Fehler ist, dass das auch verbleibt. Also im TEST mit Browser Chrome, Safari und Feuerfuchs. So ist dahingestellt als Merkzettel:
⊠Funktioniert gar nicht
S. Preload fĂŒr die in Keyframes CSS-Hintergrundbilder.
Das HTML erhĂ€lt noch eine Class, hier namensgebend ’slides'
<div class="container slides"> <div class="animation2"></div> </div>
CSS die Class
.slides { background: url("https://..roboti-maske.svg") no-repeat -9999px -9999px, url("https://..roboti-soso.svg") no-repeat -9999px -9999px, url("https://..roboti.svg") no-repeat -9999px -9999px; animation: images 9s linear 0s infinite alternate; }
5
Ein Bild beim Mouseover einblenden und beim Anklicken durch ein anderes ersetzen
⊠Àhnlich wie hier beim Widget 'Suche' in der Mitte der Seitenleiste
Im Anlauf das Search Widget designen.
Mit dem CSS u. HTML s. Tab 1:
FĂŒr Obiges, das HTML
<img class="wp-image-197933" src="https://..Widgest-Suche.png" alt="Widgest-Suche" width="300" height="144" /> Das Bild als Double <div class="image-mouseover"> <img class="before alignnone" style="margin-top: -155px; margin-left: 170px;" src="https://..acharyaniraj1999-die-ameise-2.png" alt="image" width="125" height="120" /> <img class="after alignnone" style="margin-top: -88px; margin-left: 170px;" title="⊠Hurra da bin ich!" src="https://..acharyaniraj1999-die-ameise.svg" alt="image" width="125" height="120" /> </div>
Ganz anders und sehr anspruchsvoll
ist das im Folgenden
Ein Bild durch Mouseover einblenden und im Anklicke dann das andere. Dazu bitte ich dich hier das im Direkten im Widget 'Suche' re. Seitenleiste.
CSS
.widget .search-field {
background-image: url(https://..acharyaniraj1999-die-ameise-2.png);
background-size: auto 70%;
background-repeat: no-repeat;
background-position: 130% 140%;
transition: 0.2s;
}
.widget .search-field:hover {
background-position: 70% 140%;
opacity: 1;
}
.widget .search-field:focus,
.widget .search-field:active {
background-position: 60% 140%;
background-image: url(https://..acharyaniraj1999-die-ameise.svg);
}
Mein Dank wieder mal an Internet-Freund.
So als Merkzettel
background-size: auto 70%;
die Eigenschaft und dem Wert definiert die GröĂe eines Hintergrundbildes. Die sind komplett festzulegen oder nur teilweise, um so das eigentliche SeitenverhĂ€ltnis zu erhalten.background-repeat: no-repeat;
die Eigenschaft und infolge der Wert bestimmt, ob und wie Hintergrundbilder wiederholt werden.background-position: 130% 140%;
die Eigenschaft mit Wert bestimmt die Position des Hintergrundbildes.transition: 0.2s;
die Eigenschaft ist eine Kurzschreibweise fĂŒr 'transition-property', 'transition-duration', 'transition-timing-function' und 'transition-delay'.opacity: 1;
Die CSS Eigenschaft gibt die Transparenz eines Elements an, d. h. den Grad, zu welchem der Hintergrund des Elements ĂŒberlagert wird.
https://developer.mozilla.org/de/
Tab 6: Worauf bei so unterschiedlichen SVG-Bilder zu achten ist. + So ein Zeiger zur Bildbeschriftung.
6
Worauf bei SVG-Bildern zu achten ist
Es ist wichtig, bei der Verwendung von SVG-Bildern auf den Hintergrund zu achten.
Das erste SVG-Bild ist sichtbar, wĂ€hrend das zweite nicht sichtbar ist. Das zweite SVG-Bild sollte normalerweise einen Hintergrund haben, da sonst das erste Bild auch sichtbar ist. Das kann man am Beispiel des Apfellogos sehen, bei dem die beiden SVG-Bilder fast identisch sind. Das zweite SVG-Bild hat jedoch keinen Hintergrund, und der Unterschied zwischen den Bildern ist nicht so groĂ.
FĂŒr das Bild mit Hintergrund, das der class="after"
zugeordnet ist, kann man E. g. den Boxy-SVG-Editor verwenden. Hier kann man beispielsweise ein Rechteck ĂŒber das Bild legen, die Farbe dem Hintergrund anpassen und das Rechteck dann in den Hintergrund legen.
Das Beispiel ist CSS wie in der EinfĂŒhrung hier ganz oben der Website, also mit .image-mouseover
âŠ
⊠oder auch so Kreativ?
Hinweis zur Bildbeschriftung
Das Bild ist wie gehabt zu beschriften.
- Allerdings funktioniert das in dem 'Text Widget' nicht mit dem 'Individuelles HTML' Widget. Auch wenn man den Code vom 'Text' Widget in das 'Individuelles HTML' Widget kopiert, wird die Bildbeschriftung nicht angezeigt.
- Das
width
-Attribut ist zu definieren, z.B. wie folgt:alt='image' width="170" height="150" />
. Dies ist auch fĂŒr das[caption id='' align='alignnone' width="170"]
-Tag relevant. Ohne den Attributwert oder mit width="auto" wird die Bildbeschriftung nicht angezeigt oder gelöscht.
Tab 7: Das Audio mit Hover starten.
7
Das Audio mit Hover starten, das geht dann mit JavaScript
Schon wahr, dass so Berieselung durch Musik allein beim Besuch einer Website meist nicht erwĂŒnscht bzw. angebracht ist. Aber das bei so musische Websites auch ganz gut ankommen kann! Siehe z. B. SOUNDCLOUD. Anders ist das hier im Mouseover, dass ganz direkt der Besucher selbst tut, das dann ist immer sehr gut.
Zwei Beispiele:
- Im Esten ist da Mouseover das Audio an. Dann beim abgehen vom Hover das Audio aus. Bei erneutem Mouseover ist der Neustart.
- Im Zweiten lÀuft das Lied so lange, bis es zu Ende ist. Bei erneutem Mouseover ist der Neustart.
Im Ersten siehe! â jsfiddle.net/Pixelbart
Im Mouseover das Audio an und beim abgehen vom Hover aus. Bei erneutem Mouseover ist der Neustart.
⊠Das ist sehr gut fĂŒr so Sequenzen wie meist hier der Website Seitenleisten zu sehen ist. Im Beispiel sind das so Tierstimmen.
Hier des Codes von 'Pixelbart' ist nun auch so JavaScript mit dabei!
Die Snippets zur functions.php
 ab ins Plug-in Code Snippets.
Mit Obhut der Codes! â so bleibt das auch nach Theme-Update.
Oder Child Theme! â zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!
Falls das Childs Theme mit .js
-Datei nicht zur Hand, dann fĂŒr auf die Schnelle funktioniert das auch ĂŒber die functions.php
. Dann klick an âŠ
JavaScript via functions.php
!
JavaScript sollte inline hinzugefĂŒgt werden, immer vor dem schlieĂenden </body>
-Tag, um die Performance zu optimieren. CSS kann auch im wp_head
-Bereich platziert werden, aber JavaScript sollte immer im wp_footer
-Bereich platziert werden.
Um JavaScript im Footer zu laden, kann ein entsprechendes Plug-in verwendet werden. In diesem Fall ist nur der Code innerhalb des <script>JavaScript-Code</script>
-Tags relevant.
Also folgend ist das mit spezieller PHP-Code fĂŒr die functions.php
des Childs-Themes. Das ist nur so Beispiel, wie es ohne separate .js
-Datei auch geht. Aber in Empfehlung bleibt das ordentlich angelegte Childs-Theme mit .js
-Datei, welches die Scripte im Footer ladet.
/* Legt das Script in den Footer der Website,
damit es nur einmal aufgerufen wird. */
add_action( 'wp_footer', function() {
?>
<script>
(function($) {
"use strict";
var WegerlHoverAudio = {
init: function() {
this.initHoverAudio();
this.initHoverIoAudio();
},
initHoverAudio: function() {
if ( !$("[data-hoveraudio]").length) {
return;
}
$("[data-hoveraudio]").hover(function() {
$(this).find("audio")[0].play();
}, function() {
$(this).find("audio")[0].load();
});
},
initHoverIoAudio: function() {
if ( !$("[data-hoverioaudio]").length) {
return;
}
$("[data-hoverioaudio]").hover(function() {
$(this).find("audio")[0].play();
});
},
};
$(function() { // Alternative fĂŒr: $(document).ready(function() {});
WegerlHoverAudio.init();
});
})(jQuery);
</script>
<?php
});
- Mit Abspeichern des JavaScript ist der Website ein neues Attribut dabei,
data-hoveraudio=""
.
Das HTML
<div class="hoverbild" data-hoveraudio=""><img src="https://../photo-1492684223066-81342ee5ff30.jpg" />
<audio><source src="https://../Jefferson_Airplane_-_Somebody_to_Love_Choco_Criminals_Remix-online-audio-converter.com_.mp3" /></audio></div>

Zu beachten ist âŠ
Im Folgenden das Attribut data-hoveraudio=""
und das Start-Tag <audio>
. Wenn die Maus das Bild berĂŒhrt, wird das Audio auf play()
gesetzt. Gehst du mir der Maus da weg, dann wird der Player neugeladen und so zurĂŒckgesetzt.
Wenn denn so class
-Attribut mit so Wert hoverbild
dabei ist, so ist dann das Attribut data-hoveraudio=""
. Also wie <div class="hoverbild" data-hoveraudio="">
. Sonst so ohne class
heiĂt das HTML <div data-hoveraudio="">
und das Audio funktioniert. Das zeigt sich da im Text ist Musik!
<div data-hoveraudio="">â Im Text ist Musik! â<audio><source src="https://../Remix-online-audio-converter.com.mp3" /></audio></div>
Und das funktioniert fĂŒr so Kombinationen âŠ
<div class="image-mouseover" data-hoveraudio="">
<div class="image-mouseover" style="margin-left: 90px;" data-hoveraudio=""> <img class="before alignnone" src="https://../unDraw-happy_music-frei.svg" alt="image" width="250" height="250" /> <img class="after alignnone" title="⊠happy musik!" src="https://../unDraw-happy_music-frei3a.svg" alt="image" width="250" height="250" /> <audio><source src="https://../Turdus_merula_Co0020_02_short.mp3" /></audio> </div>
SVG unDraw illustrations var.
Audio s. im Tierstimmenarchiv
Sound â Mouseover â.
Im Zweiten siehe! â jsfiddle.net/Pixelbart
Im Zweiten ist auch durch Mouseover der Play-Button an. Da lÀuft das Lied so lange, bis es zu Ende ist (das sind hier so 15 sec.) und startet erst wieder durch Mouseover.
Dies ist nur fĂŒr so kurze Musiksequenzen, da ja der Besucher das so nicht selbst abstellen kann. Aber so was ist eben Geschmacksache auch. Hingegen bei so Musik ist es immer so viel schöner auszuklingen, als es durch abgehen vom Hover so abgehackt ist. Und im potenziell den Ton aus ist jedem GerĂ€t.
Das, was im Ersten ist und dazu das im Zweiten braucht es eine Anpassung. Von hoveraudio
zu hoverioaudio
. Also sind da die Attributte hoveraudio
und hoverioaudio
.
Hier ist allein das JavaScript, also .js
-Datei:
/* Hover Audio */
(function($) {
"use strict";
var WegerlHoverAudio = {
init: function() {
this.initHoverAudio();
this.initHoverIoAudio();
},
initHoverAudio: function() {
if (!$("[data-hoveraudio]").length) {
return;
}
$("[data-hoveraudio]").hover(function() {
$(this).find("audio")[0].play();
}, function() {
$(this).find("audio")[0].load();
});
},
initHoverIoAudio: function() {
if (!$("[data-hoverioaudio]").length) {
return;
}
$("[data-hoverioaudio]").hover(function() {
$(this).find("audio")[0].play();
});
},
};
$(function() { // Alternative fĂŒr: $(document).ready(function() {});
WegerlHoverAudio.init();
});
})(jQuery);
Pr. WP-Freund
⊠so auch im HTML mit dazu der Class myrotes
, s. im Tab vier.
<div data-hoverioaudio="">
<img class="myrotes alignnone" src="https://../Clker-Free-Vector-Images-cd.svg" alt="" width="200" height="200" /></a><audio><source src="https://../local-forecast_EratENYy.mp3" /></audio>
</div>
Tab 8: Das Audio und die Browser.8
Das Audio und die Browser
Um Audio abzuspielen, muss der Browser des Besuchers dies zulassen. Bei den meisten Browsern ist es nicht standardmĂ€Ăig so eingestellt, dass das Audio automatisch abgespielt wird, wenn der Mauszeiger darĂŒber bewegt wird. In den meisten FĂ€llen muss der Besucher zunĂ€chst auf die Website klicken, bevor das Audio abgespielt wird.
In Safari ist jedoch zu beachten, dass das Audio standardmĂ€Ăig nicht abgespielt wird. Hier kann der Besucher in den Einstellungen des Browsers die entsprechende Option aktivieren, um das Audio abzuspielen. Nach dieser Einstellung wird das Audio auch in Safari automatisch abgespielt, ohne dass der Besucher zuvor auf die Website klicken muss.
Browser Chrome
Einstellungen â Datenschutz und Sicherheit â ZusĂ€tzliche Inhaltseinstellungen â âŠ
Browser Firefox
Einstellungen â Datenschutz und Sicherheit â Automatische Wiedergabe â âŠ
Browser Safari
Einstellungen â Websites â Automatische Wiedergabe â âŠ
Tab 9: Interaktion SVG-Bild und Ditty News Ticker.
9
Interaktion SVG-Bild und Ditty News Ticker
âŠwie Eingangs des Beitrags das Flugzeug in Interaktion mit Plug-in â Ditty News Ticker.
Anders ist das hier welches der Seitenleiste rechts zu sehen ist. Folglich hier im Titel SVG-Bild im Zusammenspiel mit Ditty News Ticker.
Zuerst möchte man da so das Widget 'Ditty News Ticker' nutzen und darunter das 'Text-Widget' mit dem SVG-Bild. So, dass dann das Bild mit margin-top
hinter den Ticker ist.
Das funkt mal ganz lapidar zu sagen, â doch ob im Erstaufruf auch im Weiter der Website hĂŒpft sich das Bild erst mal zurecht. Somit Browsers rendern wird das lĂ€stig. Nein, so passt das nicht! â darum ist hier das Bild als background-image
.
CSS
.handy {
background-image: url("https://../Clker-Free-Vector-Images-mobil-6px.svg");
background-repeat: no-repeat;
margin: 0 50px;
width: 125px;
height: 200px;
}
⊠Oder so zentriert:
.laptop {
background-image: url("https://../Clker-Free-Vector-Images-laptop-dot-10px.svg");
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
height: 170px;
width: 218px;
}
Merke: so Vorlagen sind. ⊠Doch selbst bleibt das fluchten.
HTML
<div class="handy">[ditty_news_ticker id="321"]</div>
Nachlese
css3.bradshawenterprises.com
10 Simple CSS Hover Effects
moz://animation-fill-mode
Preload fĂŒr die in Keyframes CSS-Hintergrundbilder
Sehr ansprechend ist um Titel Bildwechsel: Vorderseite, RĂŒckseite
⊠und ein Plug-in
Hover-Effekte – Erstellen Sie ganz einfach einen Hover-Effekt
Aktualisiert im Jahr 2023-April