I wasn’t sure if I should post this here, or in the Wayfinder forum. I think I have wayfinder working, so this is probably a JS issue.
Here is the situation:
I am using wayfinder to generate a nav menu composed of images. I need the text to be a different color when hovering with the mouse, and when you are viewing the associated page. I have everything except the mouseover working. Here is my code:
Wayfinder call:
[!Wayfinder? &startId=`0` &rowTpl=`BGnavTPL` &hereTpl=`BGnavHERETPL` &jsTpl=`BGnavJS` !]
BGnavJS chunk:
<!-- START IMAGE ROLLOVER SCRIPT ******************-->
<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// 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>
<!-- END IMAGE ROLLOVER SCRIPT ********************************-->
BGnavTPL wayfinder row template:
<li><a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+] onmouseover = "rollover('[+wf.title+]')" onmouseout = "rollout('[+wf.title+]')"><img src="/assets/images/navigation/[+wf.title+].gif" alt="[+wf.title+]" name="[+wf.title+]" /></a><script type="text/javascript"><!--setrollover("/assets/images/navigation/[+wf.title+]_blue.gif"); //--></script>[+wf.wrapper+]</li>
BGnavHERETPL wayfinder HERE row template:
<li><a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><img src="/assets/images/navigation/[+wf.linktext+]_pink.gif" alt="[+wf.title+]" /></a>[+wf.wrapper+]</li>
All the images are in the correct location, and looking at the source code it seems like it should work.
Here is a link to the page:
http://s163069307.onlinehome.us
Can anyone please help me figure out why this doesn’t work?
The link to the js page is:
http://www.htmlcodetutorial.com/images/images_famsupp_59.html
MODX Staff
