Is this possible?

[IliketheWeb]

Hey on this site Im working on I have a navigation bar, and when you scroll over a link it will switch to the rollover state (just a different image) and at the same time a drop down menu will appear. Is it possible to make it so that when the user has there mouse on the drop down menu the rollover image for the link will stay the same?

[Kravvitz]

Yes, it's possible. How to do that would depend on how you've coded it.

[IliketheWeb]

well could you help me in anyway?

[Kravvitz]

Perhaps. But not without seeing your code.

P.S. You mean "any way", not "anyway".

[IliketheWeb]

perfectionist are we? haha heres my code...

#dropmenudiv{
background-image:url(images/layout/aboutDropBG.jpg);
background-repeat:no-repeat;
position:absolute;
padding-top: 20px;
height: 124px;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:2;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 10px;
padding: 3px;
color:#FFFFFF;
text-decoration: none;
font-weight: normal;
}

#dropmenudiv a:hover{ /*hover font color*/
color: #83ADBB;
}

</style>

<script type="text/javascript">

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="#">Who We Are</a>'
menu1[1]='<a href="#">Our Mission Statement</a>'
menu1[2]='<a href="#">Our Beliefs</a>'
menu1[3]='<a href="#">Meet The Staff</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

var menuwidth='204px' //default menu width
var menubgcolor='white' //menu bgimage
var disappeardelay=0 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=6
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

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

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

Then heres my coding on the actual button...

<div id="aboutBtn"><a href="about.html" onclick="return clickreturnvalue()" onmouseover="MM_swapImage('about','','images/layout/buttons/about_over.gif',1);dropdownmenu(this, event, menu1, '204px')" onmouseout="MM_swapImgRestore();delayhidemenu()"><img src="images/layout/buttons/about.gif" alt="About Us" name="about" width="70" height="26" border="0" id="about" /></a></div>

Also heres a link to the site

http://www.spaodesigns.com/www/Coast/index.html

[Kravvitz]

1) Lose DreamWeaver's Design Mode.

2) You're using an awful lot of absolute positioning and JavaScript.

3) You should use a list (<ul> and <li>s) instead of all of those <div>s.

4) I suggest you read this article.
http://apptools.com/rants/jsmenu.php
I have a much higher opinion of the Suckerfish Menu System than this author, however, he does explain the pitfalls of DHTML menus well.

5) To fix your code, such as it is, move the onmouseover and onmouseout events to the parent <div> of each <a>.

[IliketheWeb]

im really confuseddddd

[JPnyc]

You don't wanna use that type of menu, it's search engine unfriendly, and way more complex than the better solution is.

Hard code the menus into the page, so search engine bots and audio browsers can find them, position them absolutely, but hide them with either the css visibility attr. or the display attr. Then in your statement on mouseover call this function

function showEm(id,imgName,hoverImg) {

document.getElementById(id).style.display="block";
document.images[imgName].src=hoverImg;

}

The function call for each tab or link will be onmouseover="showEm('myDivID','imgName','hoverImgPath')"

[IliketheWeb]

could you give me an example of how to do that with the coding I posted?

[JPnyc]

This isn't in addition to the code you posted, it's in place of it. Let's say your 1st nav image is named image1, and your hover image is called on.gif, and the menu id is menu1. The call to the function would look like this:

onmouseover="showEm('menu1','image1','on.gif')"

[slaughters]

... have a much higher opinion of the Suckerfish Menu System than this author...I have never understood why people praise the UL/LI CSS menu system used by Suckerfish.

It requires a browser which has a very strong CSS implementation, and you have to use JavaScript or HTC to support this in all browsers anyway. (good bye smartphone and pda browser support)

So - Where is the advantage? What is the point?

And before anyone can jump in with the "blah blah blah... degrades well" argument, so do nested tables, yet I never see anyone jumping up and down about how cool nested tables are.

[Kravvitz]

It requires a browser which has a very strong CSS implementation, and you have to use JavaScript or HTC to support this in all browsers anyway. (good bye smartphone and pda browser support)
So any modern desktop/laptop browser other than IE.

Yes, to support IE/Win you do need JavaScript or an HTC. You can use conditional comments so other browsers won't see that code.

I don't know what browsers for handheld devices do and don't support. I've heard that their support for JavaScript and CSS varies. *shrugs*

