How do I make a link mouseover in a separate DIV?

I have a site here: http://kellercrescentdigital.com/lmh that I am working on. I have the icons at the top and I want to be able to mouseover them and have an icon description appear to the left in the blue area above the logo.

I've got three DIVs side by side in columns (#icon_desc, $icon_man and #icon_search).

I have added some JavaScript that does the mouseover, but it is stacking the words on top of each other.

Not sure what would be the ideal solution to this problem. Is it an CSS issue or a JS issue?




#icon_desc {
  float: right;
  width: 265px;
  height: 37px;
  color: #fff; 
  visibility: hidden;
  font-style: italic; 
  font-weight: bold; 
  text-align: right;
}
#icon_search {
  float: right;
  width: 184px;
  height: 31px;
  margin-top: 6px;
  background: url(../images/icon_bar_06.gif) repeat-x;
}
#icon_main { 
  float: right;
  width: 265px;
  height: 37px;
  background: url(../images/icon_bar_06.gif) repeat-x;
}
 
.searchme {
    font-size: 13px;
    height: 18px; 
    color: #336699; 
    border: #336699 1px solid; 
    font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; 
    background: #ffffff url(../images/searchme.gif) no-repeat left center; 
    padding-left: 25px;
    margin-top: 2px;
}
.vmCartModule {
     text-align: center;
     width: 160px;
     background: #fff url(../images/left_bg.png) repeat-x top;
     padding: 10px;
     margin-right: 10px;
     font-weight: bold;
     font-size: 12px;
     color: #2F82CC;
}
fieldset {
	margin: 20px 0;
	padding: 15px 10px;
	border: 3px double #ccc;
	background-color: #FFF;
	overflow: auto;
}
 
