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
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.
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.
Reply With Quote
Bookmarks