Hi,
Sorry for the late response. Been very busy and will be for the next couple of weeks
Here’s how I did it....
1. I created a container document for my menu items. You don’t need to do this. I just did this for organizational purposes on my test site
2. I created a simple MODx template with two divs side by side. The div on the left contains my vertical menu. The div on the right is for the "planes"
3. I added the javascript to the <head> section of my MODx template as instructed by the author of the script. I changed the path to the images to suit my site like so:
preloadimages("assets/templates/tests/images/plane1.gif",
"assets/templates/tests/images/plane2.gif",
"assets/templates/tests/images/plane3.gif",
"assets/templates/tests/images/plane4.gif",
"assets/templates/tests/images/plane5.gif")
I obviously made sure that I had these images in that location
4. In the MODx template, in the right div, I put the path to the initial rollover image
<a href="javascript:warp()"><img src="assets/templates/tests/images/plane0.gif" name="targetimage" border=0></a>
5. I created a TV of type "number" and assigned it to the template used by my container document. I named this TV "slidenumber"
6. Under the above container document (in point 1) I created 5 documents for my test; plane 1.....plane 5. These sub-docs were assigned the same template as their parent doc. Using the TV slidenumber, I assigned each of the sub-docs a number for the variable myimages[] as instructed by the script author. Plane 1 was assigned 0, plane 2 -> 3, etc. I realise using TVs is not very dynamic, but there’s probably another way of doing this.
5. I created an
outerTpl which I named "outerTpl.OnMouseover.Slideshow" and as its content pasted the following code:
Of course you can give the chunk a name of your choice
6. I created a
rowTpl named "rowTpl.OnMouseover.Slideshow" with the following contents:
<li><a href="[+wf.link+]" onMouseover="changeimage(myimages[[+slidenumber+]],this.href)">[+wf.linktext+]</a></li>
Note how the TV slidenumber is referenced. You probably know this already; in WF, you specify a tv with the syntax [+nameOfYourTv+] hence =>
[+slidenumber+]
7. The Wayfinder call
[[Wayfinder? &startId=`76` &outerTpl=`outerTpl.OnMouseover.Slideshow` &rowTpl=`rowTpl.OnMouseover.Slideshow`]]
And here’s my MODx template code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[(site_name)] | [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<base href="[(site_url)]"></base>
<link rel="stylesheet" href="assets/templates/tests/css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="assets/templates/tests/css/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="assets/templates/tests/css/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="assets/templates/tests/css/style.css" type="text/css" media="screen">
<script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script>
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("assets/templates/tests/images/plane1.gif",
"assets/templates/tests/images/plane2.gif",
"assets/templates/tests/images/plane3.gif",
"assets/templates/tests/images/plane4.gif",
"assets/templates/tests/images/plane5.gif")
</script>
</head>
<body>
<div id="wrapper" class="container">
<div class="span-24 last"><h1 id="branding">OnMouseover Slideshow Test</h1></div>
<div id="navigation" class="append-1 span-11">
[[Wayfinder? &startId=`76` &outerTpl=`outerTpl.OnMouseover.Slideshow` &rowTpl=`rowTpl.OnMouseover.Slideshow`]]
</div>
<div class="append-1 span-10 prepend-1 last">
<h2>OnMouseover Slideshow</h2>
<a href="javascript:warp()"><img src="assets/templates/tests/images/plane0.gif" name="targetimage" border=0></a>
</div>
</div><!-- end wrapper -->
</body>
</html>
And here’s the source of the menu that WF outputs
<ul>
<li><a href="/index.php?id=77" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a></li>
<li><a href="/index.php?id=78" onMouseover="changeimage(myimages[1],this.href)">Plane 2</a></li>
<li><a href="/index.php?id=79" onMouseover="changeimage(myimages[2],this.href)">Plane 3</a></li>
<li><a href="/index.php?id=80" onMouseover="changeimage(myimages[3],this.href)">Plane 4</a></li>
<li><a href="/index.php?id=81" onMouseover="changeimage(myimages[4],this.href)">Plane 5</a></li>
</ul>
That’s it really. One thing that doesn’t work; clicking on the images doesn’t take you anywhere except load the initial image. I know nothing about js so can’t fix that, sorry.
See attached screens
Hope this helps
cheers/k
