Wrox Home  
Search P2P Archive for: Go
Shopping CartView Cart  |  My Account  |  Support
Home Browse Titles

P2P Archives
 

Archive Index
Back to Active P2P Forum

 


Wrox Chapters on Demand - Download the chapters you need and take them on the go!
Wrox First - Instant Access online to new Wrox books

New Titles for ASP.NET

Cover image for product 0470391847
Jumping from ASP to ASP.NET
Cover image for product 0470286652
ASP.NET AJAX Control Development with Visual Studio 2008 and .NET 3.5 Framework
Attention User Groups: Post your next LUG event here
  Return to Index  

javascript_howto thread: change table cells bgcolor to images on mouseover

Message #1 by "rajah dagstani" <dagstani@h...> on Wed, 23 Jan 2002 22:24:06
(I'm speaking in general - apply syntax appropriately)
you can use standard html attribute bgColor for color as the background and background attribute for image as the background...  To
access these in javascript, you would do this (remember it's case-sensitive):
tdID.bgColor or tdID.background to access the html attributes and then you can modify them....
tdID.bgColor = 'red';
tdID.background = 'images/help.gif';

OR you can use css style attributes background-color for background of color and background-image for background as image.... To
access these in javascript you would do this:
tdID.style.backgroundColor = 'red';
tdID.style.backgroundImage = 'url(images/help.gif)';

hth,
Arthur Gaisin

---- Message from "rajah dagstani" <dagstani@h...> at Wed, 23 Jan 2002 22:24:06  ------
<html><div style='background-color:'><DIV>
<P>i am trying to edit this script to change the individual table cells from solid bgcolors with hidden links to images on
mouseover, can't figure it out.  the script changes the background underneath the table leaving the table cells unchanged.  please
help.....   thanks</P>
<P> </P><FONT color=#000000 size=1>
<P><html><BR><head><BR><BR><BR><title>Untitled</title><BR></head>&
lt;BR><body bgcolor=</FONT><FONT color=#0000f0 size=1>"white"</FONT><FONT color=#000000
size=1>><BR><BR><BR><BR></FONT><FONT color=#808000 size=1><table</FONT><FONT
color=#000000 size=1> </FONT><FONT color=#808000 size=1>width</FONT><FONT color=#000000
size=1>=</FONT><FONT color=#0000f0 size=1>"100%"</FONT><FONT color=#000000 size=1> </FONT><FONT
color=#808000 size=1>height</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"100%"</FONT><FONT color=#808000 size=1>></FONT><FONT color=#000000
size=1><BR></FONT><FONT color=#800000 size=1><script language="JavaScript"></FONT><FONT
color=#000000 size=1><BR><!--<BR><BR>// Copyright 2001 by www.CodeBelly.com<BR>// Please do *not*
remove this notice.<BR><BR></FONT><FONT color=#ff0000 size=1>var</FONT><FONT color=#000000
size=1> backImage </FONT><FONT color=#808000 size=1>=</FONT><FONT color=#000000 size=1>
</FONT><FONT color=#ff0000 size=1>new</FONT><FONT color=#000000 size=1> Array</FONT><FONT
color=#808000 size=1>()</FONT><FONT color=#000000 size=1>; // don't change this<BR><BR>// Enter the image
filenames you wish to use.<BR>// Follow the pattern to use more images. The<BR>// number in the brackets [] is the
number you<BR>// will use in the function call to pick each<BR>// image.<BR><BR>// Note how backImage[3] =
"" -- which would<BR>// set the page to *no* background image.<BR><BR>backImage</FONT><FONT color=#808000
size=1>[</FONT><FONT color=#ff00f0 size=1>0</FONT><FONT color=#808000 size=1>]</FONT><FONT
color=#000000 size=1> </FONT><FONT color=#808000 size=1>=</FONT><FONT color=#000000 size=1>
</FONT><FONT color=#0000f0 size=1>"http://raj.blueflash.net/images/almostagi2.jpg"</FONT><FONT color=#000000
size=1>;<BR>backImage</FONT><FONT color=#808000 size=1>[</FONT><FONT color=#ff00f0
size=1>1</FONT><FONT color=#808000 size=1>]</FONT><FONT color=#000000 size=1> </FONT><FONT
color=#808000 size=1>=</FONT><FONT color=#000000 size=1> </FONT><FONT color=#0000f0
size=1>"http://raj.blueflash.net/images/cleo.jpg"</FONT><FONT color=#000000
size=1>;<BR>backImage</FONT><FONT color=#808000 size=1>[</FONT><FONT color=#ff00f0
size=1>2</FONT><FONT color=#808000 size=1>]</FONT><FONT color=#000000 size=1> </FONT><FONT
color=#808000 size=1>=</FONT><FONT color=#000000 size=1> </FONT><FONT color=#0000f0
size=1>"http://raj.blueflash.net/images/electra.jpg"</FONT><FONT color=#000000
size=1>;<BR>backImage</FONT><FONT color=#808000 size=1>[</FONT><FONT color=#ff00f0
size=1>3</FONT><FONT color=#808000 size=1>]</FONT><FONT color=#000000 size=1> </FONT><FONT
color=#808000 size=1>=</FONT><FONT color=#000000 size=1> </FONT><FONT color=#0000f0
size=1>""</FONT><FONT color=#000000 size=1>;<BR><BR>// Do not edit below this
line.<BR>//-----------------------------<BR><BR></FONT><FONT color=#ff0000
size=1>function</FONT><FONT color=#000000 size=1> changeBGImage</FONT><FONT color=#808000
size=1>(</FONT><FONT color=#000000 size=1>whichImage</FONT><FONT color=#808000
size=1>)<B>{</B></FONT><FONT color=#000000 size=1><BR></FONT><FONT color=#ff0000
size=1>if</FONT><FONT color=#000000 size=1> </FONT><FONT color=#808000 size=1>(</FONT><FONT
color=#000000 size=1>document</FONT><FONT color=#808000 size=1>.</FONT><FONT color=#000000
size=1>body</FONT><FONT color=#808000 size=1>)<B>{</B></FONT><FONT color=#000000
size=1><BR>document</FONT><FONT color=#808000 size=1>.</FONT><FONT color=#000000
size=1>body</FONT><FONT color=#808000 size=1>.</FONT><FONT color=#000000 size=1>background
</FONT><FONT color=#808000 size=1>=</FONT><FONT color=#000000 size=1> backImage</FONT><FONT
color=#808000 size=1>[</FONT><FONT color=#000000 size=1>whichImage</FONT><FONT color=#808000
size=1>]</FONT><FONT color=#000000 size=1>;<BR></FONT><B><FONT color=#808000
size=1>}</B></FONT><FONT color=#000000 size=1><BR></FONT><B><FONT color=#808000
size=1>}</B></FONT><FONT color=#000000
size=1><BR><BR>//--><BR></script><BR><BR></FONT><FONT color=#808000
size=1><tr></FONT><FONT color=#000000 size=1><BR></FONT><FONT color=#808000
size=1><td</FONT><FONT color=#000000 size=1> </FONT><FONT color=#808000
size=1>bgcolor</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"orange"</FONT><FONT color=#000000 size=1> </FONT><FONT color=#808000
size=1>align</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"center"</FONT><FONT color=#808000 size=1>></FONT><FONT color=#000000 size=1>
</FONT><FONT color=#ff0000 size=1><a</FONT><FONT color=#000000 size=1> </FONT><FONT
color=#ff0000 size=1>href</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"sculpture.htm"</FONT><FONT color=#ff0000 size=1>onMouseOver</FONT><FONT color=#000000
size=1>=</FONT><FONT color=#0000f0 size=1>"javascript:changeBGImage(0)"</FONT><FONT color=#ff0000
size=1>onMouseOut</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"javascript:changeBGImage(3)"</FONT><FONT color=#000000 size=1> </FONT><FONT color=#ff0000
size=1>></FONT><FONT color=#000000 size=1><font color=</FONT><FONT color=#0000f0
size=1>"orange"</FONT><FONT color=#000000 size=1>>sculpture</FONT><FONT color=#ff0000
size=1></a></FONT><FONT color=#808000 size=1></td></FONT><FONT color=#000000 size=1>
<BR></FONT><FONT color=#808000 size=1><td</FONT><FONT color=#000000 size=1> </FONT><FONT
color=#808000 size=1>bgcolor</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"skyblue"</FONT><FONT color=#000000 size=1> </FONT><FONT color=#808000
size=1>align</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"center"</FONT><FONT color=#808000 size=1>></FONT><FONT color=#ff0000
size=1><a</FONT><FONT color=#000000 size=1> </FONT><FONT color=#ff0000
size=1>href</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"masks.htm"</FONT><FONT color=#ff0000 size=1>onMouseOver</FONT><FONT color=#000000
size=1>=</FONT><FONT color=#0000f0 size=1>"javascript:changeBGImage(1)"</FONT><FONT color=#ff0000
size=1>onmouseout</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"javascript:changeBGImage(3)"</FONT><FONT color=#ff0000 size=1>></FONT><FONT color=#000000
size=1><font color=</FONT><FONT color=#0000f0 size=1>"skyblue"</FONT><FONT color=#000000
size=1>>masks</FONT><FONT color=#ff0000 size=1></a></FONT><FONT color=#808000
size=1></td></FONT><FONT color=#000000 size=1><BR></FONT><FONT color=#808000
size=1></tr></FONT><FONT color=#000000 size=1><BR></FONT><FONT color=#808000
size=1><tr></FONT><FONT color=#000000 size=1><BR></FONT><FONT color=#808000
size=1><td</FONT><FONT color=#000000 size=1> </FONT><FONT color=#808000
size=1>bgcolor</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"yellow"</FONT><FONT color=#000000 size=1> </FONT><FONT color=#808000
size=1>align</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"center"</FONT><FONT color=#808000 size=1>></FONT><FONT color=#ff0000
size=1><a</FONT><FONT color=#000000 size=1> </FONT><FONT color=#ff0000
size=1>href</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"web.htm"</FONT><FONT color=#ff0000 size=1>onMouseOver</FONT><FONT color=#000000
size=1>=</FONT><FONT color=#0000f0 size=1>"javascript:changeBGImage(2)"</FONT><FONT color=#ff0000
size=1>onmouseout</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"javascript:changeBGImage(3)"</FONT><FONT color=#ff0000 size=1>></FONT><FONT color=#000000
size=1><font color=</FONT><FONT color=#0000f0 size=1>"yellow"</FONT><FONT color=#000000
size=1>>web</FONT><FONT color=#ff0000 size=1></a></FONT><FONT color=#808000
size=1></td></FONT><FONT color=#000000 size=1><BR></FONT><FONT color=#808000
size=1><td</FONT><FONT color=#000000 size=1> </FONT><FONT color=#808000
size=1>bgcolor</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"purple"</FONT><FONT color=#000000 size=1> </FONT><FONT color=#808000
size=1>align</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"center"</FONT><FONT color=#808000 size=1>></FONT><FONT color=#ff0000
size=1><a</FONT><FONT color=#000000 size=1> </FONT><FONT color=#ff0000
size=1>href</FONT><FONT color=#000000 size=1>=</FONT><FONT color=#0000f0
size=1>"drawings.htm"</FONT><FONT color=#ff0000 size=1>onMouseOver</FONT><FONT color=#000000
size=1>=</FONT><FONT color=#0000f0 size=1>"javascript:changeBGImage(3)"</FONT><FONT color=#ff0000
size=1>></FONT><FONT color=#000000 size=1><font color=</FONT><FONT color=#0000f0
size=1>"purple"</FONT><FONT color=#000000 size=1>>drawings</FONT><FONT color=#ff0000
size=1></a></FONT><FONT color=#808000 size=1></td></FONT><FONT color=#000000
size=1><BR></FONT><FONT color=#808000 size=1></tr></FONT><FONT color=#000000
size=1><BR></FONT><FONT color=#808000 size=1></table></FONT><FONT color=#000000
size=1><BR><BR><BR></body><BR></html><BR></P>
<P></FONT><BR><BR> </P></DIV></div><br clear=all><hr>Get your FREE download of
MSN Explorer at <a href='http://go.msn.com/bql/hmtag_etl_EN.asp'>http://explorer.msn.com</a>.<br>
---<BR>
Change your mail options at http://p2p.wrox.com/manager.asp or <BR>
</html>

  Return to Index  
About Wrox  |  Contact Us  |  Subscribe to an RSS Feed of New Wrox Titles
Copyright © 2000-2004 by John Wiley & Sons, Inc. or related companies. All rights reserved. Please read our Privacy Policy