Adding rollovers to Scrollable Menu Links

[thehappyappy]

1) Script Title: Scrollable Menu Links

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rollerlink.htm

3) Describe problem: I love this script and would really like to use it. I've added images in place of the text and it works fine, but what I really want to do is have rollovers for the images. I tried it, but when I do nothing shows in the browser page at all. Is it possible to do this?

[ddadmin]

It's certainly possible, but since the HTML for the scrollable menu links is dynamically generated, it can be tricky to add your own code to it and not generate a script error. Assuming you haven't modified what gets output by default, you can add a rollover effect by editing the "leftdircode" and "rightdircode" variables near the top with the changes in red:

var iedom=document.all||document.getElementById
var leftdircode='onMouseover="moveleft(); this.childNodes[0].src=\'over.gif\'" onMouseout="clearTimeout(lefttime); this.childNodes[0].src=\'out.gif\'"'
var rightdircode='onMouseover="moveright(); this.childNodes[0].src=\'over2.gif\'" onMouseout="clearTimeout(righttime); this.childNodes[0].src=\'out2.gif\'"'

[thehappyappy]

Thanks for that. My fault though it wasn't quite what I meant. I have changed the text that was in the demo for images:

var menucontents='<nobr><a href="#"><img src="../images/portfolio1.jpg" /></a> <a href="#"><img src="../images/portfolio2.jpg" /></a> <a href="#"><img src="../images/portfolio3.jpg" /></a> <a href="#"><img src="../images/portfolio4.jpg" /></a> <a href="#"><img src="../images/portfolio5.jpg" /></a> <a href="#"><img src="../images/portfolio6.jpg" /></a></nobr>'

That works perfectly, but what I want to do is when somebody clicks on one of those images a new image is loaded in a different area for the page. I tried:

var menucontents='<nobr><a href="#"><img src="../images/portfolio1.jpg" onclick="MM_swapImage('main','','../images/portfolio1normal.gif',1)" /></a> <a href="#"><img src="../images/portfolio2.jpg" onclick="MM_swapImage('main','','../images/portfolio2normal.gif',1)" /></a> <a href="#"><img src="../images/portfolio3.jpg" onclick="MM_swapImage('main','','../images/portfolio3normal.gif',1)" /></a> <a href="#"><img src="../images/portfolio4.jpg" onclick="MM_swapImage('main','','../images/portfolio4normal.gif',1)" /></a> <a href="#"><img src="../images/portfolio5.jpg" onclick="MM_swapImage('main','','../images/portfolio5normal.gif',1)" /></a> <a href="#"><img src="../images/portfolio6.jpg" onclick="MM_swapImage('main','','../images/portfolio6normal.gif',1)" /></a></nobr>'

but the the entire menu disappeared.