Results 1 to 3 of 3

Thread: Adding rollovers to Scrollable Menu Links

  1. #1
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Adding rollovers to Scrollable Menu Links

    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?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    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\'"'

  3. #3
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:
    Code:
    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:
    Code:
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •