Mouse over and viewing information

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Mouse over and viewing information

Post 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.
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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>
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Post 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?
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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.
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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.
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Post 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
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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.
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Post 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>
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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.
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Post by szms »

A piece of code might help me better to understand. Thank you.
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

If you need a reference, this site does it very simply and very well. View source. Go nuts.

http://www.michaelraichelson.com/
MRaichelson
Forum Newbie
Posts: 1
Joined: Mon Feb 09, 2004 10:06 am
Location: Annapolis, MD US

Post 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: */
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

Shhhhh. Secrets!
Post Reply