SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Location
    Quezon City, Philippines
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change cell color on mouseover

    Hello. I have link inside a table cell which has a bgcolor of yellow. How can I change the bgcolor to orange when mouseover?

  2. #2
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    
    <html>
    
    <head>
    
    	<title>Mouse Over</title>
    
    	<script language="JavaScript">
    
    		function cell_over ( table_cell ) {
    			table_cell.style.background = '#FFAA00';
    		}
    
    		function cell_out ( table_cell ) {
    			table_cell.style.background = '#FFFF00';
    		}
    
    	</script>
    
    </head>
    
    <body>
    
    	<table border="1" cellpadding="5" cellspacing="5">
    	<tr>
    
    		<td 
    			style="background: #FFFF00; cursor: pointer;"
    			onmouseover="cell_over ( this );"
    			onmouseout="cell_out ( this );"
    			onmousedown="window.location.href='http://www.msn.com/';"
    			>
    				MSN
    		</td>
    
    		<td 
    			style="background: #FFFF00; cursor: pointer;"
    			onmouseover="cell_over ( this );"
    			onmouseout="cell_out ( this );"
    			onmousedown="window.location.href='http://www.yahoo.com/';"
    			>
    				Yahoo
    		</td>
    
    	<tr>
    	</tr>
    
    		<td 
    			style="background: #FFFF00; cursor: pointer;"
    			onmouseover="cell_over ( this );"
    			onmouseout="cell_out ( this );"
    			onmousedown="window.location.href='http://www.cnn.com/';"
    			>
    				CNN
    		</td>
    
    		<td 
    			style="background: #FFFF00; cursor: pointer;"
    			onmouseover="cell_over ( this );"
    			onmouseout="cell_out ( this );"
    			onmousedown="window.location.href='http://www.amazon.com/';"
    			>
    				Amazon
    		</td>
    
    	</tr>
    	</table>
    
    </body>
    
    </html>
    Try this. There’s a few “extras” too.
    Of course, that's just my opinion. I could be wrong.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Location
    Quezon City, Philippines
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Marvelous! Thanks Mr. Brownstone!

  4. #4
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb gecko stuff

    it could be so nice if this worked also in IE:

    Code:
    <td class="yellow">mouseoverMe please</td>
    
    and for the CSS:   
    
    td.yellow {
    background-color: Yellow;}
    
    td.yellow:hover {
    background-color: Orange;}
    ...
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  5. #5
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by ibm586
    Marvelous! Thanks Mr. Brownstone!
    No problem.

    wisbin > Oops... I forgot about the CSS solution. IE can be worked around, though:
    Code:
    <html>
    
    <head>
    
    	<title>CSS Roll-Overs</title>
    
    	<style>
    
    		body, p, td {
    			font-family: Tahoma;
    			font-size: 11px;
    		}
    
    		.Vertical_Navigation {
    			width: 140px;
    		}
    
    		.Vertical_Navigation a {
    			display: block;
    			width: 100%;
    
    			/* Top, right, bottom, left */
    			padding: 5px 10px 5px 10px;
    
    			background: #EEEEFF;
    			color: #000000;
    		}
    
    		.Vertical_Navigation a:hover {
    			/* Top, right, bottom, left */
    			padding: 3px 5px 3px 5px;
    
    			border-top: 2px solid #7777FF;
    			border-bottom: 2px solid #7777FF;
    			border-left: 5px solid #7777FF;
    			border-right: 5px solid #7777FF;
    
    			background: #AAAAFF;
    			color: #FFFFFF;
    
    			font-weight: bold;
    		}
    
    	</style>
    
    </head>
    
    <body>
    
    	<div class="Vertical_Navigation">
    
    		<a href="http://www.msn.com/" target="_blank">Microsoft Network</a>
    		<a href="http://www.yahoo.com/" target="_blank">Yahoo!</a>
    		<a href="http://www.amazon.com/" target="_blank">Amazon</a>
    		<a href="http://www.cnn.com/" target="_blank">CNN Worldwide</a>
    
    	</div>
    
    </body>
    
    </html>
    Of course, that's just my opinion. I could be wrong.


Bookmarks

Posting Permissions

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