|
Home
iRate! IceMelon IM Tutorials Headlines CoolSites PHP Functions |
|
Taking tutorial submissions! Please email them to Tabpole[AT]Gmail[DOT]com for review. Thanks!
Latest Tutorials 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. Create Your Own BBCode [PHP] Learn how to parse bulletin board code to translate it into HTML. [b]Come, come.[/b] Output While Script is Still Running [PHP] Learn how to use PHP output buffering functions and have them actually work! Don't make your visitors wait for a long script to process. [View All] Our Sponsors » Weblog Community » Listen to Podcasts » Rock Music Community - meet fans 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. |
