Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 36,143 Points
Posted by Nancy Melucci
Nancy Melucci
Courses Plus Student 36,143 Points

Make swap of larger image work (JQuery)

OK, at least this time, I have most of it written and semi-functional. I just need to know how to make the large image not only appear but also swap out on the click. On this version, the first larger image shows but it doesn't change. The alt text caption does - I need image and alt text to swap in unison.

How can I correct this version to make the large image swap out? (first HTML/JQUERY, then CSS.)

Thanks.

<html>
<head>
    <title>Assignment 5 - JQuery Chapter 5</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="asgn_5.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="asgn_5.js"></script>
<script>
$(document).ready(function(){
 $("img").hover(function(){
        $(this).css("border", "8px outset #C1E0FF")
    },
    function(){
        $(this).css("border-width", "0px");
    }); 

    $("#vacationimages img").click(function()  {      
    var changeSrc = $(this).attr("src");
        var changeAlt = $(this).attr("alt");    
           $("#currentimg").attr("src", changeSrc);
       $("#currentimg").css("display", "none");             
     //code to show large clicked image on the right
        $("#bigimage").css("display", "inline-block");
            $("#imagedesc").text(changeAlt); 
    }); 
    $("#submitme").click(function () {
        $("#question span").text("");
        $("#mymessage").text("");
        var myname = $("#firstname").val();
          if (myname == '')  {
            $("#question span").text("Must enter first name");
            return;
          }
        $("#vacationimages img").click(function()  {
            var changeAlt = $(this).attr("alt");
            $(this).data('clicked', true);   
            if (myname !== "" || $("#vacationimages img").data('clicked'))
            {
                $("#mymessage").text(myname + " you want a " + changeAlt + "!"); 
            }
        }); 

    });   
 }); // end document ready

</script>

</head>

<body style="">


<div id="question">
    <h2>Assignment 5</h2>
    <p>What is your first name?
    <input type="text" id="firstname" size="30">
    <span></span>
    </p>
</div>

<div id="vacationimages">
    <p>Click on the Image that best represents the kind of vacation you want</p>
    <p><img src="http://profperry.com/Classes20/JQuery/mountain.jpg" alt="Mountain Vacation"><br><br></p>
    <p><img src="http://profperry.com/Classes20/JQuery/desert.jpg" alt="Desert Vacation"><br><br></p>
    <p><img src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="Ocean Vacation"><br><br></p>
</div>

<div id="bigimage">
    <img id="currentimage" src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
    <p id="imagedesc"></p>
</div>

<div id="showhidebuttondiv">
    <input id="showhidebutton" type="button" value="Hide Image">
</div>

<div id="submitdiv">
    <input id="submitme" type="button" value="Submit ME">
    <p id="mymessage"></p>
</div>


</body></html>

/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 800px;
    background-color: silver;
}

section {
    padding: 15px 25px;
}

h1 {
    font-size: 150%;
}

h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
}

p {
    padding-bottom: .25em;
    padding-left: 25px;
}

span {
    color: red;
}

#question {
    position: absolute;
    left: 10px;
    top: 10px;
}

#vacationimages {
    position: absolute;
    left: 10px;
    top: 110px;
}


#bigimage {
    position: absolute;
    left: 250px;
    top: 140px;
    display: none;
}


#showhidebuttondiv {
    position: absolute;
    left: 250px;
    top: 400px; 
}

#submitdiv {
    position: absolute;
    left: 10px;
    top: 520px;
}

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

When an image is clicked on, the code updates the "src" attribute on the element with id "currentimg". But that element is actually the enclosing div and not the image itself.

To make the image change, you need to update img element which has an id of "currentimage" instead.

Happy coding!