A Pen by Colleen van Lent on CodePen.
Created
March 2, 2019 00:50
-
-
Save ludiw823/b3607aab4ee67b5b066df8c48d5a2a5e to your computer and use it in GitHub Desktop.
JS - Gallery Homework
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Photo Gallery</title> | |
<link rel="stylesheet" href="css/gallery.css"> | |
<script src = "js/gallery.js"></script> | |
</head> | |
<body> | |
<div id = "image"> | |
Hover over an image below to display here. | |
</div> | |
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()"> | |
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()"> | |
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()"> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*Name this external file gallery.js*/ | |
function upDate(previewPic){ | |
/* In this function you should | |
1) change the url for the background image of the div with the id = "image" | |
to the source file of the preview image | |
2) Change the text of the div with the id = "image" | |
to the alt text of the preview image | |
*/ | |
} | |
function unDo(){ | |
/* In this function you should | |
1) Update the url for the background image of the div with the id = "image" | |
back to the orginal-image. You can use the css code to see what that original URL was | |
2) Change the text of the div with the id = "image" | |
back to the original text. You can use the html code to see what that original text was | |
*/ | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*Name this external file gallery.css*/ | |
body{ | |
margin: 2%; | |
border: 1px solid black; | |
background-color: #b3b3b3; | |
} | |
#image{ | |
line-height:650px; | |
width: 575px; | |
height: 650px; | |
border:5px solid black; | |
margin:0 auto; | |
background-color: #8e68ff; | |
background-image: url(''); | |
background-repeat: no-repeat; | |
color:#FFFFFF; | |
text-align: center; | |
background-size: 100%; | |
margin-bottom:25px; | |
font-size: 150%; | |
} | |
.preview{ | |
width:10%; | |
margin-left:17%; | |
border: 10px solid black; | |
} | |
img{ | |
width:95%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment