SHAREPOINTBlogs.com Mirror

Image Changes on Hover

It sees there are a lot of large javascript samples out there to change an image source on mouse over, but they all seem overly complex.  Here's a little one I made recently for a project I was working on:

<script>
function imgHover(imgObj,imgSrc){
    imgObj.src=imgObj.getAttribute(imgSrc);
}
</script>

And here's some HTML to demonstrate how to use it:

<img
    src="/PublishingImages/main.jpg"
    out="/PublishingImages/main.jpg"
    over="/PublishingImages/main_01.jpg"
    onmouseover="java-script:imgHover(this,'over');"
    onmouseout="java-script:imgHover(this,'out');"
    alt=""
    border=0
/>

Change the "java-script" and remove the "-" to make it work... It won't show up on the blog post otherwise (it tries to run it).  I've found it easiest to just embed the script in the master page, then I can use img tag with the extra attributes on any page in my site I want...

Read the complete post at http://www.sharepointblogs.com/echef/archive/2008/01/22/image-changes-on-hover.aspx