Beiträge von ungespielt1

ungespielt1 · 22. Juli 2019

dankeschön

ungespielt1 · 22. Juli 2019

Zitat von Arne Drews

Dann halt auf querySelectorAll umschreiben und bspw. auf eine Klasse referenzieren, dürfte nicht viel Aufwand sein.

Wie meinst du das genau? Habe keine Ahnung wie ich das umsetze

ungespielt1 · 22. Juli 2019

Will eine Bildergalery machen und es sollen mehrere Bilder auf e

Zitat von Sempervivum

Ich verstehe es so, dass der TO das Skript für mehrere Bilder verwenden will, was wegen der Verwendung einer ID so, wie es ist, nicht möglich ist (var img = document.getElementById("myImg");).

Ja verstehst du richtig

ungespielt1 · 19. Juli 2019

Hallo habe eine Bild Vergrößerung im Internet gefunden. Mein Problem ist jetzt das ich diese Methode öfter benutzen will als nur einmal, ich hoffe ihr könnt mir weiterhelfen

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>



</head>
<body>

<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>

<img id="myImg" src="../Bilder/2.jpg" alt="Snow" style="width:100%;max-width:300px">
<img id="myImg" src="../Bilder/3.jpg" alt="Snow" style="width:100%;max-width:300px">
<img id="myImg" src="../Bilder/4.jpg" alt="Snow" style="width:100%;max-width:300px">
<img id="myImg" src="../Bilder/6.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
</script>


</body>
</html>

Alles anzeigen

MFG

ungespielt1 · 12. Juli 2019

Hallo

Hat jemand eine Idee wie ich ein Bild das nicht Quadratisch ist auf eine Format das 1:1 ist zu bringen und sie ebenfalls zu skalieren?

So würde mein Lösungsansatz aussehen

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            width: 100%;
            height: 100%;
            border: white;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: fill;
            min-width: 100px;
            min-height: 100px;
            max-height: 800px;
            max-width: 800px;
            overflow: none;
        }
    </style>
</head>

<body>


    <div class='box'>
        <div class='content'> <img src="../Bilder/2.jpg"> </div>
    </div>


</body>

</html>

Alles anzeigen

LG

ungespielt1 · 12. Juli 2019

ja das weiß ich auch aber sonst funktioniert der Regler in der Mitte nicht mehr

Vil hast du ja eine Idee wie man das machen kann und schickst mir mal einen Lösungsansatz anstatt immer nur zu sagen wie es nicht geht...hahah

ungespielt1 · 12. Juli 2019

Danke habs schon geschafft, aber weißt du vil wie ich die bilder mit skallieren kann also das heißt das die bilder größer oder kleiner werden wenn der browser skaliert wird?

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }

        .img-comp-container {
            position: relative;
            height: 200px;
            /*should be the same height as the images*/
        }

        .img-comp-img {
            position: absolute;
            width: auto;
            height: auto;
            overflow: hidden;
        }

        .img-comp-img img {
            display: block;
            vertical-align: middle;
        }

        .img-comp-slider {
            position: absolute;
            z-index: 9;
            cursor: ew-resize;
            /*set the appearance of the slider:*/
            width: 40px;
            height: 40px;
            background-color: #2196F3;
            opacity: 0.7;
            border-radius: 50%;
        }

        .flex-container {
            display: flex;
            justify-content: center;
            background-color: DodgerBlue;
        }

        .flex-container>div {
            background-color: #f1f1f1;
            width: 300px;
            margin: 20px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
        }

        .responsive {
            width: 100%;
            height: auto;
        }
    </style>
    <script>
        function initComparisons() {
            var x, i;
            /*find all elements with an "overlay" class:*/
            x = document.getElementsByClassName("img-comp-overlay");
            for (i = 0; i < x.length; i++) {
                /*once for each "overlay" element:
                pass the "overlay" element as a parameter when executing the compareImages function:*/
                compareImages(x[i]);
            }
            function compareImages(img) {
                var slider, img, clicked = 0, w, h;
                /*get the width and height of the img element*/
                w = img.offsetWidth;
                h = img.offsetHeight;
                /*set the width of the img element to 50%:*/
                img.style.width = (w / 2) + "px";
                /*create slider:*/
                slider = document.createElement("DIV");
                slider.setAttribute("class", "img-comp-slider");
                /*insert slider*/
                img.parentElement.insertBefore(slider, img);
                /*position the slider in the middle:*/
                slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
                slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
                /*execute a function when the mouse button is pressed:*/
                slider.addEventListener("mousedown", slideReady);
                /*and another function when the mouse button is released:*/
                window.addEventListener("mouseup", slideFinish);
                /*or touched (for touch screens:*/
                slider.addEventListener("touchstart", slideReady);
                /*and released (for touch screens:*/
                window.addEventListener("touchstop", slideFinish);
                function slideReady(e) {
                    /*prevent any other actions that may occur when moving over the image:*/
                    e.preventDefault();
                    /*the slider is now clicked and ready to move:*/
                    clicked = 1;
                    /*execute a function when the slider is moved:*/
                    window.addEventListener("mousemove", slideMove);
                    window.addEventListener("touchmove", slideMove);
                }
                function slideFinish() {
                    /*the slider is no longer clicked:*/
                    clicked = 0;
                }
                function slideMove(e) {
                    var pos;
                    /*if the slider is no longer clicked, exit this function:*/
                    if (clicked == 0) return false;
                    /*get the cursor's x position:*/
                    pos = getCursorPos(e)
                    /*prevent the slider from being positioned outside the image:*/
                    if (pos < 0) pos = 0;
                    if (pos > w) pos = w;
                    /*execute a function that will resize the overlay image according to the cursor:*/
                    slide(pos);
                }
                function getCursorPos(e) {
                    var a, x = 0;
                    e = e || window.event;
                    /*get the x positions of the image:*/
                    a = img.getBoundingClientRect();
                    /*calculate the cursor's x coordinate, relative to the image:*/
                    x = e.pageX - a.left;
                    /*consider any page scrolling:*/
                    x = x - window.pageXOffset;
                    return x;
                }
                function slide(x) {
                    /*resize the image:*/
                    img.style.width = x + "px";
                    /*position the slider:*/
                    slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
                }
            }
        }
    </script>
