|
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
|||
|
|||
|
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?
|
|
#2
|
|||
|
|||
|
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. |
|
#3
|
|||
|
|||
|
RE: Mouse Action
Another way to display simple discription.
Code:
<a href='http://google.com' title='Cool Search Engine'>Google</a> |
|
#4
|
|||
|
|||
|
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 |
|
#5
|
|||
|
|||
|
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... |
|
#6
|
|||
|
|||
|
RE: Mouse Action
zombie,
I've already suggested that in a previous post! |
|
#7
|
|||
|
|||
|
RE: Mouse Action
i know.. i was referring to the other two users..
especially to the one that posted after your solution... |
|
#8
|
|||
|
|||
|
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) |
|
#9
|
|||
|
|||
|
RE: RE: Mouse Action
Quote:
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... |
|
#10
|
|||
|
|||
|
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.
|
|
#11
|
|||
|
|||
|
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.... |
|
#12
|
|||
|
|||
|
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>
|
![]() |
| Viewing: Codewalkers Forums > Other Technologies > Client Side Things > Mouse Action |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|