Porträt
Porträt
Hier meine CSS um das Bild zu vergrößern und einen Schlagschatten (box-shadow) hinzuzufügen. Die class="myimage" gehört dann in das <img> Tag für das Bild, also z.B. so:
<img class="myimage" src="file:///C:/Users/User/Tutorials-2/assets/images/girl.jpg" alt="Girl">
dabei steht in die Anweisung "transition" die Zeit der Animation von 0,5 Sekunden und in der Anweisung "transform" die Größe.
.myimage {
transition: all 0.5s linear;
}
.myimage:hover {
box-shadow: 25px 25px 25px rgba(0, 0, 0, 0.4);
transform: scale(1.05);
cursor: pointer;
}
Zum Einbau vom Sound habe ich ein JavaScript von javascriptkit.com verwendet und hier eingebaut.
Das JavaScript unten gehört in den Bereich "Inside <head> code" der Seiteneinstellungen.
Ich habe hier drei Sound-Dateien verwendet, eine Datei "pop.mp3" für Mausüber, eine Datei "interface.mp3" für Klick und noch eine Datei "this-is-great-locutora-virtual-joanna-rubio.mp3" für das Bild im Kreis unten auf dieser Seite. Ihr könnt natürlich jeweils eine der Variablen (ganz unten im Script) auch löschen oder weitere hinzufügen. Die Sound-Dateien müsst ihr händisch in das Verzeichnis der lokalen Publizierung und an den Server kopieren. Ich habe hier die ein Verzeichnis "sound" angelegt und die Dateien in dieses Verzeichnis kopiert, dann also mit dieser relativen Pfadangabe:
./sound/pop.mp3
<!-- Script für Sound -->
<script>
// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound
var html5_audiotypes={ //define list of audio file extensions and their audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
// Initialize your sound clips, you may use 1 fallback file each:
var mouseoversound=createsoundbite("./sound/pop.mp3")
var clicksound=createsoundbite("./sound/interface.mp3")
var womansound=createsoundbite("./sound/this-is-great-locutora-virtual-joanna-rubio.mp3")
</script>
Hier könnt ihr mit der rechten Maustaste die beiden ersten Sound-Dateien von Pixabay downloaden. Im Kontext-Menü "speichern unter" wählen:
interface.mp3 und pop.mp3
Auf der Seite von Pixabay findet ihr sehr viele, kostenlose Sound-Dateien:
Sound Effekte
Für den Aufruf vom JavaScript oben, schreibt man dann entweder beide oder einen Aufruf an das Element:
Für Mausüber:
onmouseover="mouseoversound.playclip()"
Für Klick:
onclick="clicksound.playclip()"
<div class="image-wrapper" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">
<img class="myimage" src="file:///C:/Users/User/Tutorials-2/assets/images/girl.jpg" alt="Girl">
</div>
Natürlich kann man jeden möglichen Sound oder auch Musik nicht nur an Bildern anbringen sondern überall, wie zum Beispiel an Textlinks oder Buttons oder auch an einer Navigation.
Unten noch ein weiteres Beispiel, das zusätzlich das Bild in einen runden Kreis als Hintergrund einpasst.
Hier die CSS für den Kreis.
Hier das Original-Bild . Es muss also freigestellt auf transparentem Hintergrund sein, damit der CSS-Hintergrund zu sehen ist.
Weiter unten zeige ich noch das gleiche Bild über zwei Blöcke überlappend.
Hier habe ich zwei CSS Klassen erstellt, die class="kreis" für den Hintergrund und die class="bild-rund" für das Bild.
Die @media Anweisung stellt die Größe vom Kreis am Smartphone auf 80% der Display-Breite. Das Bild selbst habe ich auch mit der Anweisung "border-radius: 50%;" rund gestaltet:
.kreis {
width: 50%;
height: auto;
margin: 0px auto 0px auto;
border-radius: 50%;
border: 10px solid #fff;
box-shadow: 5px 5px 5px #232323, -3px -3px #24548b;
background-image: linear-gradient(blue, yellow);
cursor: pointer;
transition: all 0.5s linear;
}
.kreis:hover {
box-shadow: 25px 25px 25px rgba(0, 0, 0, 0.6), -3px -3px #24548b;
transform: scale(1.05);
}
@media (max-width: 767px) {
.kreis {
width: 80%;
}
}
.bild-rund {
border-radius: 50%;
}
Hier die Anzeige vom Bild im Kreis mit den oben erstellten CSS Klassen. Durch die Anweisung "border-radius: 50%;" passt sich die Kontur des Bildes an den Kreis an. Wenn das Bild nicht quadratisch ist, also zum Beispiel höher als breit, würde der Kreis zu einem Oval werden. Der Ausgabe habe ich noch eine onclick Anweisung mit der gesetzten Variable aus dem JavaScript oben für den Sound gegeben:
<div class="kreis" onclick="womansound.playclip()">
<img class="bild-rund"> src="https://www.mobirise-tutorials.com/Tutorials-2/images/woman.png" alt="Girl" title="klick mich">
</div>
Hier noch eine kurze Beschreibung von dem kleineren Bild unten, das ich über zwei Blöcke hinweg platziert habe. Das habe ich mit einem zusätzlichen <div> Container gemacht, den ich noch außen um die Bild-Container herumgelegt habe und der die class="move" erhalten hat:
<div class="move">
<div class="kreis" onclick="womansound.playclip()">
<img class="bild-rund"> src="https://www.mobirise-tutorials.com/Tutorials-2/images/woman.png" alt="Girl" title="klick mich">
</div>
</div>
Dieser class="move" habe ich hier ein negatives "margin" von -110px gegeben, sodass das Bild 110px nach oben über den Block hinaus in den oberen Block verschoben wird und somit zwei Blöcke überlappt.
.move {
margin-top: -110px;
}
Hier liegt das Bild in der Mobirise class="image-wrapper" und es wurde das gleiche Bild mit einem negativen Abstand in Form von einem "margin-top: -110px;" über zwei Blöcke verschoben. Ich habe die Blöcke mit einer roten Linie getrennt ...
... wobei das nur vom unteren in den oberen Block funktioniert.
Verschiebe ich das Bild nach unten mit z.B. einem "margin-bottom: -200px;", schiebt es sich hinter den unteren Block und wird verdeckt. Es geht erst dann, wenn ich dem <section> Tag diese Inline-Anweisung gebe:
<section style="z-index: 1;" ..... >
