HTML Code um zwei übereinander liegende Bilder zu Maskieren - Insight gewinnen?
Ciao,
Ich möchte auf meiner Homepage unter meinen Produktbildern zwei Bilder übereinander legen, jeweils eins mit verkleidung und dann eins ohne verkleidung, sodass man einen einblick in das produkt gewinnen kann.
Ich habe meine Homepage mit Jimdo aufgebaut und denke dass ich das dann über ein HTML Widget machen muss oder?
Ich stelle mir das so vor, dass um den Mauszeiger ein keiner kreis gezogen wird, der das Bild mit der verkleidung maskiert und man einen Einblick gewinnt, so als würde man mit einer taschenlampe in einen dunklen raum leuchtet
Wie kann man das Programmieren??
Vielen dank im Voraus
2 Antworten
Was genau meinst du mit "eins mit Verkleidung und dann eins ohne verkleidung"?
Es gibt kein HTML-Image Attribut, das so heißt, also schätze ich, dass eine Beschreibung für etwas ist.
Außerdem schreibst du "Mauszeiger ein keiner kreis gezogen wird, der das Bild mit der verkleidung maskiert". Bitte etwas näher beschreiben!
Meinst du etwas in diese Richtung?:
http://jsfiddle.net/WK_of_Angmar/f8oe7hcq/
oder:
Den Code hast du ja im jsfiddle. Den musst du nun nur noch auf deine Website umschreiben. Das ganze kannst du mit einem Widget einfügen:
https://www.homepage-ratgeber.de/magazin/jimdo-so-fuegst-du-javascript-ein/
hmm okay, aber wenn ich das alles 1:1 kopiere sieht das in etwa so aus: https://www.dropbox.com/s/dwjmcrrl6bktqhg/Unbenannt.JPG?dl=0
Da ich zu viel Zeit hab ;) :
https://transparent-picture.jimdofree.com/
Code:
<style>
#foreground {
top: 0px;
left: 0px;
-webkit-mask-position: -20px -20px;
-webkit-mask-size: 200px 400px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 32px, rgba(0, 0, 0, 1) 38px);
background-color: white;
border: solid 1px red;
width: 200px;
height: 200px;
background-image: url('http://placekitten.com/g/200/300');
}
#background {
background-size: cover;
background-image: url(https://i.pinimg.com/736x/1d/46/15/1d46153d5ed455b6a8e76fc66be01511.jpgg');
width: 200px;
height: 200px;
}
</style>
<div id="background">
<div id="foreground">
</div>
</div>
<script>
document.getElementById("foreground").addEventListener('mousemove', mouseMove, false);
function mouseMove (event)
{
var ele = document.getElementById ('foreground');
ele.style.webkitMaskPositionX = event.offsetX - 100 + "px";
ele.style.webkitMaskPositionY = event.offsetY + 200 + "px";
}
</script>
Du musst natürlich der Seite sagen, welcher Code für was ist. Das machst du mit Tags:
Style (CSS): <style></style>
Javascript: <script></script>
Oha perfekt, ziemlich genau so habe ich mir das vorgestelt! allerdings wiederholt sich a) die Maske / https://www.dropbox.com/s/beu8e6oqgpx3nxy/Unbenannt.JPG?dl=0 ) und b) ist das bild gefühlt 1000 Mal untereinander... ich kopiere dir hier mal meinen code rein damit du siehst was ich geändert habe
<style>
#foreground {
top: 0px;
left: 0px;
-webkit-mask-position: -20px -20px;
-webkit-mask-size: 200px 400px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 1) 100px);
width: 660px;
height: 10000px;
background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=660x10000:format=png/path/s426c03a6bc07c1fc/image/i08e8af536c02ebf7/version/1529929791/image.png');
}
#background {
background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=660x10000:format=png/path/s426c03a6bc07c1fc/image/i3d99e371363440fb/version/1529942360/image.png');
width: 660px;
height: 10000px;
}
</style>
<div id="background">
<div id="foreground">
</div>
</div>
<script>
document.getElementById("foreground").addEventListener('mousemove', mouseMove, false);
function mouseMove (event)
{
var ele = document.getElementById ('foreground');
ele.style.webkitMaskPositionX = event.offsetX - 100 + "px";
ele.style.webkitMaskPositionY = event.offsetY + 200 + "px";
}
</script>
Stark! genau wie deine zweite Variante habe ich das gemeint...
Wie kann ich soetwas auf meiner Jimdo-Seite einbinden?