Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2009-04-16
10
Medium Priority
?
397 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:Donnie Walker
  • 5
  • 4
10 Comments
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 24159736
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
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 24159770
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
 

Author Comment

by:Donnie Walker
ID: 24159792
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 18

Expert Comment

by:Eternal_Student
ID: 24159803
See my above post
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 24159816
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
 

Author Comment

by:Donnie Walker
ID: 24159826
I changed the function and now nothing shows up.
0
 

Author Comment

by:Donnie Walker
ID: 24160395
That did not work so I changed it back.
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 24166087
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
 
LVL 3

Accepted Solution

by:
Binylkumar earned 2000 total points
ID: 24166590
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
 

Author Closing Comment

by:Donnie Walker
ID: 31571081
worked perfectly. Thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question