...

View Full Version : Controling display type with m-overs



Gambithunt
12-10-2004, 12:16 PM
Hi all, I really need some help, I need to link a mouse over of a nav item to the display of an info box. By default the info box needs to have a display property of none, when the mouse overs a particular nav item a spacific info box related to that nav item, its display property must change to block.

Any help would be much appriciated.

coothead
12-10-2004, 12:50 PM
Hi there Gambithunt,

here is an example, it may suit your requirments...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Button Messages</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

body {
background:#dddddd;
}
button {
margin:2px;
font-family:arial;
font-size:14px;
color:#ffffff;
background:#000000;
}
#foo {
position:absolute;
left:200px;
border:solid 1px #000000;
background:#ccccff;
width:210px;
padding:2px;
font-family:arial;
font-size:12px;
text-align:center;
display:none;
}
#container {
position:absolute;
left:100px;
top:100px;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var where=new Array();
where[0]="http://www.google.com/";
where[1]="http://www.yahoo.com/";
where[2]="http://www.lycos.com/";

var message=new Array();
message[0]="this button will take you to google";
message[1]="this button will take you to yahoo";
message[2]="this button will take you to lycos";

function showMess(m,t) {
document.getElementById('foo').style.display="block";
document.getElementById('foo').style.top=t+"px";
document.getElementById('foo').innerHTML=message[m];
document.onmouseout=function() {
document.getElementById('foo').style.display="none";
document.getElementById('foo').innerHTML="";
}
}

function goTo(u) {
location.href=where[u];
}

//]]>
</script>

</head>
<body>

<div id="container">
<button onclick="goTo(0)" onmouseover="showMess(0,106)">where to</button><br />
<button onclick="goTo(1)" onmouseover="showMess(1,133)">where to</button><br />
<button onclick="goTo(2)" onmouseover="showMess(2,160)">where to</button>
</div>

<div id="foo"></div>

</body>
</html>

coothead

Gambithunt
12-13-2004, 11:29 AM
Thanks coothead, I'll give it a try

Basscyst
12-15-2004, 12:04 AM
You could also just add the title attribute to your links. This would be a more acessible solution.

ex.


<a href="http://www.codingforums.com" title="This link takes you to CodingForums.com">


Basscyst

shlagish
12-28-2004, 04:48 AM
The same effect could also be acheived with CSS, I think.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum