Back To Start Of Archive
Taken From The Forum: Archived Topics for the old Version 3.0 JavaScript Menu
Forum Topic: Click to view post
Last Updated: Wednesday July 18 2012 - 06:07:36
Image Menu Rollover/Link Issue
Poster: Aquatoad
Dated: Tuesday June 4 2002 - 2:02:24 BST
Hi,
The menu is working fine on all browsers except for IE6
Basically, the entire menu is made up of images. In the submenus, rather than have the whole item rollover, I have a little pointer arrow image in front that swaps out on rollover.
[>][Menu-Item-Image] //the menu item when rolled over
[ ][Menu-Item-Image] //the menu item when rolled off
The Problem: In IE6 the only the pointer image links to the approprate page, not the Menu-Item-Image also. In all other browsers the link applies to both images.
Here's the url:
http://www.aquatoad.com/trane/homepage.html
This is the code for the rollover/link:
,"<img src=noarrow.gif border=0><img src=history.gif border=0>","/trane/history.html swapimage=redarrow.gif",,,0
I've tried moving and duplicating the link but it doesn't work.
Thanks for any help.
Toad.
Poster: Aquatoad
Dated: Tuesday June 11 2002 - 16:37:30 BST
Please take a look, perhaps I'm a moron. I still can't figure out how to get both the static image and the swapped image to reference the new page. Thanks in advance!
-Toad
Poster: Caballonegro
Dated: Wednesday June 12 2002 - 2:25:07 BST
Hello all!
I am a new user of this realy great and fantastic menu.
Never i found a menu that can do so many different things!
It's realy great!
But, I write all, and sure, first to Andy, i belive he is the Creator of this Menu, because i have the same problem as Aquatoad.
I like to use the "swapimage=" comand in a submenu(1.level) and than further in combination with to opening a Submenu from the second level!
I try many variations, read many lines in this forum,spend many hours for to probe and now i have done one step forward and it seems to work.
Look at these examples::
Code:
// main menu.....
,"<img border=0 src=men_neu102.gif>","show-menu=other","# swapimage=men_neu202.gif;","#",1
])
addmenu(menu=["other",
,,140,1,"",style2,,"",fade_effect,,,,,,,,,,,,
,"<img src=excite.gif order=0> Excite", "http://www.excite.com",,,1
,"<img border=0 src=newsimage.gif> test submenu 2. Level","show-menu=technonews","# swapimage=3darrow.gif;","Back to the home page",1
])
addmenu(menu=["technonews",
,,110,1,"",style2,,"left",effect,,,,,,,,,,,,
,"Slashdot","http://www.slashdot.com",,,0
,"<img border=0 src=av_icon.gif> Slashdot","http://www.slashdot.com swapimage=newsimage.gif",,,0
,"<img border=0 src=3darrow.gif> normal link","http://www.msnbc.com swapimage=newsimage.gif","some texts",,0
,"<img border=0 src=excite.gif> submen link","show-menu=news","# swapimage=av_icon.gif;","some texts",1
])
addmenu(menu=["news",
,,120,1,"",style2,,"left",fade_effect,,,,,,,,,,,,
,"General","show-menu=generalnews",,,1
,"Technology","show-menu=technonews",,,1
])
,"<img border=0 src=men_neu102.gif>","show-menu=other","# swapimage=men_neu202.gif;","#",1
])
addmenu(menu=["other",
,,140,1,"",style2,,"",fade_effect,,,,,,,,,,,,
,"<img src=excite.gif order=0> Excite", "http://www.excite.com",,,1
,"<img border=0 src=newsimage.gif> test submenu 2. Level","show-menu=technonews","# swapimage=3darrow.gif;","Back to the home page",1
])
addmenu(menu=["technonews",
,,110,1,"",style2,,"left",effect,,,,,,,,,,,,
,"Slashdot","http://www.slashdot.com",,,0
,"<img border=0 src=av_icon.gif> Slashdot","http://www.slashdot.com swapimage=newsimage.gif",,,0
,"<img border=0 src=3darrow.gif> normal link","http://www.msnbc.com swapimage=newsimage.gif","some texts",,0
,"<img border=0 src=excite.gif> submen link","show-menu=news","# swapimage=av_icon.gif;","some texts",1
])
addmenu(menu=["news",
,,120,1,"",style2,,"left",fade_effect,,,,,,,,,,,,
,"General","show-menu=generalnews",,,1
,"Technology","show-menu=technonews",,,1
])
and write about your expirience in this forum
thanks
saludos y bueno suerte
Caballo Negro[/b]
Re: onmouseover, javascript, swap images
Poster: mstill
Dated: Wednesday June 12 2002 - 3:17:17 BST
the effect i am trying to get is this:
http://www.sonicairsystems.com/index.php3
except if you look at the source code, it's pretty nasty and is not easily configurable...and is not as compatible as the milonic code!
the prototype with milonic code is at:
http://www.sonicairsystems.com/sonicdev/gapmenu/index.html
I will whole heartedly agree with you: I like the milonic menu. It's the most versatile, efficient, and friendly menu I have ever used.
Poster: Aquatoad
Dated: Wednesday June 12 2002 - 23:08:22 BST
Howdy Caballonegro,
I looked over that code and it looks like you're doing items with an image that rolls over followed by html text. I can get that to work also. The issue is when the item consists of an image that rolls over, followed by another image that is static. The second image doesn't link to the url, just the first.
Arggg. This is getting muy agravating. I know I could fix it by merging the two images together, but that would mean I'd need rollovers for every menu item, which i'd like to avoid.
Any other thoughts?
Ranafloja
????
Poster: Caballonegro
Dated: Thursday June 13 2002 - 1:07:20 BST
Sorry but i did'nt understand it.
Could you send me an url from a page with sample look!
I'm very interested what you mean!
Caballonegro
Poster: Aquatoad
Dated: Thursday June 13 2002 - 16:34:01 BST
Wahoo! Got it Going! With lots of coddling from Andy
I've been doing a lot of research on the whole issue of rollovers, and I'm going to post all my findings here so bear with me.
There are two syntaxes depending on whether you are doing a rollover in a menu item that links to a sub-menu or one that links to a url.
(quoting Hergio here):
To have the menu item be a clickable link to a URL:
,"<img border=0 src=image.gif> Text Here",
"http://www.url-here.com swapimage=/image_over.gif;",,,0
To have the menu item show a submenu:
,"<img border=0 src=image.gif> Text Here",
"show-menu=submenuname","# swapimage=image_over.gif;",,,0
Notice how to make it display a submenu you must put the swap image tag in the next area of commas (referred to as the Alternate URL section in the comments of the code) with a pound symbol and space placed before it.
Thanks Hergio.
That should cover the vast majority of rollover cases.
Also you should know (this is the answer to my issues in this thread). If instead of having a (rollover image + html text) you have a (rollover + a static image), IE6 does not allow both images to link to the url only the rollover. You have to do a (rollover + a background image) Then they both will link. Thanks Andy! Here's what that code whould look like...
,"<img src=image.gif border=0>","http://www.url-here.com backimage=static-image.gif;swapimage=image_over.gif",,,0
Thanks everyone for your posts.
Caballonegro, http://www.aquatoad.com/trane/homepage.html
Whew!
-Toad
Poster: SoTTo
Dated: Friday June 14 2002 - 18:48:23 BST
This deserves a big applause and a big thank you for your (probably very) hard work...
That's one hell of a menu you got there... Nice!
Thx for sharing!
Thx Andy for your menu...
And finally a question...is this kind of menu...(with rolloverimage before the menu-text)....possible with an rollover image (for the little arrow)...and text?
(because i really like the arrow in front of the text...and trying to build the menu_array from a database...)