I'm trying to make a set of "buttons" using a table with mouseover scripts that change the mouseover color and text color. The actual links are done using onclick. The problem is that I want the mouse to display the little hand that appears with normal <a href=""> links, and I cannot seem to combine the scripts, styles and syntax properly. Please help.
I need the background of the cell to be blue (#002ECC) until the user's mouse moves over it, upon which it should turn orange (#FF8000). Inside the cell is a link to a page, but I need the text to be white when the cell is blue, and black when the cell is orange (essentially on mouseover). Can this link text be made to change colors AND display the hand pointer?
The "hbutton" class just sets up the blue background and the border style that I want and spacing and things...
<td class="hbutton" width="20%" onclick="location.href='index.htm';" onmouseover="this.bgColor='#FF8000'; this.style.color='#000000'; return true;" onmouseout="this.bgColor='transparent'; this.style.color='#FFFFFF'; return true;"><a href="index.htm" class="barlink">Home</a></td>
The "barlink" class was my attempt to give the link no text-decoration, but then it wouldn't change colors because it was link.
Thanks for any help!
This will probably do the trick:
<td id="menucell" class="hbutton" onmouseover="this.style.backgroundColor='#FF8000'; this.style.cursor='pointer'; window.document.getElementById('menua').style.color='#000000';" onmouseout="this.style.backgroundColor='#0000FF'; this.style.cursor='auto'; window.document.getElementById('menua').style.color='#FFFFFF';" onclick="window.location.href='page.htm'"><a href="page.htm" id="menua" class="barlink">Home</a></td>
Thanks! It did work. I was not aware of that cursor-style: pointer thing, either. I really appreciate it!
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)