Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Codewalkers ForumsOther TechnologiesClient Side Things

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Codewalkers Forums Sponsor:
  #1  
Old January 14th, 2004, 12:34 PM
szms szms is offline
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Apr 2007
Posts: 107 szms User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
Mouse Action

I have couple of web links in my website and like to show more information about the web link when the mouse is over the web link. How to do that?

Reply With Quote
  #2  
Old January 14th, 2004, 12:51 PM
nawlej nawlej is offline
Contributing User
Codewalkers Regular (2000 - 2499 posts)
 
Join Date: Apr 2007
Location: Dallas, Tx. USA
Posts: 2,008 nawlej User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 h 7 m 51 sec
Reputation Power: 4
RE: Mouse Action

Where exactly would you like to show it? Depending on where you would like to show it at, is where the code comes in to play. if you wanted to make it appear in the status bar at the bottom of the browser, for example, you could do this in your <a href> tag:
OnMouseOver="window.status('Info about my link here'); return true;"

Pretty much anything you would like to show can be accomplished using the onmouseover addition to the tag.

Reply With Quote
  #3  
Old January 14th, 2004, 01:14 PM
CodeKadiya CodeKadiya is offline
Codewalkers Regular (2000 - 2499 posts)
 
Join Date: Apr 2007
Location: Colombo,Sri Lanka
Posts: 2,313 CodeKadiya User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 4
Send a message via Yahoo to CodeKadiya
RE: Mouse Action

Another way to display simple discription.
Code:
<a href='http://google.com' title='Cool Search Engine'>Google</a>

Reply With Quote
  #4  
Old January 15th, 2004, 07:59 PM
garethr garethr is offline
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Apr 2007
Location: UK
Posts: 2 garethr User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
RE: Mouse Action

you could do something where by you make a layer appear (change onmouseover display: block from display:none of the layer) when you mouseover the link.

This could either be in one place or maybe you could position the layer according to the mouse position or simply absolute position each layer so its near to the link in question. Would take a bit of doing if your talking about lots of links though.

For toggling layer visibility try the following:

function toggle(target_id) {
if (document.getElementById) {
target = document.getElementById(targetId);
if (target.style.display == "none") {
target.style.display = "";
} else {
target.style.display = "none";
}
}
}

then onmouseover = "toggle('id_of_layer') and onmouseout = "toggle('id)of_layer') on the link

Reply With Quote
  #5  
Old January 16th, 2004, 01:25 PM
zombie zombie is offline
Codewalkers Intermediate (1500 - 1999 posts)
 
Join Date: Apr 2007
Location: serbia
Posts: 1,876 zombie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 3
RE: Mouse Action

why complicate a simple action like <a href=".." title="more info">blah</a>

it is simple, it is easy, it is less code, it is recommended way of doing things, it is standard way of doing things..

it is a right thing to do...

Reply With Quote
  #6  
Old January 16th, 2004, 02:30 PM
CodeKadiya CodeKadiya is offline
Codewalkers Regular (2000 - 2499 posts)
 
Join Date: Apr 2007
Location: Colombo,Sri Lanka
Posts: 2,313 CodeKadiya User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 4
Send a message via Yahoo to CodeKadiya
RE: Mouse Action

zombie,
I've already suggested that in a previous post!

Reply With Quote
  #7  
Old January 16th, 2004, 03:43 PM
zombie zombie is offline
Codewalkers Intermediate (1500 - 1999 posts)
 
Join Date: Apr 2007
Location: serbia
Posts: 1,876 zombie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 3
RE: Mouse Action

i know.. i was referring to the other two users..

especially to the one that posted after your solution...

Reply With Quote
  #8  
Old January 17th, 2004, 05:00 PM
garethr garethr is offline
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Apr 2007
Location: UK
Posts: 2 garethr User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
RE: Mouse Action

" it is standard way of doing things.."

Not really, its an IE hack. Mouse over display of info is not what its intended for.

Plus you have no control over the look and feel of the text that gets displayed or where it gets displayed (or in some cases even IF it gets displayed)

Reply With Quote
  #9  
Old January 17th, 2004, 09:58 PM
zombie zombie is offline
Codewalkers Intermediate (1500 - 1999 posts)
 
Join Date: Apr 2007
Location: serbia
Posts: 1,876 zombie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 3
RE: RE: Mouse Action

Quote:
Not really, its an IE hack.


did you try it in any other browser? i did, and i know what i am saying. do you?

anyway, it IS the standard way, title attribute is ment to provide more information about the link (or any other element for that matter). that is EXACTLY what the user wanted to do. re-read the first message.

the exact way of displaying that information to the user is not defined in the standard, but a tool tip is one of the recommended ways..

http://www.w3.org/TR/html4/struct/global.html#adef-title
http://www.w3.org/TR/html4/struct/links.html#idx-link-3

i try never to claim something if i am not sure, especially when i claim it this strongly.

i suggest you stick to some similar principle yourself...

Reply With Quote
  #10  
Old January 19th, 2004, 01:25 AM
nawlej nawlej is offline
Contributing User
Codewalkers Regular (2000 - 2499 posts)
 
Join Date: Apr 2007
Location: Dallas, Tx. USA
Posts: 2,008 nawlej User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 h 7 m 51 sec
Reputation Power: 4
RE: Mouse Action

Whew! Is it getting hot in here? :-) Anyway, yes, the title option is simple, I agree with Codekadiya and zombie on that approach. The only reason I use the onmouseover function in my tags with the window.status option is because it displays it in the status bar at the bottom of the browser. I think both ways are good to get your point across, and admit, title is the simplest way to do it. It is just personal preference on my part. It seems to me that while what Garethr is trying to accomplish would work, it is somewhat tedious and troublesome to the average person to set things up with that with mouseover positions, etc. I just dont thing I would want to go through all of that just to have a new layer emerge showing a description of my link.

Reply With Quote
  #11  
Old January 30th, 2004, 03:01 AM
bearqst bearqst is offline
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Apr 2007
Location: Alaska
Posts: 153 bearqst User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 20 m 47 sec
Reputation Power: 2
RE: Mouse Action

Hum Diddlie,

I've always used a mouseover, but just ran into trouble on the script and ended up using title="">

I grant you it's not as "pretty" nor as configurable, but it is much simpler. As a strong beliver in the KISS methodology of approach, title= wins....

Reply With Quote
  #12  
Old January 30th, 2004, 12:51 PM
szms szms is offline
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Apr 2007
Posts: 107 szms User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: Mouse Action

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.

Code:
<?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> 

Reply With Quote
Reply

Viewing: Codewalkers ForumsOther TechnologiesClient Side Things > Mouse Action


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway
Stay green...Green IT