All scripts given for distribution were created by Steve H and are licensed under the GPL. By using or re-distributing a script you accept the GPL license. Make sure you read the information at Scripts Main before you attempt to use any scripts.
ImgBar is an eyecandy javascript library that changes a set of linking images to expand on mouse hover.
You will need to know your way around basic HTML. CSS knowledge is a must for making it look good. Knowledge of javascript is handy but not required if you can understand what I say.
To install this script on your site first download the imgbar.js file and then upload it to your website. You will need to change your site's layout so that the links are contained in an element with an ID where all a tags inside include images that want the effect applied to them. An example would be:
<div id="imgbar">
<a href="#"><img src="img.png" alt="Link 1" /></a>
<a href="#"><img src="img.png" alt="Link 2" /></a>
<a href="#"><img src="img.png" alt="..." /></a>
</div>
You should style your images so that they all have the same height (the smallest height the images will have), for instance put this CSS inside the <head> tags:
<style type="text/css">
#imgbar img {
height:40px;
}
</style>
Then add the following inside of the <head> tags (changing the value of the src if neccessary):
<script type="text/javascript" src="imgbar.js"></script>
<script type="text/javascript">
// Initiate imgbar on page load
window.onload = function () {set_stylebar("imgbar",40,50);}
</script>
You may need to change the following values
For best results set the CSS of the box so the height is already set and the images are aligned vertically. I also suggest having the images centered as this gives a more natural flow to the hovering and has less chance of an image moving away from the cursor.
If you feel confident and want to alter the behaviour (speed) of the effects then you can set the values in the following order: