







revision:
click the buttons to change some attributes
<div> <h3>change some attributes</h3> <img id="foto-1" src="../images/3.jpg" width="307" height="198" alt="picture" title="photo"/> <div> <p>click the buttons to change some attributes</p> <button onclick="change()">change width and height</button><br> <button onclick="change_a()">change opacity and shape</button><br> <button onclick="change_b()">add inline style</button> </div> </div> <script> function change(){ document.getElementById("foto-1").width = "500"; document.getElementById("foto-1").height = "398"; } function change_a(){ document.getElementById("foto-1").style.opacity = "0.3"; document.getElementById("foto-1").style.borderRadius = "20%"; } function change_b(){ document.getElementById("foto-1").style.border = "0.5vw solid orange"; document.getElementById("foto-1").style.scale = "1.5"; document.getElementById("foto-1").style.marginLeft = "2vw"; } </script>
code: <div> <h3>set multiple src attributes in JavaScript</h3> <div id="container"> <img class="foto-2" id="pic1" src="" alt=""> <img class="foto-2" id="pic2" src="" alt=""> <img class="foto-2" id="pic3" src="" alt=""> </div> </div> <style> #container{display: flex; flex-flow: row nowrap;} .foto-2{border: 0.3vw dashed blue; width: 15vw; height: 10vw; margin: 0 0.2vw;} </style> <script> const img = document.querySelectorAll(".foto-2"); img[0].src = "../images/1.jpg"; img[0].style.borderRadius = "20%"; img[1].src = "../images/2.jpg"; img[1].style.opacity = "0.3"; img[2].src = "../images/3.jpg"; img[2].style.height = "11vw"; </script>
click the button to display the width and height of the image
code: <div> <h3>return the width/height of an image</h2> <img id="foto-3" src="../images/4.jpg" alt="holidays" title="holidays photo 4" width="307" height="198" style="margin: 0 auto;"/> <div> <p>click the button to display the width and height of the image</p> <button onclick="showWidth()">show width and height</button> <p id="picture4"></p> <p id="picture5"></p> </div> </div> <script> function showWidth(){ var x = document.getElementById("foto-3").width; var y = document.getElementById("foto-3").height; document.getElementById("picture4").innerHTML = "width: " + x + "px"; document.getElementById("picture5").innerHTML = "height: " + y + "px"; } </script>
code: <div> <h3>add inline style and attributes in JavaScript</h3> <div> <img class="foto-4" id="pic6" src="" alt=""> <img class="foto-4" id="pic7" src="" alt=""> <img class="foto-4" id="pic8" src="" alt=""> </div> </div> <style> .foto-4{width: 12vw; height: 10vw; margin: 0 1vw;} .img-rounded-border{border-radius: 2vw;} </style> <script> const img1 = document.querySelectorAll(".foto-4"); img1[0].src = "../images/1.jpg"; img1[0].style.border = ".2vw dotted red"; img1[1].src = "../images/2.jpg"; img1[1].style.border = "0.3vw dashed blue"; img1[2].src = "../images/3.jpg"; img1[2].style.border = "0.3vw inset burlywood"; img1[0].classList.add("img-rounded-border"); img1[1].classList.add("img-rounded-border"); img1[2].classList.add("img-rounded-border"); </script>
code: <div> <h3>add an image element</h3> <div> <div id="trial" style=" width: 10vw; height: 10vw;"></div> <p id="up" style="font-size: 1vw; font-weight: bold;"></p> <button onclick="getFun()">click here</button><br> <p id="down" style="color:red;font-size:1vw;font-weight:normal;"></p> </div> </div> <script> var up = document.getElementById("up"); up.innerHTML = "click on the button to add an image element"; var down = document.getElementById("down"); function getFun(){ var img = document.createElement("img"); img.src = "../images/1.jpg"; document.getElementById("trial").appendChild(img); img.style.width = "20vw"; img.style.height = "10vw"; down.innerHTML = "image element added."; } </script>
<div> <h3>add an element to a webpage</h3> <div> <div id="another_trial" style=" width: 10vw; height: 10vw;"></div> <p id="above" style="font-size: 1vw; font-weight: bold;"></p> <button onclick="makeFun()">click here</button><br> <p id="under" style="color:red;font-size:1vw;font-weight:normal;"></p> </div> </div> <script> var above = document.getElementById("above"); above.innerHTML = "click on the button to add an image element"; var under = document.getElementById("under"); function makeFun(){ var img = new Image(); img.src = "../images/2.jpg"; document.getElementById("another_trial").appendChild(img); img.style.width = "20vw"; img.style.height = "10vw"; under.innerHTML = "image element added."; } </script>
<div> <img id="foto-7" src="" alt=""> </div> <style> .img-rounded-border{border: 0.3vw solid red; border-radius: 1vw;} </style> <script> var a = document.getElementById("foto-7"); a.src = "../images/4.jpg"; a.style.width = "20vw"; a.style.height = "10vw"; a.setAttribute("class", "img-rounded-border"); a.setAttribute("title" , "Huangpu river"); </script>
<div> <img class="foto-8" src=" " alt=" " title=" "/> </div> <style> #img-radius{ border-radius: 50% 40%;} </style> <script> const b = document.querySelector(".foto-8"); b.src = "../images/3.jpg"; b.style.width = "25vw"; b.style.height = "15vw"; b.setAttribute("id", "img-radius"); b.style.border ="0.2vw dashed red" </script>
The number of images is:
<div class="grid_C"> <p id="een_A"></p> <p>The number of images is: <span id="twee_B"><span></p> <p id="drie_C"></p> <p id="vier_D"></p> </div> <script> var allImgs = document.getElementsByTagName("img"); document.getElementById("een_A").innerHTML = "total of images in this page: " + allImgs.length + " pictures"; let nummer = document.images.length; document.getElementById("twee_B").innerHTML = nummer; var imgCount = document.images.length; var svgCount = document.getElementsByTagName('svg').length; var finalCount = imgCount + svgCount; document.getElementById("drie_C").innerHTML = "total number of pictures: " + finalCount; function countImages(){ var images = document.getElementsByTagName('IMG'); var count = images.length; document.getElementById('vier_D').innerHTML= "grand total of pictures: " + count; } countImages(); </script>
<div class="grid_C"> <p id="vijf_E"></p> <p id="zes_F"></p> <p id="zeven_G"></p> <p id="acht_H"></p> </div> <script> var imgTags = document.getElementsByTagName('img'); // Loop through each <img> tag and extract the image file name for (var i = 0; i < imgTags.length; i++) { var imgTag = imgTags[i]; var imgSrc = imgTag.src; console.log(imgSrc); document.getElementById("vijf_E").innerHTML += imgSrc + "<br>"; } Array.prototype.map.call(document.images, function (i) { console.log('image', i.src); }); Array.prototype.map.call(document.images, function (i) { document.getElementById("zes_F").innerHTML += 'image: '+ (i.src) + "<br>"; }); const getImages = (el, includeDuplicates = false) => { const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src') + "<br>" ); return includeDuplicates ? images : [...new Set(images)]; }; document.getElementById("zeven_G").innerHTML = getImages(document, true); document.getElementById("acht_H").innerHTML = getImages(document, false); </script>
code: <div> <div class="gallery" onclick="openLightbox(event)"> <img src="../images/1.jpg" alt="Image 1"> <img src="../images/2.jpg" alt="Image 2"> <img src="../images/3.jpg" alt="Image 3"> <img src="../images/4.jpg" alt="Image 4"> </div> <!-- Lightbox container --> <div id="lightbox"> <!-- Close button --> <span id="close-btn" onclick="closeLightbox()">×</span> <!-- Main lightbox image --> <img id="lightbox-img" src="" alt="lightbox image"> <!-- Thumbnails container --> <div id="thumbnail-container"> <!-- Thumbnails will be added dynamically using JavaScript --> </div> <!-- Previous and Next buttons --> <button id="prev-btn" onclick="changeImage(-1)">< Prev</button> <button id="next-btn" onclick="changeImage(1)">Next ></button> </div> </div> <style> .gallery{display: inline-flex; flex-flow: row wrap;} .gallery img {margin: 10px; cursor: pointer; max-width: 300px; width: 60%; height: auto; border-radius: 10px;} /* Lightbox styles */ #lightbox {display: none; position: fixed; top: 0;left: 0; width: 100%; height: 100%; background: skyblue; justify-content: center; align-items: center; overflow: hidden; flex-direction: column; } #lightbox img { max-width: 80%; max-height: 60vh; box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); border-radius: 10px;} #close-btn {position: absolute; top: 30px; right: 30px; font-size: 48px; color: red; cursor: pointer; z-index: 2; } /* Style for navigation buttons */ #prev-btn, #next-btn { position: absolute; top: 50%; transform: translateY(-50%); font-size: 20px; color: #fff; background-color: rgba(0, 0, 0, 0.5); border: none; padding: 10px; cursor: pointer; transition: background-color 0.3s;} #prev-btn {left: 10px; } #next-btn { right: 10px;} #prev-btn:hover, #next-btn:hover {background-color: rgba(0, 0, 0, 0.8); } /* Styles for thumbnails */ .thumbnail-container {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .thumbnail {max-width: 50px; width: 100px; cursor: pointer; margin-top: 40px; margin-left: 5px; margin-right: 5px; border: 2px solid #fff; transition: opacity 0.3s; } .thumbnail:hover, .thumbnail.active-thumbnail {opacity: 0.7; border: 0.2vw solid red;} </style> <script> let currentIndex = 0; const images = document.querySelectorAll('.gallery img'); const totalImages = images.length; // Open the lightbox function openLightbox(event) { if (event.target.tagName === 'IMG') { const clickedIndex = Array.from(images).indexOf(event.target); currentIndex = clickedIndex; updateLightboxImage(); document.getElementById('lightbox').style.display = 'flex'; } } // Close the lightbox function closeLightbox() { document.getElementById('lightbox').style.display = 'none'; } // Change the lightbox image based on direction (1 for next, -1 for prev) function changeImage(direction) { currentIndex += direction; if (currentIndex >= totalImages) { currentIndex = 0; } else if (currentIndex < 0) { currentIndex = totalImages - 1; } updateLightboxImage(); } // Update the lightbox image and thumbnails function updateLightboxImage() { const lightboxImg = document.getElementById('lightbox-img'); const thumbnailContainer = document.getElementById('thumbnail-container'); // Update the main lightbox image lightboxImg.src = images[currentIndex].src; // Clear existing thumbnails thumbnailContainer.innerHTML = ''; // Add new thumbnails images.forEach((image, index) => { const thumbnail = document.createElement('img'); thumbnail.src = image.src; thumbnail.alt = `Thumbnail ${index + 1}`; thumbnail.classList.add('thumbnail'); thumbnail.addEventListener('click', () => updateMainImage(index)); thumbnailContainer.appendChild(thumbnail); }); // Highlight the current thumbnail const thumbnails = document.querySelectorAll('.thumbnail'); thumbnails[currentIndex].classList.add('active-thumbnail'); } // Update the main lightbox image when a thumbnail is clicked function updateMainImage(index) { currentIndex = index; updateLightboxImage(); } // Add initial thumbnails updateLightboxImage(); // To add keyboard navigation (left/right arrow keys) document.addEventListener('keydown', function (e) { if (document.getElementById('lightbox').style.display === 'flex') { if (e.key === 'ArrowLeft') { changeImage(-1); } else if (e.key === 'ArrowRight') { changeImage(1); } } }); </script>
code: <h3>artistic picture gallery</hr> <div class="ex"> <article class="grid-gallery"> <img src="../images/1.jpg" alt="description of picture 1" /> <img src="../images/2.jpg" alt="description of picture 2" /> <img src="../images/3.jpg" alt="description of picture 3" /> <img src="../images/4.jpg" alt="description of picture 4" /> <img src="../images/5.jpg" alt="description of picture 5" /> <img src="../images/6.jpg" alt="description of picture 6" /> <img src="../images/7.jpg" alt="description of picture 7" /> <img src="../images/8.jpg" alt="description of picture 8" /> </article> </div> <style> .grid-gallery { --size: 100px; display: grid; grid-template-columns: repeat(6, var(--size)); grid-auto-rows: var(--size); gap: 5px; place-items: start center; margin-bottom: var(--size);} .grid-gallery img { width: calc(var(--size) * 2); height: calc(var(--size) * 2); object-fit: cover; grid-column: auto / span 2; border-radius: 5px; clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z"); } .grid-gallery img:nth-child(5n - 1) { grid-column: 2 / span 2;} .grid-gallery:has(img:hover) img:not(:hover) {filter: brightness(0.5) contrast(0.5);} .grid-gallery img { /* ... */ transition: clip-path 0.25s, filter 0.75s;} .grid-gallery img:hover { clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z"); transition: clip-path 0.25s, filter 0.25s; z-index: 1;} grid-gallery a:focus {outline: 1px dashed black; outline-offset: -5px;} </style>