I have never understood why people praise the UL/LI CSS menu system used by Suckerfish.
...
So - Where is the advantage? What is the point?
Semantics.
Semantic code: What? Why? How? (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html)
The Meaning of Semantics (Take I) (http://www.peachpit.com/articles/article.asp?p=369225&rl=1)
Semantic code (http://www.maxdesign.com.au/presentation/sit2003/05.htm)
Creating Semantic Structure (http://www.webaim.org/techniques/structure/)
Semantics, HTML, XHTML, and Structure (http://www.brainstormsandraves.com/articles/semantics/structure/)
Standards don't necessarily have anything to do with being semantically correct (http://www.kottke.org/03/08/standards-semantically-correct)
Semantic Coding (http://www.andybudd.com/archives/2004/05/semantic_coding/)

And before anyone can jump in with the "blah blah blah... degrades well" argument, so do nested tables, yet I never see anyone jumping up and down about how cool nested tables are.
Exactly in what way do tables degrade well?

[slaughters]

..So any modern desktop/laptop browser other than IE....Yes you are correct. For any modern desktop/lap top browser other than the one used by 90%-95% of the world

...Exactly in what way do tables degrade well?In what way do they not? They were one of earliest supported tags. For a vertical menu each row is a link and a nested table is submenu which is hidden/shown via javascript on mouseover.

Without Javascript support it degrades just as well as the UL/LI suckerfish menu. Here it is without the JavaScript. (Code to hide/show subtables on link mouseovers is trivial and I didn't want to clutter this quick example with it.) This way you can see it degrades just as well as UL/LI<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
a {
font-family: Arial, Helvetica, sans-serif;
color: #0066FF;
font-size: 10px;
text-decoration: none;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #FEC134;
font-size: 10px;
text-decoration: none;
}
-->
</style>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0">
<tr><td nowrap><a href="#">Item 1</a></td></tr>
<tr><td nowrap><a href="#">Item 2</a></td></tr>
<tr>
<td nowrap><a href="#">Item 3</a>
<table border="0" cellpadding="0" cellspacing="0" style="margin-left:10px">
<tr><td nowrap><a href="#">Item 3 - Sub 1</a></td></tr>
<tr><td nowrap><a href="#">Item 3 - Sub 1</a></td></tr>
<tr><td nowrap><a href="#">Item 3 - Sub 1</a></td></tr>
</table>
</td>
</tr>
<tr><td nowrap><a href="#">Item 4</a></td></tr>
</table>

</body>
</html>

[Kravvitz]

Yes you are correct. For any modern desktop/lap top browser other than the one used by 90%-95% of the world
I'm not sure where you are getting that statistic.

Check out these:
http://www.thecounter.com/stats/2006/July/browser.php
http://www.upsdell.com/BrowserNews/stat.htm
http://marketshare.hitslink.com/report.aspx?qprid=0

They were one of earliest supported tags.
HTML 2 includes lists but not tables. (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html) :p

For a vertical menu each row is a link and a nested table is submenu which is hidden/shown via javascript on mouseover.

Without Javascript support it degrades just as well as the UL/LI suckerfish menu. Here it is without the JavaScript. (Code to hide/show subtables on link mouseovers is trivial and I didn't want to clutter this quick example with it.) This way you can see it degrades just as well as UL/LI
Well it doesn't have list-markers and there are more elements used in the markup even without the semantics argument.

[IliketheWeb]

im so lost....lol

[JPnyc]

Guys, please don't hijack the thread. Take the conversation into another thread or the PM system. Thank you

[IliketheWeb]

Could someone explain to me how to use this code??

function showEm(id,imgName,hoverImg) {

document.getElementById(id).style.display="block";
document.images[imgName].src=hoverImg;

}

onmouseover="showEm('myDivID','imgName','hoverImgPath')"

I dont understand what to put for the imgName and hoverImgPath

[slaughters]

I'm not sure where you are getting that statistic.Pardon me. I'm horribly wrong :eek: . It's 85%. Thanks for the correction. :) ...Well it doesn't have list-markers and there are more elements used in the markup even without the semantics argument.And that prevent's it from degrading well just how?

The only reason people some people prefer UL lists is that

(a) There is some weird peer presssure thing going on that if you use tables your not a "cool nifty-neato-know-what-you-are-doing-web-programmer-kind-of-guy"

and

(b) Even though tables give you more layout flexability they can't beat the simplicity in layout of a simple UL list.

My problem is that I find the HTML syntax cleaness over ridden by the complexity introduced by the obscure CSS tricks and hacks required to tame the formatting demons of a UL/LI list (tables have a lot all ready built into their tag definition).

[slaughters]

Could someone explain to me how to use this code??

function showEm(id,imgName,hoverImg) {

document.getElementById(id).style.display="block";
document.images[imgName].src=hoverImg;

}

onmouseover="showEm('myDivID','imgName','hoverImgPath')"

I dont understand what to put for the imgName and hoverImgPathSome one earlier in this thread pointed to an example: http://www.webdeveloper.com/forum/showpost.php?p=625296&postcount=10

myDivID - is the id of the DIV tag (could be a SPAN as well) that will be displayed when you hover
imgName - is the id you gave the img tag that you want the hover effect to occur in (the one the mouse is hovering over).
hoverImg - is the actual file name of the graphic image to be shown

Quick Example:<html>
<head>
<script>
function showEm(id,imgName,hoverImg) {
document.getElementById(id).style.display="block";
document.images[imgName].src=hoverImg;
}
</script>
</head>
<body>
<a href="javascript:showEm('bobsDIV','bob','sillyOn.gif')"><img id="bob" src="silly.gif"></a>
<div id="bobsDIV" style="display:none">Showme On Hover Dude!</div>
</body>
</html>

[IliketheWeb]

thankyou very much

[netbuddy]

use an unordered list for example
<ul>
<li><a href='linkinfo1' target='_blank'>linkinfo1</a></li>
<li><a href='linkinfo2' target='_blank'>linkinfo2</a></li>
</ul> type of construct to make a list of links.
so that if Javascript is not present, your links will still function and if javascript is present,your routines can be used to manipulate the object.

[IliketheWeb]

How come when I scroll off the link and the drop down menu it doesnt go away?