Click here to Skip to main content
13,736,491 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
Place the required JavaScript code above in a function called 'requestImageNumber()'.  Then invoke this function from inside your document.ready() function.

·         If the user types a number less than 1 or greater than the number of images, output an error message that says:  Enter a number between 1 and XX by appending this message to a section called 'error'. Be sure to clear out this section each time the user clicks 'Go', so that all the error messages don't accumulate. 

·         If the user did enter a valid number, then display the appropriate image.

o   For example, if the user types 1, you will display the firetruck image. If they type 4, you'd display the hockey puck and so on. 

·         You must display the image in a new window that you create using DOM commands. Set the size of this window to 500 by 500 pixels. (All of the images are smaller than this).

o   Recall that with the DOM you can retrieve all images with document.images.

o   Be sure to use array notation to select your particular image. E.g. document.images[XX].xxxx

·         Once you've chosen your image, retrieve the 'src'.

·         Also include the 'alt' attribute and value for that image.  Hint: Watch the spaces in your concatenation statement!

o   In the notes, there is an example of retrieving 'alt' attribute, as well as of opening a window and writing HTML commands to that window.


What I have tried:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Assignment 4</title>
      <style type="text/css">
         #main_content {width:600px; height:100%; border: 2px solid; background-color: silver;}
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
           $('img').attr('height', '50px').attr('width', '50px');
           //make all images 50x50 pixels

         var xx = document.images.length;
         document.getElementById('display').innerHTML = "There are " + xx + " small images on the page. Which one would you like to see?"
         //determine the number of images on the page

         $('#display').append('<input type="text" name="textbox" id="textbox" >');
         //append text box

         $('#display').append('<input type="button" onclick="requestImageNumber()" value="GO!">');
         //append 'Go' button

         function requestImageNumber()
         {

           var txt = $('#textbox').value;
           if (txt == 1){
          window.open(document.getElementById('truck').src );
           }
           }

         }); //end ready()

      </script>
   </head>
   <body>
      <div id="main_content">
         <h2>Image Selection</h2>
         <p>Please select the images below based on the order it appears.</p>
         <div id="images">
            <h3>Some Images</h3>
            <p>
               <a href="https://bit.ly/2ORluAF" target="_blank"><img src="firetruck.jpg" id="truck" alt="pic of truck" value="1"></a>
               <a href="https://bit.ly/2CFFwZp" target="_blank"><img src="baseball.jpg" alt="pic of baseball" value="2"></a>
               <a href="https://bit.ly/2yGrIJJ" target="_blank"><img src="soccer_ball.jpg" alt="oic of soccer ball" value="3"></a>
            </p>
            <p>
               <a href="https://bit.ly/2A5ADWM" target="_blank"><img src="hockey_puck.jpg" alt="pic of hockey puck" value="4"></a>
               <a href="https://bit.ly/2yvGaDZ" target="_blank"><img src="tennis_ball.jpg" alt="pic of tennis ball" value="5"></a>
               <a href="https://bit.ly/2OjKiSd" target="_blank"><img src="basketball.jpg" alt="pic of basketball" value="6"></a>
            </p>
         </div><!-- end of 'images' div -->
         <hr>
         <div id="display"></div><!-- end of 'display' div -->
         <div id="error"></div><!--end of 'error' div -->
        </div><!-- end of 'main content' div -->
   </body>
</html>
Posted 13-Oct-18 12:29pm

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web06-2016 | 2.8.180920.1 | Last Updated 13 Oct 2018
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100