</head>

<body>
    <h1>Compare Two Images</h1>
    <p>Click and slide the blue slider to compare two images:</p>



    <div class="img-comp-container">
        <div class="img-comp-img">
            <img src="https://cdn.duden.de/_media_/full/L/Landschaft-201100284318.jpg" width="300" height="200">
        </div>
        <div class="img-comp-img img-comp-overlay">
            <img src="https://images.insel-sylt.de/2017/09/Archsum-weitblick.jpg" width="300" height="200">
        </div>
    </div>


    <p>The aligns the flex items at the center of the container:</p>
    <div class="flex-container">
        <div>
            <div class="img-comp-container">
                <div class="img-comp-img">
                    <img src="https://cdn.duden.de/_media_/full/L/Landschaft-201100284318.jpg" width="300" height="200">
                </div>
                <div class="img-comp-img img-comp-overlay">
                    <img src="https://images.insel-sylt.de/2017/09/Archsum-weitblick.jpg" width="300" height="200">
                </div>
            </div>
        </div>
        <div>
            <div class="img-comp-container">
                <div class="img-comp-img">
                    <img src="https://cdn.duden.de/_media_/full/L/Landschaft-201100284318.jpg" width="300" height="200">
                </div>
                <div class="img-comp-img img-comp-overlay">
                    <img src="https://images.insel-sylt.de/2017/09/Archsum-weitblick.jpg" width="300" height="200">
                </div>
            </div>
        </div>
        <div>
            <div class="img-comp-container">
                <div class="img-comp-img">
                    <img src="https://cdn.duden.de/_media_/full/L/Landschaft-201100284318.jpg" width="300" height="200">
                </div>
                <div class="img-comp-img img-comp-overlay">
                    <img src="https://images.insel-sylt.de/2017/09/Archsum-weitblick.jpg" width="300" height="200">
                </div>
            </div>
        </div>
    </div>


    <script>
        /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
        initComparisons();
    </script>
</body>

</html>

Alles anzeigen

Danke LG

ungespielt1 · 11. Juli 2019

ja habe es versucht aber leider hat es nicht ganz funktioniert, aber ich werde es noch einmal versuchen

ungespielt1 · 11. Juli 2019

Hallo ich benötige Hilfe bei der Ausrichtung dieses 3 Elemente

Ich will das dieser Code nur 3 Mal nebeneinander Zentriert mit flexbox

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}

.img-comp-container {
  position: relative;
  height: 200px; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}

.img-comp-img img {
  display:block;
  vertical-align:middle;
}

