Javascript For One Hover Element To Act On Another?

[cjy8s@yahoo.com]

<!--function ShowPicture(id,show) {  if (show){        document.getElementById("id").menu_blue.visibility = "visible"  } else {        document.getElementById("id").menu_blue.visibility = "hidden"  }}elseif (Source=="0"){if (document.layers) document.layers[''+id+''].visibility = "hide"else if (document.all) document.all[''+id+''].menu_blue.visibility = "hidden"else if (document.getElementById) document.getElementById(''+id+'').menu_blue.… = "hidden"}}//--> <span id="menu_blue"><img src="Index_files/Images/menu_background.png"/></span><span><table id="menu_block" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)"><tr><th><a class="menu" href="Index_files/HTML/About_Me.html">About Me</a></th><th><a class="menu" href="Index_files/HTML/Contact.html">Contact</a></th><th><a class="menu" href="Index_files/HTML/Blog.html">Blog</a></th><th><a class="menu" href="Index_files/HTML/Portfolio.html">Portfolio</a></th></tr></table></span>

I have an image that kind of serves as an opaque background, and once hovered the opaqueness goes away. Also, I have a row of list items to serve as a menu, and once hovered the color of the text darkens to become more visible. This works great. As long as the mouse is directly over each element. The text element is directly over the background. What I want though is to have the background stay apparent as the text is hovered over, instead of the background becoming opaque again if I hover directly over the text. Ive seen some script that looks like the following that is supposed to achieve this, but I dont know enough about JS to make it work... I think im pretty close though.

<script language="Javascript"><!--function ShowPicture(id,Source) {if (Source=="1"){if (document.layers) document.layers[''+id+''].visibility = "show"else if (document.all) document.all[''+id+''].style.visibility = "visible"else if (document.getElementById) document.getElementById(''+id+'').style.… = "visible"}elseif (Source=="0"){if (document.layers) document.layers[''+id+''].visibility = "hide"else if (document.all) document.all[''+id+''].style.visibility = "hidden"else if (document.getElementById) document.getElementById(''+id+'').style.… = "hidden"}}//--></script> <a href="http://yourwebsitepage.com" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Hover Here To Show Image</a><div id="Style"><img src="The background image you were on about"></div>

Could someone please help me figure this out? Thanks!

[DarkxPunk]

Would this be a option? http://www.w3schools.com/tags/tag_area.asp When you mouse over the area it can do the changes right?

[dsonesuk]

the javascript code provided can be achieved with all css, this WORKS! as long as the #Style container is sibling or same level as #hide_trigger.

<style type="text/css">#hide_trigger:hover ~ #Style {visibility:hidden;}</style>

<a href="http://yourwebsitepage.com" id="hide_trigger">Hover Here To Show Image</a><div id="Style"><img src="the background image you were on about"></div>

what i think you are trying to achieve can also be done, IF i understand your description correctly also with css

<style type="text/css">#table_wrap {position:relative;}#menu_block {border-spacing:0; border-spacing: expression(cellSpacing=0); /*for IE*/ border-collapse:collapse; margin:0 auto;border:0px;padding:0px;}#menu_block + #menu_blue {visibility:visible;}#menu_block tr:hover { background:none;}#menu_block tr {background:url(../images/timberwolfrx3R2.jpg);}</style>

<div id="table_wrap"><table id="menu_block"><tr><th><a class="menu" href="Index_files/HTML/About_Me.html">About Me</a></th><th><a class="menu" href="Index_files/HTML/Contact.html">Contact</a></th><th><a class="menu" href="Index_files/HTML/Blog.html">Blog</a></th><th><a class="menu" href="Index_files/HTML/Portfolio.html">Portfolio</a></th></tr></table></div> 

[cjy8s@yahoo.com]

I guess I should have made my description a little more clear , the CSS should illustrate my point though.

