how to do something like that?

justyna · 09-02-2007, 05:39 PM

Hi!
There is a nice feature that I've seen on data recovery services site.
When you move mouse over the "Country", in the top on the right side of the page, then the frame pop ups,
with he list of country to choose. I want o do sth like that on my page, but I've just started to learn javascript,
and I have no idea how to do it...can enybody help me out?
Here is a link to that site where I've seen these feature: www.salvagedata.com
Thank for your help.

vwphillips · 09-02-2007, 10:47 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.topicbg {
 position:relative;z-Index:101;width:100px;height:25px;background-Color:#FFFFFF;
}

.topic {
 position:relative;z-Index:1;width:100px;height:20px;background-Color:#FFFFCC;border:solid black 1px;
}

.tooltip {
  position:absolute;visibility:hidden;left:0px;top:22px;width:200px;height:200px;background-Color:#FFFFCC;border:solid black 1px;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcToolTip(zxcevt,zxcobj){
 var zxctt=zxcobj.getElementsByTagName('DIV')[0];
 if (zxcevt.type=='mouseover') zxctt.style.visibility='visible';
 else if (zxcCkEventObj(zxcevt,zxcobj))  zxctt.style.visibility='hidden';

}

function zxcCkEventObj(zxce,zxcobj){
 if (!zxce) var zxce=window.event;
 zxce.cancelBubble=true;
 if (zxce.stopPropagation) zxce.stopPropagation();
 var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElement;
 while (zxceobj.parentNode){
  if (zxceobj.className&&zxceobj.className.match('zxc')){ return false; }
  zxceobj=zxceobj.parentNode;
 }
 return true;
}

/*]]>*/
</script></head>

<body>
<div class="topicbg zxctt" >
<div class="topic zxctt"
onmouseover="zxcToolTip(event,this);"
onmouseout="zxcToolTip(event,this);"
>
 <div  class="tooltip"  >
  <a href="http://www.vicsjavascripts.org.uk" >Link</a>
 </div>
Country
</div>
</div>

</body>

</html>

or google Tool Tip