Untitled

Change the size of the image: Display this image of a turtle. (This is Nickel, the sea turtle who lives in the Caribbean Reef habitat at Shedd Aquarium in Chicago).  Have 3 buttons underneath. One should say 'Shrink Image' and should make the image 200x307 (height x width). Another should say 'Enlarge Pic' and make it 400x580. A third should say 'Restore Pic' and make it its original size of 300x460. The code to do each of these should be inside the value of the 'onclick' attribute of the button.


Change the border: Create a class that creates a red, dashed, 5 pixel border.  When the user hovers over the picture of the turtle, the class should be applied. When the user moves the mouse off of the turtle, the class should be removed.  There are a few ways to do this, but as a hint, let me suggest one possibility: that you use the 'onmouseover' and 'onmouseout' attributes inside the <img> tag that you use to display the turtle.


Change the font: Have a select box with 3 fonts in it:  Helvetica, Verdana, Times New Roman. The first option in the box  should be 'Select a Font'. Each time the user selects a font, change the text on the page to that font. Invoke the function that does this from the <select> tag. That is, do not use a separate button to invoke the function.


How old will Nickel be?  As mentioned earlier, Nickel is Shedd's sea turtle. Nickel is estimated to have been born in 1996 or so. Have a text field that asks the user to enter a year. Then have a button that invokes a function that tells you how old she will be in that year. So if the user enters 2026, you will say: "In 2026, Nickel will be 30 years old!"  You should output this using the 'append()' function as a new paragraph at the end of the 'about_turtles' div section.


Incidentally, I feed Nickel during presentations about once a week at Shedd. If any of you are planning on visiting the aquarium, let me know and maybe we can coordinate a visit.


<html>
<head>
    <meta charset="utf-8">
    <title>Turtles</title>

    <style>
        img:hover{border: 5px red;
            border-style:dashed;

        }
    </style>

    <script>
    function how_old_Nickel()
        {
            var year=$('#how_old').val()
            var answer=Number(year-1996);
            $("#about_turtles").append(" In "+ year + " Nickel will be " + answer + " years old");


        }

    </script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <h2>All About Turtles</h2>
    <div id="about_turtles">
        <p>Sea turtles (superfamily Chelonioidea), sometimes called marine turtles,[3] are reptiles of the order Testudines and of the suborder cryptodira. The seven existing species of sea turtles are: the green, loggerhead, Kemp's ridley, olive ridley, hawksbill, flatback, and leatherback.[4]
        </p>
        <p>The majority of a sea turtle's body is protected by its shell. The turtle's shell is divided into two sections: the carapace (the dorsal portion) and the plastron (the ventral portion). The shell is made up of smaller plates called scutes. The leatherback is the only sea turtle that does not have a hard shell. Instead, it bears a mosaic of bony plates beneath its leathery skin.
        </p>
        <p>In general, sea turtles have a more fusiform body plan than their terrestrial or freshwater counterparts. The reduced volume of a fusiform (tapering at both ends) body means sea turtles can not retract their head, legs, and arms into their shells for protection like other turtles can.[5] However this more stream-lined body plan reduces drag in the water and allows the turtle to swim more easily.
        </p>
    </div>
    <!--End of Div 'about_turtles'-->
    <br><br>
    How old will Nickel be?
    <br>
    <input type='text' id="how_old">
    <button type="button" id="Calculate" name="Calculate" onclick="how_old_Nickel()">
    Calculate
    </button>
    <br><br>

    <img src="nickel.jpg" alt="nickel" id="image"><br>

    <input type="radio" name="size" value="shrink" onclick="$('#image').css('width','307px'); $('#image').css('height','200px');">
    Shrink<br>
    <!--should make the image 200x307 (height x width)'-->

    <input type="radio" name="size" value="enlarge" onclick="$('#image').css('width','580px'); $('#image').css('height','400px');">
    Enlarge<br>
    <!--400x580-->

    <input type="radio" name="size" value="restore" onclick="$('#image').css('width','460px'); $('#image').css('height','300px');">
    Restore
    <!--300x460'-->

    <br>
    <br>

    <select id="text" onclick="$('#about_turtles').css('font-family', $(this).val())">
        <option value="Helvetica">Helvetica</option>
        <option value="Verdana">Verdana</option>
        <option value="Times New Roman">Times New Roman</option>

    </select>

</body>
</html>