legend {
     color: #336699;
     font-size: 17px;
     font-weight: bold;
 
}
#imgborder {
    border-color:#666666; 
    border: 3px solid;
 
} 
.click-menu122 {
    margin-top: 10px;
    margin-right: 10px;
    background: #fff url(../images/left_bg.png) repeat-x top;
    height: 600px;
}
.click-menu113 {
    margin-top: 10px;
    margin-right: 10px;
    background: #fff url(../images/left_bg.png) repeat-x top;
}
.click-menu116 {
    margin-top: 10px;
    margin-right: 10px;
    background: #fff url(../images/left_bg.png) repeat-x top;
    height: 600px;
}
/* --------------------------------- */
/*MESSAGE BOX CLEAN	serie	  		 */
	.clean-gray{
		border:solid 1px #DEDEDE; 
		background:#EFEFEF;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.clean-yellow{
		border:solid 1px #DEDEDE; 
		background:#FFFFCC;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.clean-ok{
		border:solid 1px #349534; 
		background:#C9FFCA;
		color:#008000;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	.clean-error{
		border:solid 1px #CC0000; 
		background:#F7CBCA;
		color:#CC0000;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
 
/* --------------------------------- */
/*MESSAGE BOX Iconized	  		 */
	.icon-gray{
		border:solid 1px #DEDEDE; 
		background:#EFEFEF;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.icon-yellow{
		border:solid 1px #E56717; 
		background:#FFFFCC url(../images/icon-yellow.png) 8px 6px no-repeat;
		color:#222222;
		padding:4px;
                margin-top:10px;
		text-align:left;
	}
	.icon-ok{
		border:solid 1px #90ac13; 
		background:#eef4d3 url(../images/icon-green.png) 8px 6px no-repeat;
		color:#6b800d;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	.icon-error{
		border:solid 1px #CC0000; 
		background:#F7CBCA url(../images/icon-red.png) 8px 6px no-repeat;
		color:#CC0000;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	
/* --------------------------------- */
/*MESSAGE BOX SOLID	serie	  		 */
 
	.solid-gray{
		background:#444444;
		color:#FFFFFF;
		padding:4px;
		text-align:center;
	}
	.solid-yellow{
            border:solid 2px #eac11e;
		background:#FFFFCC;
		color:#044c9a;
		padding:4px;
		text-align:center;
	}
	.solid-ok{
		background:#008000;
		color:#FFFFFF;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	.solid-error{
		background:#CC0000;
		color:#FFFFFF;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	
/* --------------------------------- */
/* ROUNDED ALTERNATE	  		 	*/
 
	/* ---------------------------------------------------------------------- */
	.round-a-gray{
		background:#444444 url(../images/round_gray-left.png) left top no-repeat;
		color:#FFFFFF;
		text-align:center;
	}
		.round-a-gray div{
			background:url(../images/round_gray-right.png) right bottom no-repeat;
			padding:4px;
		}
	/* ---------------------------------------------------------------------- */
	.round-a-ok{
		background:#008000 url(../images/round_green-left.png) left top no-repeat;
		color:#FFFFFF;
		text-align:center;
	}
		.round-a-ok div{
			background:url(../images/round_green-right.png) right bottom no-repeat;
			padding:4px;
		}
	/* ---------------------------------------------------------------------- */
	.round-a-error{
		background:#CC0000 url(../images/round_red-left.png) left top no-repeat;
		color:#FFFFFF;
		text-align:center;
	}
		.round-a-error div{
			background:url(../images/round_red-right.png) right bottom no-repeat;
			padding:4px;
		}
		
/* --------------------------------- */
/* TOOLTIPS				  		 	*/
 
	/* ---------------------------------------------------------------------- */
	.tooltips-gray{
		background:#444444;
		color:#FFFFFF;
		text-align:center;
		padding-top:4px;
	}
		.tooltips-gray div{
			background:url(../images/tips_gray.png) left bottom no-repeat;
			padding-top:4px;
			height:18px;
		}
	/* ---------------------------------------------------------------------- */
	.tooltips-ok{
		background:#008000;
		color:#FFFFFF;
		text-align:center;
		padding-top:4px;
	}
		.tooltips-ok div{
			background:url(../images/tips_green.png) left bottom no-repeat;
			padding-top:4px;
			height:18px;
		}
	/* ---------------------------------------------------------------------- */
	.tooltips-error{
		background:#CC0000;
		color:#FFFFFF;
		text-align:center;
		padding-top:4px;
	}
		.tooltips-error div{
			background:url(../images/tips_red.png) left bottom no-repeat;
			margin-top:4px;
			height:18px;
		}
 
select {font-size: 11px; color: #336699; border: #336699 1px solid; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; background: #ffffff; }
 
 
.gn_header_1 {
 color: #336699;
}
#latestnews {
  float: left;
  width: 200px;
  height: 225px;
}
#latestevents {
  float: right;
  width: 200px;
  height: 225px;
  padding: 5px;
  color: #336699;
  font-weight: bold;
}
.componentheading {
  color: #336699;
  font-size: 20px;
  font-weight: bold;
}
.contentheading {
  color: #336699;
  font-size: 20px;
  font-weight: bold;
}
img, div { 
      behavior: url(/lmh/templates/LogansPort_Memorial_Hospital/iepngfix.htc) 
}
 
h1 {
      color: #4a6171;
      font-size: 20px;
   }
 
#wrapper {
	width: 779px;
	margin: 0 auto; /* centering the page */
	text-align: left;
}
#container {
      background: #fff;
      height: 100%;
      width: 769px;
}
#header {
      background: #fff;
	height: 34px;
	margin: 0 auto; /* centering the page */
	padding: 0; 
	}
.menu_leftcol {
      float: left;
      width: 160px;
      background: #fff url(../images/left_bg.png) repeat-x top;
      padding: 10px;
      margin-right: 10px;
      height: 600px;
      list-style-type: none;
 
}
 
.menu_leftcol a:link,.menu_leftcol a:visited,.menu_leftcol a:active {
      font-weight: bold;
      font-size: 12px;
      color: #024886;
      line-height: 20px;
      text-decoration:none;
}
.menu_leftcol a:hover {
      color: #a00000;
}
#content {
      background: #fff;
      float: left;
      padding: 20px;
      width: 739px;
      height: 100%;
      min-height: 400px;
	}
#content_front {
      background: #fff;
	float:left;
      min-height: 400px;
	}
#footer {
     clear: both;
     background: url(../images/bg_footer.png) no-repeat top;
     color: #024886;
     font-size: 9px;
     height: 25px;
}
#footleft {
     width: 300px;
     float: left;
     padding: 10px;
}
#footright a {
     color: #024886;
     width: auto;
     float:right;
     padding: 10px;
     text-decoration: none;
}
 
#logo {
      float: left;
      background: url(../images/logo.png) no-repeat;
	height: 104px;
	width: 265px;
}
#logoright {
      float: right;
	height: 22px;
	width: 300px;
      /* color: #fff; */
      /* padding-top: 20px; */
      /* font-size: 17px; */
      /* font-weight: bold; */
      /* text-align: right; */
      /* background: url(../images/number.png) no-repeat right; */
}
 
#splash {
      text-align: center;
      margin: 5px;
}
 
.tile {
	float: left;
	width: 106px;
      height: 225px;
      margin: 5px;
}
 
