Mouse over and viewing information
Moderator: General Moderators
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.
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.
Use the title-tag. Examle:
Code: Select all
<a href="nada.html" title="This is a link to nada, dude">Beautiful Goats for Sale</a>from viewtopic.php?p=84825#84825szms wrote:Have you ever seen this kind of format when some information is visble when the mouse pointer points to a link without using title. If you have never seen seen then never mind.
If you want HTML to be displayed, you will need a layer/<div> which contains the information. In that you can use any kind of CSS or HTML formatting.
I believe there are some scripts like that on hotscripts.com, I remember I looked at some when I searched for them with Google some months ago.
If you don't want that kind of thing, then please be more specific.
Can you give me an example so that it will be more meaningful to meIf you want HTML to be displayed, you will need a layer/<div> which contains the information. In that you can use any kind of CSS or HTML formatting.
I believe there are some scripts like that on hotscripts.com, I remember I looked at some when I searched for them with Google some months ago.
Here's a link to a tutorial - I don't have a link to a script
http://www.the-cool-place.co.uk/javascr ... ript1.html
Describe what you want to achieve, please - and be specific.
Otherwise it would be a bit futile of me to try to guess what you want.
http://www.the-cool-place.co.uk/javascr ... ript1.html
Describe what you want to achieve, please - and be specific.
Otherwise it would be a bit futile of me to try to guess what you want.
The following code works perfect for me. I would like to know one more think regarding this issue. 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.
Code: Select all
<?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>A couple ways to do that. The best way is probably CSS content-switching: make a container DIV and put all of your alternate text inside it, each in a unique ID. Style them all to be hidden by default except for the "please move the mouse on the highlited text."
Then write two js functions: one to hide a DIV and one to show. Write a third function which tracks the currently active DIV, runs the 'hide' function on the old one and the 'show' function on the new one, and call that function onrollover. There you have it.
Then write two js functions: one to hide a DIV and one to show. Write a third function which tracks the currently active DIV, runs the 'hide' function on the old one and the 'show' function on the new one, and call that function onrollover. There you have it.
I would advise modifing your Dreamweaver-script above with Dreamweaver so that it does what you want it to do.
You have a link to a tutorial (above), you can google for scripts like that (search for 'tooltips'), two people outlined very clearly what you would need to do if you decided to do it yourself - so: do it.
You have a link to a tutorial (above), you can google for scripts like that (search for 'tooltips'), two people outlined very clearly what you would need to do if you decided to do it yourself - so: do it.
If you need a reference, this site does it very simply and very well. View source. Go nuts.
http://www.michaelraichelson.com/
http://www.michaelraichelson.com/
-
MRaichelson
- Forum Newbie
- Posts: 1
- Joined: Mon Feb 09, 2004 10:06 am
- Location: Annapolis, MD US
glad you like it.Unipus wrote:If you need a reference, this site does it very simply and very well. View source. Go nuts.
http://www.michaelraichelson.com/
/* edit: he he, should have guessed it was a YHer in disguise