Mouse over and viewing information

ASP Free Forums Sponsor:

January 29th, 2004, 07:13 AM

szms

Contributing User

Join Date: Sep 2003

Posts: 44

Time spent in forums: < 1 sec
Reputation Power: 5

Mouse over and viewing information

I have a table of two columns. In the first coulmn I have some topic such as about me, contact info etc. I want to show the description of those topics in the 2nd column when I place the mouse pointer on a specific topic. How to do that?

It is not necessary to use table I guess, but I just want to show the description in the different place of the same web page.

January 29th, 2004, 01:35 PM

haffej

Contributing User

Join Date: Jan 2004

Posts: 87

Time spent in forums: < 1 sec
Reputation Power: 5

as far as i know, you can't dynamically change regular text in a web page, unless you use dhtml or something (dynamic html).

January 30th, 2004, 07:50 AM

szms

Contributing User

Join Date: Sep 2003

Posts: 44

Time spent in forums: < 1 sec
Reputation Power: 5

I tried the following code and it works perfectly. I want to show a default info: please move the mouse on the highlited text. And whenever the mouse in on the high lighted text the description of the respective topic will be shown instead of the default info. How to do that according to my code.

Quote:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
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; }
}
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 52px; top: 12px; background-color: #6699CC; layer-background-color: #6699CC; border: 1px none #000000;" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">
<p>This is something</p>
<p>(move mouse over this box to show the other box)</p>
</div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2; left: 52px; top: 136px; visibility: hidden; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;">
<p>this is something else</p>
<p>(this appears if you hover your mouse over the top box, and disappears when
moving the mouse away)</p>
</div>
<div id="Layer3" style="position:absolute; width:200px; height:115px; z-index:3; left: 276px; top: 12px; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000;" onmouseover="MM_showHideLayers('Layer4','','show')" onmouseout="MM_showHideLayers('Layer4','','hide')">
<p>this is another something</p>
<p>(move mouse over and another box appears, not bugging the first one)</p>
</div>
<div id="Layer4" style="position:absolute; width:200px; height:115px; z-index:4; left: 277px; top: 139px; background-color: #00FFFF; layer-background-color: #00FFFF; border: 1px none #000000; visibility: hidden;">this
is the box that appears if you move the mouse over the above box. move mouse
away and this one disappears again.</div>
</body>
</html>

January 30th, 2004, 07:53 AM

szms

Contributing User

Join Date: Sep 2003

Posts: 44

Time spent in forums: < 1 sec
Reputation Power: 5

Quote:

January 30th, 2004, 09:56 AM

haffej

Contributing User

Join Date: Jan 2004

Posts: 87

Time spent in forums: < 1 sec
Reputation Power: 5

well, it looks like you just have to add your own info, and repeat the layer process with your own additional data. you can fill in layers 1-4 on your own. remember, layer 1 is default, 2 is what you'll see when the mouse is over layer 1. layer 3 default, see 4 when over 3, etc.

with your code then, i'd think you could put the layers in your table... you could do it all absolutely, but i'm not sure you'd need to... the only thing you need to concern yourself with is how you do the layers. leave the functions alone. i picture your table as (still, mouseover layer 1 shows layer 2, etc.):

Code:

layer 1          layer 2
layer 3          layer 4
layer 5          layer 6

etc.

you could adapt the code, too, so that if you have a list of items, for each one you rollover, the description of it always will appear in the same area on the screen. then you'd just have to have the same width/height/left/top for each layer that you want to show up on mouseover. as such:

Code:

layer 1          layers 2, 4, 6...
layer 3
layer 5

etc.

hopefully this gives you an idea of how to go about it. i can't say for sure how it should be done, i think you're just going to have to play around and see what you can come up with. good luck!

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: