Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

<style>
 
.xquotable img {
  display: inline-block;
  vertical-align: top;
}
 
.save-image-on-click:not(.downloaded) {
  border: 4px double grey;
  cursor: pointer;
}
.save-image-on-click:not(.downloaded) + .image-download-indicator {
  position: absolute;
}
.save-image-on-click:not(.downloaded) + .image-download-indicator::before {
  content: "Klicken Sie auf das Bild, um dieses \aImage auf der Festplatte zu speichern!";
  position: absolute;
  white-space: pre;
  color:black;  
  display: block;
  background: white;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-family: system-ui;
  overflow: hidden;
  max-width: 0px;
  padding: 5px 75px 5px 25px;
  border-radius: 50px 0 0 50px;
  border: 3px double grey;
  box-shadow: 0 0 0 transparent;
  transform: translatex(-100%) scale(0);
  z-index: 0;
  transition: 0.15s all ease-in-out 0s, 0s transform 0.2s;
  margin-top: 5px;
}
.save-image-on-click:not(.downloaded) + .image-download-indicator::after {
  content: "";
  background: white var(--src) no-repeat;
  background-size: cover;
  background-position: center;
  border: 3px double grey;
  border-radius: 5px;
  display: block;
  width: 64px;
  height: 64px;
  padding-bottom: 100%;
  position: absolute;
  transition: 0.25s transform cubic-bezier(0.77, -2.13, 0.84, 2.66) 0.25s;
  transform: translate(calc(-100% + 10px), 0) scale(0);
  font-size: 36px;
  line-height: 128px;
  text-indent: 40px;
  text-shadow: 2px 2px 0 black, -2px 2px 0 black, 2px -2px 0 black, -2px -2px 0 black, 0 0 10px grey, 0 0 10px grey, 0 0 20px white, 0 0 20px white;
}
.save-image-on-click:not(.downloaded):hover {
  filter: brightness(0.5);
}
.save-image-on-click:not(.downloaded):hover + .image-download-indicator {
  pointer-events: none;
}
.save-image-on-click:not(.downloaded):hover + .image-download-indicator::before {
  transform: translatex(-100%) scale(1);
  max-width: 150px;
  margin-left: -56px;
  box-shadow: -5px 8px 15px black;
  z-index: 0;
  transition: 0.3s all ease-in-out 0.4s, 0s transform 0.27s;
}
.save-image-on-click:not(.downloaded):hover + .image-download-indicator::after {
  transform: translate(calc(-100% + 10px), 0) scale(1);
  z-index: 100;
  transition: 0.25s transform cubic-bezier(1, 2.65, 0.62, 0.12);
}
 
.downloaded {
  border: 4px double green;
}
.downloaded + .image-download-indicator::before {
  content: "Der Download war erfolgreich";
  display: inline-block;
  position: absolute;
  z-index: 100;
  color: black;
  font-size: 12px;
  background: white;
  border-radius: 250%;
  max-width: 182px;
  max-height: 112px;
  height: 132px;
  line-height: 112px;
  text-indent: 2px;
  border: 2px solid green;
  transform: translate(-75%, -25%) scale(0.5);
  opacity: 0.6;
  box-shadow: 2px 8px 15px black;
  text-shadow: 3px 3px 6px #000c;
  transition: 0.25s all cubic-bezier(0.77, -2.13, 0.84, 2.66);
}
.downloaded:hover + .image-download-indicator::before {
  transform: translate(-120%, 10%) scale(1);
  opacity: 1;
  pointer-events: none;
  transition: 0.15s all cubic-bezier(1, 2.65, 0.62, 0.12);
}  
</style>  
 

 

<script>
 
function saveImage(e, img = e.target) {
  let { src, name } = img,
  a = document.createElement("a");
  ext = src.replace(/.*(\.[a-z]{3,4})$/i, '$1');
  name = name == null || name == '' ? src.replace(/.*\//i, '') : name.toLowerCase().replace(/\s/g, '_') + ext;
 
  a.style = "display: none";
  fetch(src).
  then(response => response.blob()).
  then(blob => {
    console.log(blob);
    var blobUrl = window.URL.createObjectURL(blob);
    a.href = blobUrl;
    a.download = name;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(blobUrl);
    a.remove();
  }).
  then(() => img.className = "downloaded");
}
 
  //let allImages = document.querySelectorAll('.xquotable img');
      var allImages = document.querySelectorAll('.xquotable img');
  allImages.forEach(img => {
    img.classList.add('save-image-on-click');
    img.insertAdjacentHTML('afterEnd', `<span class="xquotable image-download-indicator" style="--src:url(${img.src})"></span>`);
    img.addEventListener('click', saveImage);
  });
</script>