Table Cell as onmouseup Anchor/ TabIndex

I am using JavaScript to change the class of a tablecell when you roll over and off a cell. Essentially creating a button, only not and image. The problem created is that you only go to a new page  when you click on the text (if it were surrounded by an anchor tag) meaning if you click and where there is no text you don't go anywhere, but you still have the pointer cursor as if you were over the link. This will only frustrate users. I am looking to make a function triggered by the onmouseup event. It will essentially be a fake anchor tag (as far as I know you can not surround a TD tag with an A tag). I want it to be able to work like a basic anchor tag (href, target, tabindex)

I am not sure if you can apply a tab index to a TD, so I am willing to apply an anchor tag to the text if I have to for that, but I would prefer avoiding being redundant if I can get the Table Cell to do all the work.
I imagine the function resembling the following in setup.

I have one concern with the target function. Will _blank, _top, _self, _parent work the same when addressing a window or a frame?

function loadPage(href,target,tabindex){}

Here is my current code:
**********************************************************
<style type="text/css">
     .sideMenuLinkCell{
          background-color: #FFFFFF;
          color: #000000;
          cursor: default; /*return cursor to normal state onmouseout*/
     }
     .sideMenuLinkCellHover{
          background-color: #0000FF;
          color: #FFFFFF;
          cursor: pointer;
     }
</style>
<script type="text/javascript">
<!--
     function setClass(obj,name){
          obj.className = name;
     }
//-->
</script>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK1" onmouseover="setClass(this,'sideMenuLinkCellHover')" onmouseout="setClass(this,'sideMenuLinkCell')">
               Menu Link 1
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK2" onmouseover="setClass(this,'sideMenuLinkCellHover')" onmouseout="setClass(this,'sideMenuLinkCell')">
               Menu Link 2
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK3" onmouseover="setClass(this,'sideMenuLinkCellHover')" onmouseout="setClass(this,'sideMenuLinkCell')">
               Menu Link 3
          </td>
     </tr>
</table>
cipiWebAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
geordie007Connect With a Mentor Commented:

do you know you can get the same result this way, and it will be far more accessible as a list of navigation links is essentially a list:

<style type="text/css">
       ul { margin: 0; padding: 0; list-style: none; }
       ul li { display: inline; }
       ul a:link,
       ul a:visited,
       ul a:active { color: #000; text-decoration: none; display: block; }
       ul a:hover { background-color: #00f; color: #fff; }
</style>

<ul>
      <li><a href="">Menu Link 1</a></li>
      <li><a href="">Menu Link 2</a></li>
      <li><a href="">Menu Link 3</a></li>
</ul>

and doing it this way, you can have the link take you wherever, as that is all it is - a link.

0
 
cipiWebAuthor Commented:
Thank you for your input, though I am unclear to a few things. Why are we setting  the following? :

ul li { display: inline; }
ul a:active {display: block; }
0
 
geordie007Commented:

Why are we setting  the following? :

ul li { display: inline; }
ul a:active {display: block; }

we make the li display inline to get over an irritating bug in internet explorer that adds unecessary space below each list item. so instead of:

Menu Link 1

Menu Link 2

we get:

Menu Link 1
Menu Link 2

it's a little bug fix that you should remember!

we make the link display block so that it fills out the whole dimensions of the list item. for example, if your list is set to 200px wide (because that's the width of your nav), and you didn't set the link to display as a block, the colour change would only happen when the user rolled over the text itself rather than rolling over aby of the link. using your example (table cells), the colour would only change when you rolled over the "Menu Link 1" text, instead of changing when the user rolled over any of that table cell/row. block makes it take up the whole area.

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
cipiWebAuthor Commented:
Definatley a good bug fix to remember!

Is there a particular reason display: block is being put in active? isn't that only rendered in the time between the click and the next page loading? People on faster machines wouldn't even see that.
0
 
geordie007Commented:


no, this is a force of habit for browser compatibility. if you want to use all psedo classes of a link (link, visited, active, hover), some browsers will ignore one or more of them unless they are listed in the following order - link, visited, hover active (LVHA, or "LoVe?HA!"). the only link pseudo class i ever change is the hover, so you can take the over out of that order, but keep the remaining order correct. so it's just force of habit that i will always write links as:

a:link, a:visited, a:active {
  color:blue;
}
a:hover {
  color:yellow;
}

whether visited or active are required or not. it's better to be safe that sorry, so it's another good thing to remember! if you want to know more about why the order matters, you can read this:

http://www.meyerweb.com/eric/css/link-specificity.html

cheers
0
 
cipiWebAuthor Commented:
I apologize, I should have worded my question more accuratley. I was wondering if the code would work the same if I decided to do the following:

ul a:link{display: block; },
ul a:visited{},
ul a:hover { background-color: #00f; color: #fff; }
ul a:active { color: #000; text-decoration: none;}

does it have to be in the active state for a particular reason?
0
 
geordie007Commented:

no, not at all, so long as the pseudo classes that you *do* use follow the order stated above. this would be fine:

ul a:link {display: block; },
ul a:hover { background-color: #00f; color: #fff; }

as would this:

ul a {display: block; },
ul a:hover { background-color: #00f; color: #fff; }


0
 
cipiWebAuthor Commented:
Thank you. so much. That will do for this subject.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.