[CMS] Clickable Rollover Image

[Trevor Matthews]

Hi

I want to create a Widget that basically displays an image of a magazine cover and when the mouse is rolled over the image it changes to another months cover. Clickable to take the user to the section of the forum that holds the magazines.

I found this Javascript.....

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. [URL]http://www.idocs.com/tags/[/URL]
// Distribute this script freely, but please keep this 
// notice with the code.
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
    pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
    {
    rollOverArr[pageImageName].outImg = new Image;
    rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
    }
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>

<A 
    HREF="rollover_target.html"
    onMouseOver = "rollover('home')" 
    onMouseOut  = "rollout('home')" 
    ><IMG 
    SRC="/images/misc/home_out.png" 
    NAME="home" 
    ALT="Home Page" BORDER=0 
    HEIGHT=130 WIDTH=115
    ></A>
<SCRIPT TYPE="text/javascript">
<!--
setrollover("/images/misc/home_over.png");
//-->
</SCRIPT>

I have created the two images and put them in the misc folder, named correctly.
I selected the Static HTML choice from the New Widget option.
This doesn't work.

Is this just not possible using a widget or have I selected the wrong Widget option.

Is there an easier way to achieve this or any suggestions please.

[Lynne]

It works just fine on my site when I make sure the image path is correct. /images/misc/etc is not the correct path for me since that is relative to the site root. I needed to change it to just images/misc/etc

[Trevor Matthews]

Many thanks. I will try again.

[Trevor Matthews]

Great, problem solved. GIMP was adding a funny file extension despite me saving them as .png.

All working now.