www.webdeveloper.com
Results 1 to 3 of 3

Thread: HTML Buttons

  1. #1
    Join Date
    Jan 2005
    Posts
    216

    HTML Buttons

    This may fall under JavaScript and not under HTML, but I'll try this one first.

    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?

    Code:
         <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 "hbutton" class just sets up the blue background and the border style that I want and spacing and things...

    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!

    dz_boy

  2. #2
    Join Date
    Jan 2007
    Location
    .qc.ca
    Posts
    43
    Hi dz_boy,

    This will probably do the trick:

    Code:
    .hbutton {
    	background-color:#0000FF;
    	width:20%;
    }
    a.barlink:link,a.barlink:visited {
    	color:#FFFFFF;
    }
    HTML Code:
    <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>

  3. #3
    Join Date
    Jan 2005
    Posts
    216
    Thanks! It did work. I was not aware of that cursor-style: pointer thing, either. I really appreciate it!

    dz_boy

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles