www.webdeveloper.com
Results 1 to 3 of 3

Thread: display image using javascript

  1. #1
    Join Date
    Sep 2011
    Posts
    4

    display image using javascript

    Dear all users
    + assume that: I have some pictures: imageJan.gif, imageFeb.gif,....
    + I also have option: Jan, Feb, Mar,...
    I'd like to display those images with suitable option
    Anyone please tell me how to solve with javascript code
    Thank you

  2. #2
    Join Date
    Sep 2011
    Location
    A suburb of Copenhagen
    Posts
    3

    Display image using JavaScript: A solution

    One possibility could be to take a look at the wz_jsgraphics.js library written by Walter Zorn.
    It has a drawImage() function that accepts an image as a parameter and displays it. To choose a different image depending on month name should be easy.
    The library (zip file, reference manual) can be found at
    www.walterzorn.de/en
    and it so happens that I have an "edit+execute" example at
    www.bjarne.altervista.org/walterzorn.html
    You are welcome to inspect the source code.

  3. #3
    Join Date
    Sep 2011
    Location
    A suburb of Copenhagen
    Posts
    3

    Display image using JavaScript: Another solution

    I just did some experiments with assigning to the src property of an image.
    The following may be close to what you need:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head><title>Image by Month Demo</title></head>
    <body onload = "imgByMonth();">
     <img id="myImage" src="images/Jan.jpg" alt="Image by month">
     <script type="text/javascript" language="JavaScript">
    
      var arrImgs = [
       'Jan.jpg', 'Feb.jpg', 'Mar.jpg', 'Apr.jpg', 'May.jpg', 'Jun.jpg',
       'Jul.jpg', 'Aug.jpg', 'Sep.jpg', 'Oct.jpg', 'Nov.jpg', 'Dec.jpg' ];
    
      function imgByMonth() {
        document.getElementById("myImage").src = './images/'
                                      + arrImgs[ (new Date).getMonth() ];
      }
    </script>
    </body>
    </html>
    It was tried and found to work in IE8, Firefox, Chrome, Opera, and Safari under Windows XP SP3.

    The example assumes that the images are in a separate folder. If your images reside in the same folder as your html file, as your image file names might suggest, rewrite the url's accordingly.
    Also, the images I had at hand were jpg's. You must, of course, change that if yours are gif's.

    The getMonth() method of the Date object returns a number, 0 for January, 11 for December.
    If you have the month names as text strings, a little reformulation will be needed, for instance, a switch in place of the array. That might actually make the code more readable and easier to mainain.

    Finally, you will need to decide which image to show if a visitor has switched JavaScript off. The example simply chooses the January image.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles