asked on

Information Window on mouseover Link

Hi,

I want to make a window (NOT A POP UP) but an information window appear when onmouseover event occurs. The page will have many links and each link will have it's own inforamtion window which will have links inside them.

Could that be done with CSS or sinply in javascript

Here sample of what I want
------Code----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>

      <style type="text/css">

#dhtmlfloatie{
position: absolute;
left: 0;
left: -500px;
filter:alpha(opacity=0);
-moz-opacity:0;
border: 2px solid black;
padding: 5px;
z-index: 100;
}

</style>

<script type="text/javascript">

var floatiewidth="250px" //default width of floatie in px
var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.
var floatiebgcolor="lightblue" //default bgcolor of floatie
var fadespeed=50 //speed of fade (5 or above). Smaller=faster.

var baseopacity=5
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",fadespeed)
}

function instantset(degree){
cleartimer()
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function paramexists(what){
return(typeof what!="undefined" && what!="")
}
/*get the mouse coordinate*/
function mousemove(e) {
      if (ns4) {var mouseX=e.pageX; var mouseY=e.pageY}
      if (ie4) {var mouseX=event.x; var mouseY=event.y}
      status="x= "+mouseX+", y= "+mouseY;
}

function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;

var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.left="-200px"
floatobj.style.display="block"
floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
floatobj.innerHTML=thetext
var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
e=window.event? window.event : e
floatobj.style.left=dsocx+winWidth-floatWidth-25+"px"
if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
floatobj.style.top=dsocy+5+"px"
else
floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
slowhigh(floatobj)
}

</script>
</head>

<body>
<div id="dhtmlfloatie" ></div>

<a href="#" onMouseover="showfloatie('<strong>Text 1A</strong><br />Text 1B', event)" >Text 1</a><br />
<a href="#" onMouseover="showfloatie('<strong>Text 2A</strong><br />Text 2B', event)" >Text 2</a><br/>

</body>
</html>

-----end code----

Thank You
C-B

tonsofpcs

does the title attribute of the a element do what you want? (example: <a href="#" title="Text 1A">Text1</a> )

C-begin

ASKER

For now yes, but once the info widow appear near it's link That could be easily changed

mr_egyptian

I'm not understanding exactly what your after. What do you need that is different from the behavior of the code that you posted?

Do you want some sort of tooltip?

http://www.walterzorn.com/tooltip/tooltip_e.htm

C-begin

ASKER

Yes some sort of Tool tip like in here (http://www.walterzorn.com/tooltip/tooltip_e.htm) like the Commands Link. But I want that on Multiple Link

C-B

ASKER CERTIFIED SOLUTION

mr_egyptian

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer