Page 1 of 1

Mouse over and viewing information

Posted: Thu Jan 29, 2004 7:14 am
by szms
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.

Posted: Thu Jan 29, 2004 7:17 am
by patrikG
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>

Posted: Thu Jan 29, 2004 7:19 am
by szms
Thank you for your information. I don't want to use title. I want to view the description as a regular format but when the mouse will point the topic. Any idea?

Posted: Thu Jan 29, 2004 7:21 am
by patrikG
I am not quite sure what you mean. What do you understand under "regular format"? HTML?

title works for any HTML tag AFAIK.

Posted: Thu Jan 29, 2004 7:32 am
by patrikG
szms 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.
from viewtopic.php?p=84825#84825

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.

Posted: Thu Jan 29, 2004 7:41 am
by szms
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.
Can you give me an example so that it will be more meaningful to me

Posted: Thu Jan 29, 2004 7:46 am
by patrikG
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.

Posted: Mon Feb 02, 2004 9:42 am
by szms
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) &#123;  //reloads the window if Nav4 resized
  if (init==true) with (navigator) &#123;if ((appName=="Netscape")&&(parseInt(appVersion)==4)) &#123;
	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; &#125;&#125;
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
&#125;
MM_reloadPage(true);
function MM_findObj(n, d) &#123; //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) &#123;
	d=parent.frames&#1111;n.substring(p+1)].document; n=n.substring(0,p);&#125;
  if(!(x=d&#1111;n])&&d.all) x=d.all&#1111;n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms&#1111;i]&#1111;n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers&#1111;i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
&#125;
function MM_showHideLayers() &#123; //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&#1111;i]))!=null) &#123; v=args&#1111;i+2];
	if (obj.style) &#123; obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; &#125;
	obj.visibility=v; &#125;
&#125;
//-->
</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>

Posted: Mon Feb 02, 2004 4:17 pm
by Unipus
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.

Posted: Tue Feb 03, 2004 9:12 am
by szms
A piece of code might help me better to understand. Thank you.

Posted: Tue Feb 03, 2004 10:29 am
by patrikG
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.

Posted: Tue Feb 03, 2004 12:48 pm
by Unipus
If you need a reference, this site does it very simply and very well. View source. Go nuts.

http://www.michaelraichelson.com/

Posted: Mon Feb 09, 2004 10:06 am
by MRaichelson
Unipus wrote:If you need a reference, this site does it very simply and very well. View source. Go nuts.

http://www.michaelraichelson.com/
glad you like it. :)




/* edit: he he, should have guessed it was a YHer in disguise :wink: */

Posted: Mon Feb 09, 2004 2:40 pm
by Unipus
Shhhhh. Secrets!