Writing Functions

Hello, I am beginning to learn JS and am stuck on functions. What I am trying to do is write a function where the background image of a div changes when the user hovers their mouse over an image using the onmouseover event. Given the code below, the two objectives I am trying to achieve are:

  1. Change the url for the background image of the div with the id = “image” to the source file of the preview image, AND then update the url for the background image of the div with the id = “image” back to the orginal on onmouseout.

  2. Change the text of the div with the id = “image” to the alt text of the preview image using the onmouseover event.

Here’s the code I have so far:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>

<title>Interactive Photo Gallery</title>

<!-- EMBEDDED CSS & JS -->

<style type="text/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(''); /* Do not hard-code the location here. */
    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%;
}

</style>

<script type="text/javascript">
/* <![CDATA[ */

function upDate(previewPic){
 /* In this function I want to: 
    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 
    */
    
    document.getElementById('image').style.backgroundImage=previewPic.src; // I don't know why this does change the background iamge of the div
    document.getElementById('image').innerHTML = previewPic.alt;
}

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. 
    
    2) Change the text  of the div with the id = "image" back to the original text.
    */
    
    document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}

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

You don’t need the CDATA part. You’re using a standard HTML5 doctype. So, you can take that out, it’s just useless clutter.

The style attribute is actually setting the CSS, so you need all of the CSS that it takes to style that image. Which means you need to add the url('xxx').

document.getElementById('image').style.backgroundImage= 'url("'+ previewPic.src + '")';

This is a background image though, it will not change the size of the div to match the image. If you want to do that, you’ll have to set the width and height based on the previewPic you pulled in.

2 Likes

Mawburn ~ Thanks so much! I was kind of on the right track. I was using document.getElementById('image').style.backgroundImage but I was getting hung up on the code after the equals sign. That’s where I was going wrong. This makes sense to me now. Thanks again for taking time to answer my question.

1 Like

I have a follow up question to this same challenge. How to avoid hard coding the unDo function text which says, “hover over an image below to …?”

I think we need to have document.getElementById(“image”).innerHTML = ?ELEMENT? here, but I don’t know what that element should be. Any suggestions would be most appreciated!

the innerHTML method just sets the html of the element (in this case the element with the id of “image”) to whatever you want.

document.getElementById('your-thing').innerHTML = '<h2>Hello World!</h2>

In the code ‘url("’+ previewPic.src + ‘")’; what does the + mean and the quotes. I’m a little lost. Thanks.

The + is used to concatenate or join together strings with code. For example, here 'url("'+ previewPic.src + '")';, you are connecting the string url(" to previewPic.src and then to ") . The strings are surrounded by ’ '.

In the end it will be interpreted as url(“previewPic.src”);

1 Like

When the value on either side of the + is a string the + means concatenation (join together into one string).

So in this case it takes the value of previewPic.src and adds the string ‘url"’ to the front of it and ‘")’ to the end of it.

If the value of previewPic.src was ‘img.png’ you’d end up with ‘url(“img.png”)’

Thanks for the clarification, @felgall . I missed what the value of previewPic.src was in my explanation.

Your explanation wasn’t there when I started typing mine.

Thank you, for the clarification

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.