 |
 |
« Magic Formula For Creating Link-worthy Content | How To Create Overlay Lightbox With jQuery Fancy-Zoom »
| Tweet |
|
|
|
It has been awhile since the last post as I used the intervening time to spruce up the design outlay of this website. I admit I have a penchant to go for new designs rather frequently, but this new outlay seems good to me for not looking for a change soon.
Even as I gather myself to trace the flow of main video-supported tutorials that are already here, let me opt for an easy one in this article.
In my interactions with fellow website owners I have found an emphasized need for photo gallery that can be embedded in a webpage without much of a fuss (free is preferable). To that extent I have been writing several articles on the topic.
In most cases a slideshow is based on JavaScript – that wonderful weapon in the armory of webmasters. The one that follows is not an exception, the only difference being that it is perhaps the most easy to do.
I am often asked if I author JavaScript for my use. The answer is ‘no’, not because I do not know how to do as I am not a programmer (and I have no intention to be one anytime soon), but because there are so many excellent scripts available free to use that I don’t feel like cluttering that creative space with my novel experiments.
Okay, enough of rants! Let me turn to the task on hand. I will come to the codes, but first let us take a look at the following example of onmouseover picture gallery. There are 2 distinct features here:
- As you move your cursor on a small image, the corresponding large image appears above it. This obviously means that for each image you will need 2 sizes – a thumbnail, and a large one.
- Each large image, and the corresponding thumbnail as well, is clickable. On being clicked the destination page appears, internal or external, in the same or a different window.
[Note: Since the photo gallery above is placed here within 'iframe', therefore clicking them will open separate windows only within the iframe area.]
The onMouseover picture gallery is very similar to the iframe photo slideshow covered earlier. Both are easy to implement, but in the latter’s case you need to click on thumbnails (versus hovering mouse) for the larger ones, and also the thumbnails do not lead to other pages, the larger images do.
Well, here it is. Below the slideshow, comes the video tutorial on how to do it.
The JavaScript
All you need to make the slideshow work is insert the following piece of JavaScript in the head section. Notice the script preloads the images even as the rest of the html code is being executed by your browser. This ensures that when the whole page comes alive, your visitor will be able to view the slideshow without any delay.
The full html code for the slideshow above comes below the JavaScript.
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("1-big.jpg","2-big.jpg","3-big.jpg","4-big.jpg","5-big.jpg")
</script>
HTML Code
The full html code for the above slide show is given below for your reference and use. The same JavaScript as above is put in the head section of the html code.
<html><head>
<title>Create onMouseOver Image Slide Show</title>
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("1-big.jpg","2-big.jpg","3-big.jpg","4-big.jpg","5-big.jpg")
</script>
</head>
<body style="padding:5px;margin:0;background:#A8D672;">
<table style="border:1px dashed #020;" border=0 cellpadding=5 cellspacing=5 width=415>
<tr>
<td align=center valign=top>
<a href="javascript:sshow()"><img style="background:#fff;padding:1px; border:1px solid #050;" src="1-big.jpg" name="targetimage" border=0></a>
</td>
</tr><tr>
<td align=center valign=middle>
<a href="destination1.html" onMouseover="changeimage(myimages[0],this.href)"><img style="background:#fff;padding:1px; border:1px solid #050;" border=0 src="1-small.jpg" /></a>
<a href="destination2.html" onMouseover="changeimage(myimages[1],this.href)"><img style="background:#fff;padding:1px; border:1px solid #050;" border=0 src="2-small.jpg" /></a>
<a href="destination3.html" onMouseover="changeimage(myimages[2],this.href)"><img style="background:#fff;padding:1px; border:1px solid #050;" border=0 src="3-small.jpg" /></a>
<a href="destination4.html" onMouseover="changeimage(myimages[3],this.href)"><img style="background:#fff;padding:1px; border:1px solid #050;" border=0 src="4-small.jpg" /></a>
<a href="destination5.html" onMouseover="changeimage(myimages[4],this.href)"><img style="background:#fff;padding:1px; border:1px solid #050;" border=0 src="5-small.jpg" /></a>
</td>
</tr><tr>
<td align=center valign=middle>
<span style="font:normal 13px verdana; color:#020; letter-spacing:0px;">
<< Move cursor on thumbnails to view the slideshow >></span>
</td>
</tr></table>
</body>
</html>| Tweet |
|
|
|
This article of September 12th, 2009 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
How do i get traffic to my website and how did you this comment box?
F*ckin’ awesome things here. I am very glad to peer your article. Thanks so much and i’m looking ahead to contact you. Will you please drop me a e-mail? – Elegant London Escorts, 65-67 Brewer Street, Floor: 2, London W1F 9UP. Phone: 020 3011 2941
F*ckin’ awesome things here. I am very glad to peer your article. Thanks so much and i’m looking ahead to contact you. Will you please drop me a e-mail? – Elegant London Escorts, 65-67 Brewer Street, Floor: 2, London W1F 9UP. Phone: 020 3011 2941