i have put the heml code in this link https://www.bartleby.com/questions-and-answers/computer-science-question/2dd76e1e-c1ac-4c6b-9e78-8b1c8a3f9add ----------- var img = document.getElementById("elephant"); var modalImg = document.getElementById("img01"); modal.style.display = "block"; console.log(modal.style.display); modalImg.src = "x.jpg"; // Get the element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on (x), close the modal span.onclick = function() { modal.style.display = "none"; } } function myBear() { 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("bear"); var modalImg = document.getElementById("img01"); modal.style.display = "block"; console.log(modal.style.display); modalImg.src = "xl.jpg"; // Get the element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on (x), close the modal span.onclick = function() { modal.style.display = "none"; } } function myLion() { 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("lion"); var modalImg = document.getElementById("img01"); modal.style.display = "block"; console.log(modal.style.display); modalImg.src = "xs.jpg"; // Get the element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on (x), close the modal span.onclick = function() { modal.style.display = "none"; } } function myPanda() { 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("panda"); var modalImg = document.getElementById("img01"); modal.style.display = "block"; console.log(modal.style.display); modalImg.src = "xm.jpg"; // Get the element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on (x), close the modal span.onclick = function() { modal.style.display = "none"; } } function myMonkey() { 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("monkey"); var modalImg = document.getElementById("img01"); modal.style.display = "block"; console.log(modal.style.display); modalImg.src = "xx.jpg"; // Get the element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on (x), close the modal span.onclick = function() { modal.style.display = "none"; } } myElephant(); myBear(); myLion(); myMonkey(); myPanda(); } // Get the element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on (x), close the modal span.onclick = function() { modal.style.display = "none"; // 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("lion"); var modalImg = document.getElementById("img01"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; } // Get the element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on (x), close the modal span.onclick = function() { modal.style.display = "none"; } // 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("panda"); var modalImg = document.getElementById("img01"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; } ------ can someone help me change the code to do the following : add 6 small images with accompanying description assign values to the src attribute: image with path of "img/1.jpg" cannot be displayed in my shown ,i dont know why include alt attribute in element(s) use the element to separate the pictures scroll back to the top when selecting an up-arrow image - Failed to invoke email software when selecting the email hyperlink
i have put the heml code in this link
https://www.bartleby.com/questions-and-answers/computer-science-question/2dd76e1e-c1ac-4c6b-9e78-8b1c8a3f9add
-----------
var img = document.getElementById("elephant");
var modalImg = document.getElementById("img01");
modal.style.display = "block";
console.log(modal.style.display);
modalImg.src = "x.jpg";
// 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";
}
}
function myBear() {
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("bear");
var modalImg = document.getElementById("img01");
modal.style.display = "block";
console.log(modal.style.display);
modalImg.src = "xl.jpg";
// 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";
}
}
function myLion() {
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("lion");
var modalImg = document.getElementById("img01");
modal.style.display = "block";
console.log(modal.style.display);
modalImg.src = "xs.jpg";
// 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";
}
}
function myPanda() {
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("panda");
var modalImg = document.getElementById("img01");
modal.style.display = "block";
console.log(modal.style.display);
modalImg.src = "xm.jpg";
// 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";
}
}
function myMonkey() {
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("monkey");
var modalImg = document.getElementById("img01");
modal.style.display = "block";
console.log(modal.style.display);
modalImg.src = "xx.jpg";
// 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";
}
}
myElephant();
myBear();
myLion();
myMonkey();
myPanda();
}
// 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";
// 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("lion");
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// 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";
}
// 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("panda");
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
------
can someone help me change the code to do the following
:
add 6 small images with accompanying description
assign values to the src attribute: image with path of "img/1.jpg" cannot be displayed in my shown ,i dont know why
include alt attribute in <img> element(s)
use the <hr> element to separate the pictures
scroll back to the top when selecting an up-arrow image
- Failed to invoke email software when selecting the email hyperlink
Step by step
Solved in 2 steps