#tile1 {
float: left;
width : 106px;
height : 225px;
background-image : url(../images/icon_baby.png);
margin: 5px;
}
 
#tile1:hover {
background-image : url(../images/icon_baby_over.png);
} 
table.grid {width:100%; border-collapse: collapse; border-spacing:0; border-color: #000000; border-width: 1px; border-style: solid;}
table.grid th {white-space: nowrap; text-transform: uppercase; text-align: center; background:#044c9a; padding:4px; font-size: 10px; font-weight: bold; color: #ffffff; border-color: #7E9DB9; border-width: 1px; border-style: solid; padding: 4px;}
table.grid td {font-size: 90%; font-weight: normal; color: #000000; border-color: #7E9DB9; border-width: 1px; border-style: solid; padding: 4px; }

Open in new window

Donnie WalkerAsked:
Who is Participating?
 
BinylkumarCommented:
Hi,

Try this, I have given this example where you can swap the description image. Place appropriate image in that folder where you saving this file.



<!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=iso-8859-1" />
<title>Binylkumar</title>
<script language="javascript">
      function showDesciption(getDescpDiv, getDescpMsg){
            document.getElementById(getDescpDiv).src = getDescpMsg;
            document.getElementById(getDescpDiv).style.visibility = 'visible';
            
      }
      
      function hideDesciption(getDescpDiv, getDesciption){
            document.getElementById(getDescpDiv).src = "";
            document.getElementById(getDescpDiv).style.visibility = 'hidden';
      }      
</script>
</head>

<body style="background:green;">
<div style="height:auto;margin:0;padding:0;">
<a href="http://kellercrescentdigital.com/lmh/clinics/expressmed.html" onmouseover="showDesciption('imgDisp','Logansport Memorial Hospital_files/desc_expressmed.png');" onmouseout="hideDesciption('imgDisp',' ');"><img alt="ExpressMed" src="Logansport Memorial Hospital_files/icon_bar_01.gif" border="0" height="37" width="59"></a>
<a href="http://kellercrescentdigital.com/lmh/clinics/expressmed.html" onmouseover="showDesciption('imgDisp','Logansport Memorial Hospital_files/desc_volunteer.png');" onmouseout="hideDesciption('imgDisp',' ');"><img alt="Volunteer" src="Logansport Memorial Hospital_files/icon_bar_02.gif" border="0" height="37" width="53"></a>
<a href="http://kellercrescentdigital.com/lmh/clinics/expressmed.html" onmouseover="showDesciption('imgDisp','Logansport Memorial Hospital_files/desc_babyphotos.png');" onmouseout="hideDesciption('imgDisp',' ');"><img alt="Baby Photos" src="Logansport Memorial Hospital_files/icon_bar_03.gif" border="0" height="37" width="42"></a>
</div>

<div style="width:200px;"><img id="imgDisp" style="visibility:hidden;" src="" border="0" height="29" width="221"></div>
</body>
</html>
0
 
Eternal_StudentCommented:
How are you showing and hiding these?

if you use display:none and then change that to display:inline it will not stack them up.
0
 
Eternal_StudentCommented:
You could change the showHideLayers function at the top of the page to this, should work
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'inline':(v=='hide')?'none':v; }
    obj.display=v; }
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Donnie WalkerAuthor Commented:
I'm using javascript to do it:

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

and then for the href link:

 onMouseOver="MM_showHideLayers('expressmed','','show')" onMouseOut="MM_showHideLayers('expressmed','','hide')">

are you saying I can do this with CSS only? How would I do it?
0
 
Eternal_StudentCommented:
See my above post
0
 
Eternal_StudentCommented:
I changed the javascript - so instead of changing the CSS properties to visibility hidden to visible I am using display:none to display:inline.

let me know if that works?
0
 
Donnie WalkerAuthor Commented:
I changed the function and now nothing shows up.
0
 
Donnie WalkerAuthor Commented:
That did not work so I changed it back.
0
 
Eternal_StudentCommented:
OK - what is happening is those hidden images are being stacked up as divs are block level elements therefore they will stack on top of each other. I would personally change the javascript function as the MacroMedia built in one you are using is a little unconventional. But it does work, you just need to change all of the hidden divs to have the position:absolute like below:

<div style="position:absolute;" id="expressmed">

<div style="position:absolute;" id="volunteer">

etc etc

You could probably just create a class and apply it to each one. You could also mess around with the top and left positioning if it is not exactly where you want it to be.

Hope this helps?
0
 
Donnie WalkerAuthor Commented:
worked perfectly. Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.