Anylink Menu w/Rollover Pics instead of text?

[stossell]

I got the Anylink Drop Down Menu to work great, but I want to use rollover pics instead of text menus. I have one main menu item with two links in the drop down. Can I somehow incorporate rollover pics in all three links without text? Can I add an image swap feature in the code below?

the orginal DD tutorial is http://www.dynamicdrive.com/dynamici...pmenuindex.htm

<a href="http://www.dynamicdrive.com"onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '130px')" onMouseout="delayhidemenu()">

var menu1=new Array()
menu1[0]='<"http://www.dynamicdrive.com/menu1">sub menu1</a>'
menu1[1]='<hr>'
menu1[2]='<"http://www.dynamicdrive.com/menu2">sub menu2</a>'

Thanks

[jscheuer1]

This (highlighted red):

var menu1=new Array()
menu1[0]='<"#">sub menu1</a>'
menu1[1]='<hr>'
menu1[2]='<"#">sub menu2</a>'

is not valid and should create, at the very least, a situation where the texts in green are not links. Furthermore, in all of what you have written in your post, there isn't a single valid link, let alone one with text. To create a link using an image with rollover, this syntax may be employed:

<a href="somepage.htm" [include events or any valid link attributes here]><img src="some.jpg" onmouseover="rolloverfunction(this, 'someother.jpg');" onmouseout="rolloverfunction(this, 'some.jpg');"></a>

The only difference, if you use the above in a menu array, is that you must escape the single quotes:

menu1[0]='<a href="somepage.htm" [include events or any valid link attributes here]><img src="some.jpg" onmouseover="rolloverfunction(this, \'someother.jpg\');" onmouseout="rolloverfunction(this, \'some.jpg\');"></a>'

The rollover function could look like this:

<script type="text/javascript">
function rolloverfunction(el, img){
el.src=img
}
</script>

[stossell]

Thanks John,
I fixed my original post and added urls. I tried what you suggested, but I can't get it to work.

with your suggestions, this is my new code:
MAIN MENU:
<a href="http://www.dynamicdrive.com"onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '136px')" onMouseout="delayhidemenu()"><img src="imgx/ad.gif" border="0" onMouseover="rolloverfunction (this, '/imgx/adr.gif')," onMouseout="rolloverfunction (this, '/imgx/ad.gif'),"></a>
SUB MENUS:
var menu1=new Array()
menu1[0]='<a href="http://www.dynamicdrive.com/menu1.htm"><img src="imgx/ms.gif" border="0" onMouseover="rolloverfunction (this, \'/imgx/msb.gif\')," onMouseout="rolloverfunction (this, \'/imgx/ms.gif\'),"></a>'
menu1[1]='<hr>'
menu1[2]='<a href="http://www.dynamicdrive.com/menu2.htm"><img src="imgx/ws.gif" border="0" onMouseover="rolloverfunction (this, \'/imgx/wsb.gif\')," onMouseout="rolloverfunction (this, \'/imgx/ws.gif\'),"></a>'

I added your script above my </head tag> too. Could it be the rollover script is competing with the AnyLink Drop Down menu script above it? I'm using dreamweaver, so all my <>are correct. The main pics are showing up, but they won't load the rollover pics. Any suggestions?

Thanks taking the time to reply. I appreciate it!

[jscheuer1]

Where are you doing this? If it is local:

'/imgx/ad.gif'

points to a directory 'imgx' in the root of the active drive. If it is live, a directory 'imgx' in the root of the domain. If as you say, src="imgx/ad.gif" is working, try listing the rollover paths using the same syntax, ie:

onMouseover="rolloverfunction (this, 'imgx/adr.gif');"

and in the menu array:

onMouseover="rolloverfunction (this, \'imgx/msb.gif\');"

Also, notice the red semicolons where you used commas (and I used semicolons in my example). This is important. Semicolons denote the end of a command. Comas separate commands or variables that are to be taken or executed together.

[stossell]

Thanks! You are absolutely right! It's working great now. I was having trouble copying and pasting your code earlier so I mistyped it.

Just out of curiousity, do you know if I can incorporate the Image Swap(Rollover) code that Dreamweaver produces instead of using the separate rollover script. I have 12 menus that currenly use DW ImageSwap, but only one has the Anylink Drop Down w/ 2 submenus to use the Rollover script you gave me.
I tried this after seeing your code:
MAIN MENU (which actually works):
<a href="http://www.page1.htm"onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '136px')" onMouseout="delayhidemenu()"><img src="home/ad.gif" border="0" name="add" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('add','','home/adb.gif',1)"></a>

SUB MENUS (the ANylink drop menu won't work anymore)
var menu1=new Array()
menu1[0]='<a href="http://www.submenu1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sub1','','home/jsb.gif',1)"><img src="home/js.gif" name="sub1" width="83" height="11" border="0"></a>'
menu1[1]='<hr>'
menu1[2]='<a href="http://www.submenu2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sub2','','home/jsb.gif',1)"><img src="home/js.gif" name="sub2" width="83" height="11" border="0"></a>'

[stossell]

Is there a way in the Anylink Drop menu to make my main menu work as a button if the browser is too old for drop downs. My main menu doesn't work as a link, just the drop down sub menus. I want to make sure that the main link works if the viewer has an old browser that doesn't support the dropped sub menus. (I'm using Mac Safari)

Thanks!

[jscheuer1]

Well, if the browser isn't using javascript at all, the links will be links, not drop downs. And the same should be true of browsers not capable of this level of scripting, even if their javascript is turned on, owing to this part of the script:

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

Which is active onclick of the headings, allowing older browsers to treat these items as regular links. The only reason that they might not, that I can see in your code, is the fact that you have not left a space here:

<a href="http://www.page1.htm"onClick="return clickreturnvalue()"

which should be like:

<a href="http://www.page1.htm" onClick="return clickreturnvalue()"