.img-comp-slider {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
}
</style>
<script>
function initComparisons() {
  var x, i;
  /*find all elements with an "overlay" class:*/
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /*once for each "overlay" element:
    pass the "overlay" element as a parameter when executing the compareImages function:*/
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /*get the width and height of the img element*/
    w = img.offsetWidth;
    h = img.offsetHeight;
    /*set the width of the img element to 50%:*/
    img.style.width = (w / 2) + "px";
    /*create slider:*/
    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");
    /*insert slider*/
    img.parentElement.insertBefore(slider, img);
    /*position the slider in the middle:*/
    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    /*execute a function when the mouse button is pressed:*/
    slider.addEventListener("mousedown", slideReady);
    /*and another function when the mouse button is released:*/
    window.addEventListener("mouseup", slideFinish);
    /*or touched (for touch screens:*/
    slider.addEventListener("touchstart", slideReady);
    /*and released (for touch screens:*/
    window.addEventListener("touchstop", slideFinish);
    function slideReady(e) {
      /*prevent any other actions that may occur when moving over the image:*/
      e.preventDefault();
      /*the slider is now clicked and ready to move:*/
      clicked = 1;
      /*execute a function when the slider is moved:*/
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      /*the slider is no longer clicked:*/
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      /*if the slider is no longer clicked, exit this function:*/
      if (clicked == 0) return false;
      /*get the cursor's x position:*/
      pos = getCursorPos(e)
      /*prevent the slider from being positioned outside the image:*/
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      /*execute a function that will resize the overlay image according to the cursor:*/
      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      /*get the x positions of the image:*/
      a = img.getBoundingClientRect();
      /*calculate the cursor's x coordinate, relative to the image:*/
      x = e.pageX - a.left;
      /*consider any page scrolling:*/
      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      /*resize the image:*/
      img.style.width = x + "px";
      /*position the slider:*/
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}
</script>
</head>
<body>

<h1>Compare Two Images</h1>

<p>Click and slide the blue slider to compare two images:</p>

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="https://cdn.duden.de/_media_/full/L/Landschaft-201100284318.jpg" width="300" height="200">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="https://www.google.at/search?q=landschaft&source=lnms&tbm=isch&sa=X&ved=0ahUKEwimhsWZlazjAhWCuIsKHZJNB4wQ_AUIESgB&biw=1482&bih=812#imgdii=9dIGwfEFg3uAbM:&imgrc=UySNWA1uoyxxPM:" width="300" height="200">
  </div>
</div>

<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>

</body>
</html>

Alles anzeigen

Will das der Content oben genau so zentriert ist wie da

HTML

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>

<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>

Alles anzeigen

Danke schon mal im vorraus

ungespielt1 · 1. Juni 2019

Hallo habe eine Frage: ich würde gerne das diese fotos in diesem quellcode genau so nebeneinander liegen wie in dem zweiten code

HTML: Quellcode 1

<html>
<head>
<style>
* {box-sizing: border-box;}

.img-comp-container {
  position: relative;
  height: 200px; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}

.img-comp-img img {
  display:block;
  vertical-align:middle;
}

.img-comp-slider {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
</style>
<script>
function initComparisons() {
  var x, i;
  /*find all elements with an "overlay" class:*/
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /*once for each "overlay" element:
    pass the "overlay" element as a parameter when executing the compareImages function:*/
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /*get the width and height of the img element*/
    w = img.offsetWidth;
    h = img.offsetHeight;
    /*set the width of the img element to 50%:*/
    img.style.width = (w / 2) + "px";
    /*create slider:*/
    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");
    /*insert slider*/
    img.parentElement.insertBefore(slider, img);
    /*position the slider in the middle:*/
    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    /*execute a function when the mouse button is pressed:*/
    slider.addEventListener("mousedown", slideReady);
    /*and another function when the mouse button is released:*/
    window.addEventListener("mouseup", slideFinish);
    /*or touched (for touch screens:*/
    slider.addEventListener("touchstart", slideReady);
    /*and released (for touch screens:*/
    window.addEventListener("touchstop", slideFinish);
    function slideReady(e) {
      /*prevent any other actions that may occur when moving over the image:*/
      e.preventDefault();
      /*the slider is now clicked and ready to move:*/
      clicked = 1;
      /*execute a function when the slider is moved:*/
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      /*the slider is no longer clicked:*/
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      /*if the slider is no longer clicked, exit this function:*/
      if (clicked == 0) return false;
      /*get the cursor's x position:*/
      pos = getCursorPos(e)
      /*prevent the slider from being positioned outside the image:*/
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      /*execute a function that will resize the overlay image according to the cursor:*/
      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      /*get the x positions of the image:*/
      a = img.getBoundingClientRect();
      /*calculate the cursor's x coordinate, relative to the image:*/
      x = e.pageX - a.left;
      /*consider any page scrolling:*/
      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      /*resize the image:*/
      img.style.width = x + "px";
      /*position the slider:*/
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}
</script>
<head>
<body>

<div class="img-comp-container" style="position: absolute; left: 200px; top: 500px;">
    <div class="img-comp-img" >
        <img src="Bilder/blende_falsch.jpg " style="width: 400px;">
    </div>
    <div class="img-comp-img img-comp-overlay">
        <img src="Bilder/blende_richtig.jpg" style="width: 400px;">
    </div>
</div>

<div class="img-comp-container" style="position: absolute; left: 550px; top: 500px;">
    <div class="img-comp-img" >
        <img src="Bilder/blende_falsch.jpg " style="width: 400px;">
    </div>
    <div class="img-comp-img img-comp-overlay">
        <img src="Bilder/blende_richtig.jpg" style="width: 400px;">
    </div>
</div>


<div class="img-comp-container" style="position: absolute; left: 1000px; top:500px;">
    <div class="img-comp-img" >
        <img src="Bilder/blende_falsch.jpg " style="width: 400px;">
    </div>
    <div class="img-comp-img img-comp-overlay">
        <img src="Bilder/blende_richtig.jpg" style="width: 400px;">
    </div>
</div>



<script>
    /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
    initComparisons();
</script>

</body>
</html>

Alles anzeigen

HTML: Quellcode 2

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>


  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>


</body>
</html>

Alles anzeigen

Beiträge von ungespielt1

Bilder Galery

Bilder Galery

Bilder Galery

Bilder Galery

1:1 Bild skalieren

JS Code in float ausrichten Hilfe benötigt

JS Code in float ausrichten Hilfe benötigt

JS Code in float ausrichten Hilfe benötigt

JS Code in float ausrichten Hilfe benötigt

Hilfe