Skip to content

Commit 0bf111d

Browse files
coder-mayank22coder-mayank22
authored
Add files via upload
1 parent 9001b31 commit 0bf111d

8 files changed

+116
-0
lines changed

‎Cherry_blossoms.jpeg

87.6 KB
Loading

‎JS_coursera_finalproj.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Photo Gallery</title>
7+
<link rel="stylesheet" href="JS_final_gallery.css">
8+
<script>
9+
function upDate(previewPic){
10+
previewPic.style.opacity = 1.0;
11+
console.log('upDate function encountered');
12+
const x = document.getElementById("image");
13+
x.innerHTML = previewPic.alt;
14+
x.style.backgroundImage = 'url("'+previewPic.src+'")';
15+
x.style.backgroundColor = "#25efbc"
16+
console.log(previewPic.src);
17+
x.style.backgroundRepeat = "no-repeat";
18+
x.style.backgroundSize = "100% 100%";
19+
}
20+
21+
function unDo(previewPic){
22+
previewPic.style.opacity = 0.5;
23+
console.log('unDo function encountered');
24+
const x = document.getElementById("image");
25+
x.style.backgroundImage = "url('')";
26+
x.style.backgroundRepeat = "no-repeat";
27+
x.style.backgroundColor = "#8e68ff"
28+
x.innerHTML = "Hover over an image below to display here.";
29+
}
30+
31+
function focus_func(previewPic){
32+
previewPic.style.opacity = 1.0;
33+
console.log("onfocus event encountered");
34+
const x = document.getElementById("image");
35+
x.innerHTML = previewPic.alt;
36+
x.style.backgroundImage = 'url("'+previewPic.src+'")';
37+
x.style.backgroundColor = "#25efbc";
38+
console.log(previewPic.src);
39+
x.style.backgroundRepeat = "no-repeat";
40+
x.style.backgroundSize = "100% 100%";
41+
}
42+
43+
function blur_func(previewPic){
44+
previewPic.style.opacity = 0.5;
45+
console.log("onblur event encountered");
46+
const x = document.getElementById("image");
47+
x.style.backgroundImage = "url('')";
48+
x.style.backgroundRepeat = "no-repeat";
49+
x.style.backgroundColor = "#8e68ff"
50+
x.innerHTML = "Hover over an image below to display here.";
51+
}
52+
53+
function setTabIndex(){
54+
console.log("onload event encountered");
55+
images = document.querySelectorAll(".preview");
56+
for(let i=0; i<images.length; i++){
57+
console.log("Image"+(i+1))
58+
images[i].setAttribute("tabindex", i+1);
59+
}
60+
}
61+
</script>
62+
</head>
63+
<body onload="setTabIndex()">
64+
<div id="image">
65+
Hover over an image below to display here.
66+
</div>
67+
68+
<img class="preview" src="mount_fuji.jpg" alt="Picture of Mount Fuji, Japan"
69+
onmouseover="upDate(this)" onmouseout="unDo(this)" onfocus="focus_func(this)" onblur="blur_func(this)">
70+
71+
<img class="preview" src="Cherry_blossoms.jpeg" alt="Picture of Cherry Blossoms"
72+
onmouseover="upDate(this)" onmouseout="unDo(this)" onfocus="focus_func(this)" onblur="blur_func(this)">
73+
74+
<img class="preview" src="kyoto.jpg" alt="Picture of Kyoto, Japan"
75+
onmouseover="upDate(this)" onmouseout="unDo(this)" onfocus="focus_func(this)" onblur="blur_func(this)">
76+
77+
<img class="preview" src="Switzerland.jpg" alt="Picture of Switzerland"
78+
onmouseover="upDate(this)" onmouseout="unDo(this)" onfocus="focus_func(this)" onblur="blur_func(this)">
79+
80+
<img class="preview" src="Victoria_Falls.jpg" alt="Picture of Victoria Falls"
81+
onmouseover="upDate(this)" onmouseout="unDo(this)" onfocus="focus_func(this)" onblur="blur_func(this)">
82+
83+
<img class="preview" src="River_Ganga.jpg" alt="Picture of River Ganga, India"
84+
onmouseover="upDate(this)" onmouseout="unDo(this)" onfocus="focus_func(this)" onblur="blur_func(this)">
85+
</body>
86+
</html>

‎JS_final_gallery.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
body{
2+
margin: 2%;
3+
border: 1px solid black;
4+
background-color: #b3b3b3;
5+
}
6+
7+
#image{
8+
line-height: 650px;
9+
width: 575px;
10+
height: 650px;
11+
border: 5px solid black;
12+
margin: 0 auto;
13+
background-color: #8e68ff;
14+
background-image: url('');
15+
background-repeat: no-repeat;
16+
color: #FFFFFF;
17+
text-align: center;
18+
background-size: 100%;
19+
margin-bottom: 25px;
20+
font-size: 150%;
21+
}
22+
23+
.preview{
24+
height: 150px;
25+
width: 10%;
26+
margin-left: 55px;
27+
border: 10px solid black;
28+
opacity: 0.5;
29+
}
30+

‎River_Ganga.jpg

225 KB
Loading

‎Switzerland.jpg

1.24 MB
Loading

‎Victoria_Falls.jpg

697 KB
Loading

‎kyoto.jpg

293 KB
Loading

‎mount_fuji.jpg

257 KB
Loading

0 commit comments

Comments
 (0)