|
Home
iRate! IceMelon IM Tutorials Headlines CoolSites PHP Functions |
|
Taking tutorial submissions! Please email them to dave[AT]icemelon[DOT]com for review. Thanks!
Latest Tutorials IceMelon IM: Add IM Functionality to phpBB [Misc] Want to add site-wide member IM to your phpBB community? Sure you do. Simple step-by-step instructions inside. IceMelon IM: Add IM Functionality to vBulletin [Misc] Want to add site-wide member IM to your vBulletin community? Simple step-by-step instructions inside. Crawl Your Site for PageRanks [PHP] So you know your site has a PageRank of 8. What about the PRs of all the inner pages? This tutorial will teach how you to automate the process of grabbing all these PRs. Create CAPTCHA images [PHP] Worried about bots? Then create CAPTCHA images to prevent bots from taking advantage of your site. Convert SHN and FLAC files to MP3 [Misc] Low on disk space and have an insensitive ear? Here are some steps to converting SHN and FLAC files to MP3 format. [View All] Become a sponsor for $15/month. Link is sitewide - PR5 homepage, 20+ PR4 pages, 90+ PR3 pages. Email dave[AT]icemelon[D0T]c0m. |
Awesome Tutorials
Slide Show Script By dave
This tutorial will teach you how to write a very simple, easy-to-implement slide show system. The user will advance the slideshow by clicking the current image. I find this to be more effective than having the image change based on a set time interval. Well, anyway, below is a demo. The full set of images can be found here [http://www.hibot.com/images.php?x=asiankid].
And, here's the code: <script>
var i = 0;
gallery = Array();
gallery[0] = "http://www.hibot.com/images/interesting/asiankid/mrbean.jpg";
gallery[1] = "http://www.hibot.com/images/interesting/asiankid/shrek.jpg";
gallery[2] = "http://www.hibot.com/images/interesting/asiankid/titanic.jpg";
function nextImg() {
i = (i < (gallery.length-1)) ? i+1 : 0;
document.galleryImage.src = gallery[i];
}
</script>
<a href=javascript: onClick="nextImg()"><img src=http://www.hibot.com/images/interesting/asiankid/mrbean.jpg name=galleryImage style='border:1px gray solid'></a>
We start off by initializing a counter variable 'i' to 0 and creating a blank array called 'gallery.' Then, we populate 'gallery,' where each element is an URL to an image. In the code above, we rotate between 3 images. To add more images just add more elements to the 'gallery' array. The function that does all the work is 'nextImg,' which is only 2 lines:
// general format
variable = (statement) ? value1 : value2;
// equivalent to..
if(statement)
variable = value1;
else
variable = value2;
» Line 2 changes the image. It does this by setting the image source of an image named 'galleryImage' to 'gallery[i].' If you look a little further down, at the HTML, you will notice that the name of our image is set to 'galleryImage.' What a coincidence! The HTML is pretty straightforward. Each time the image link is clicked, the 'nextImg' function (explained above), is called. You can easily add links for 'next image' and 'previous image.' To display the previous image, just create another function like this: function prevImg() {
i = (i > 0) ? i-1 : gallery.length;
document.galleryImage.src = gallery[i];
}
</script>
Remember that arrayName.length will return the length of arrayName.
Alright, it's a wrap. P.S. Check out my new site TheManWhoSoldtheWeb.com, where I publish guides and scripts on Internet Marketing and SEO. Here is a limited time freebie: the Rapid Google Indexer. |