.menu {width: 600px;display: inline;font-family: sans-serif;color: #C8C8C8;text-decoration: none;}a.menu:link {  text-decoration: none;  color: #C8C8C8;  }a.menu:visited {  text-decoration: none;  color: #C8C8C8;  }a.menu:hover {  text-decoration: none;  color: #808080;  }a.menu:active {  text-decoration: none;  color: #808080;  }#menu_blue {position: absolute;float: left;left: 0px;bottom: 0px;opacity:0.15;filter:alpha(opacity=15); /* For IE8 and earlier */}#menu_blue:hover {  opacity:.80;  filter:alpha(opacity=80); /* For IE8 and earlier */  }#menu_blue:pseudo {  opacity:.80;  filter:alpha(opacity=80); /* For IE8 and earlier */  }

Menu_blue is the same image throughout, but I use CSS to change out opaque it is. What I need is for the

#menu_blue:hover {  opacity:.80;  filter:alpha(opacity=80); /* For IE8 and earlier */  }

property to be applied when the menu table is moused over. Thank you again for helping me with this!!

[dsonesuk]

like?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">.menu {width: 600px;display: inline;font-family: sans-serif;color: #C8C8C8;text-decoration: none;}a.menu:link {  text-decoration: none;  color: #C8C8C8;  }a.menu:visited {  text-decoration: none;  color: #C8C8C8;  }a.menu:hover {  text-decoration: none;  color: #808080;  }a.menu:active {  text-decoration: none;  color: #808080;  }#menu_blue {position: absolute;float: left;left: 0px;right:0;bottom: 0px;opacity:0.15;filter:alpha(opacity=15); /* For IE8 and earlier */z-index:0;}#menu_block { position:relative; z-index: 10;}#menu_block:hover ~ #menu_blue {   opacity:.80;  filter:alpha(opacity=80); /* For IE8 and earlier */}</style></head><body> <div id="outer" style="float:left; position:relative; overflow:hidden;"><table id="menu_block" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)"><tr><th><a class="menu" href="Index_files/HTML/About_Me.html">About Me</a></th><th><a class="menu" href="Index_files/HTML/Contact.html">Contact</a></th><th><a class="menu" href="Index_files/HTML/Blog.html">Blog</a></th><th><a class="menu" href="Index_files/HTML/Portfolio.html">Portfolio</a></th></tr></table><div id="menu_blue"><img src="Index_files/Images/menu_background.png"/></div></div></body></html>

[cjy8s@yahoo.com]

hmmm, now the menu_blue appears in the top right corner and cant :hover. I have the CSS in a separate style sheet (i like things to be categorized), other than that, my page is fairly similar to the one you posted. Any ideas? Im gunna try to tweak it tomorrow and see what I can get. Thanks for helping me thus far!

[dsonesuk]

Is This bg image for just the menu only? or does it cover more of page than just the menu?

[cjy8s@yahoo.com]

It covers the width of the page and about 400px upward from the bottom

[dsonesuk]

OK! this will show the full height/width of image used, on the hover of table its opacity will become 0.8. Now IE problem as usual, YOU won't believe, I don't believe this! but IE7 behaves like better browsers in that you hover over table the opacity changes to 0.8 etc, BUT! Versions above IE7 only apply opacity when you hover over text, Now I made it so all version convert to IE7 compatibility mode which works, but you may lose styling fixes that where introduced in the newer versions, The only other way is to use js, Sorry! but That's what I have to deal with everyday create pages for better browser and come up with workaround for ######ty IE, the amount of time wasted putting in these fixes must be staggering. anyway here it is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">.menu {width: 160px;display: block;font-family: sans-serif;color: #C8C8C8;text-decoration: none;}a.menu:link {  text-decoration: none;  color: #C8C8C8;  }a.menu:visited {  text-decoration: none;  color: #C8C8C8;  }a.menu:hover {  text-decoration: none;  color: #808080;  }a.menu:active {  text-decoration: none;  color: #808080;  }#menu_blue {position: absolute;float: left;left: 0px;right:0;top:0;/*bottom: 0px;*/opacity:0.15;z-index:0;}#menu_block { position:relative; z-index: 10; border-collapse:collapse; padding:0;}#menu_block:hover ~ #menu_blue {   opacity:.80; } #outer { position:relative;}  #outer + * {clear:both;}</style><!--[if lte IE 8]>    <style type="text/css">#menu_blue {filter:alpha(opacity=15); /* For IE8 and earlier */}#menu_block:hover ~ #menu_blue  { filter:alpha(opacity=80); /* For IE8 and earlier */}</style><![endif]--></head><body><div id="outer"><table id="menu_block" cellspacing="0" border="0" cellpadding="0"><tr><th><a class="menu" href="Index_files/HTML/About_Me.html">About Me</a></th><th><a class="menu" href="Index_files/HTML/Contact.html">Contact</a></th><th><a class="menu" href="Index_files/HTML/Blog.html">Blog</a></th><th><a class="menu" href="Index_files/HTML/Portfolio.html">Portfolio</a></th></tr></table><div id="menu_blue"><img src="Index_files/Images/menu_background.png" alt="" /></div></div><div style="height:100px; background-color:#CCFF66;">Other elelement</div></body></html>

[cjy8s@yahoo.com]

Oh i do suppose I should come around and thank you. haha Your code was near perfect, only a slight few adjustments and everything showed perfectly. Again, thank you, I had no idea about the ~ function in CSS, and I plan on using it much more now Much appreciated. God Bless.

[dsonesuk]

To get this to work in all IE greater than ie7 without having to use<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">give the anchor links a transparent png background image

.menu {width: 160px;display: block;font-family: sans-serif;color: #C8C8C8;text-decoration: none;background-image:url(../images/transparent_block.png); /* added by dsonesuk*/}