Jump to content

Javascript For One Hover Element To Act On Another?


cjy8s@yahoo.com
 Share

Recommended Posts

<!--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!

Edited by ChrisY92
  • Like 1
Link to comment
Share on other sites

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> 

Link to comment
Share on other sites

  • 2 weeks later...

I guess I should have made my description a little more clear :sorry: , 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!!

Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

  • 5 weeks later...

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*/}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...