function inside javascript

Arun Nautiyal — Sat, 28 Nov 2020 09:12:38 +0000

HTML File
<!DOCTYPE html>

Photo Gallery

<link rel="stylesheet" href="css/gallery.css">

<script src = "js/gallery.js"></script>

<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()">

CSS file

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%;
}

Need to write a code inside function

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
*/

}

DEV Community: Arun Nautiyal

function inside javascript

image{