Tutorials
Image Switching
First, find an image. I'm going to use
my nifty little support button.
Next, open up the image in Photoshop 7.0 or
whatever the hell it is that you use for images. For
Photoshop go to Image> Adjustments>Hue/Saturation> Lightness >+50. That will
give you a pretty light image and will show our image switch
pretty nice. When we do this we get this image:
The next thing we want to do is put these
two together to make the actual image switch. Here's the
code to do so:
<script type="text/javascript">
function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;
</script>
<img src="locationoffirstimage/firstimagename.imageextension"
hsrc="locationsecondimage/secondimagename.imagextenstion"
border="0"></a>
By
using this code on the support images previously discussed we get:
And that's it! If you'd like to make the image a hyperlink
simply put the <a href> code into the <img> tag like it's a regular image. If
you'd like to learn more about the <a href> code use the tutorial I wrote up
about it
here.
Please note that image-switching can do more than just turn
images from light to dark. It can switch between any two images! They don't even
have to be the same size!
Thanks to Mike, mikenomn, and Roarke who
all helped me with this code when I first started using it.
|
