Site hosted by Angelfire.com: Build your free website today!
Samantha Coaker's HTML Tutorials

Back | Contact

Samantha's HTML Help How to make an image flip



Okay, this is the script you use to make an image flip, like in the example above, which is quite impressive to use on a menu bar. It makes it feel more interactive.

Now what you need to start with is 2 images with the same file extension.
The 2 images I have used are buffyheart.jpg and buffyheart2.jpg:

(1) (2)

The second images name should only differ by one character at the end, like mine, to keep it simple. These must be uploaded to your server.

The below script needs to be placed inside you pages' <head> tags.

<script type="text/javascript">
var revert = new Array();
var inames = new Array('original images name here minus file extension e.g buffyheart');

// Preload
if (document.images) {
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i].src = inames[i]+"put additional character that makes up the second images name and file extension here e.g 2.jpg";
}
}

function over(num) {
if(document.images) {
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num) {
if(document.images) document.images[inames[num]].src = revert[num];
}
</script>


Now, place your image hyperlink code where you want it to be and add the Name, Mouse Over and Mouse Out attributes like so:

<a href="URL or file name"><img src="original image.jpg" border="0" name="original images name minus file extension*. e.g buffyheart" onMouseOver="over(0)" onMouseOut="out(0)"></a>

*The name attribute value should be the same as the iname in the original script. The values of the mouse commands should be set to 0.

If you wish to have multiple mouse over effects all you need to do is go back to the original script and add more variables* to the inames section, seperating them with commas eg.:

var inames = new Array('ball,bat');

*variables will be the file names of the original images minus the file extension. Consequently the name attibutes will be the same as the iname variables e.g. ball and bat. Add the Name, Mouse Over and Out attributes to the additional hyperlinks. The number in brackets will change, corresponding with the order you put in the variables. e.g the mouse over value for 'bat' would be "over(1)".

Tutorials © Samantha Coaker