Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onmouseovers with background images 1

Status
Not open for further replies.
danima

danima

Programmer
Jan 9, 2002
134
CA
I'm looking for code to make background images in a <TD> change with a mouseover. Currently I use the following code for a mouseover effect for graphics:

<a href=&quot;&quot;
onmouseover=&quot;move_it('menu4','images/right_menu4b.gif')&quot;
onmouseout=&quot;move_it('menu4','images/right_menu4.gif')&quot;>

But this time I want to use simple text (because we'll probably change these often) and only have the background change....leaving the text in the <TD>

Any help would be much appreciated!
 
Sort by date Sort by votes
Try the code below;

<HTML>
<HEAD>
<Script language=&quot;JavaScript1.3&quot;>
function ChangeBackGroundImage(pTDid,pImageName){
var objTD=document.getElementById(pTDid);

var sPath=&quot;images/&quot;+pImageName;
objTD.style.backgroundImage = &quot;url(&quot;+sPath+&quot;)&quot;;
}
</Script>
</HEAD>
<BODY>
<TABLE >
<TR ><TD id=Row1Col1 onmouseover='ChangeBackGroundImage(&quot;Row1Col1&quot;,&quot;YourImageName&quot;)'

onmouseout='ChangeBackGroundImage(&quot;Row1Col1&quot;,&quot;YourImageName&quot;)'>Some Text Inside</TD></TR>
</TABLE>
</BODY>
</HTML> &quot;did you just say Minkey?, yes that's what I said.&quot;

MrGreed
 
Upvote 0 Downvote
Works perfect. Thanks. One thing....the mouseover and mouseout work...but the <TD> is blank until I mouseover it. When I mouseout the image is there...but if I refresh the page it's just white? How would I get the image to appear from the onset?

I tried background=&quot;/image/myimage.gif&quot; in the TD...but that didn't do it?

Thanks again for the help!!!
 
Upvote 0 Downvote
<TR ><TD id=Row1Col1 style=&quot;background-image:'url(images/YourStartImage.jpg)'&quot;

onmouseover='ChangeBackGroundImage(&quot;Row1Col1&quot;,&quot;button1.jpg&quot;)'

onmouseout='ChangeBackGroundImage(&quot;Row1Col1&quot;,&quot;button2.jpg&quot;)'>Some Text Inside</TD></TR> &quot;did you just say Minkey?, yes that's what I said.&quot;

MrGreed
 
Upvote 0 Downvote
Yes sir!!!! Worked like a charm. Thanks a million!!!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

katrinnew
  • Locked
  • Question
Godaddy Background template picture 1
Replies
2
Views
100
katrinnew
katrinnew
katrinnew
  • Locked
  • Question
When I add images to GoDaddy , some of them just get cutt of . 2
Replies
4
Views
300
katrinnew
katrinnew
dkwel
  • Locked
  • Question
Working with Retina on a standard resolution
Replies
8
Views
155
audiopro
audiopro
terrydoughty
  • Locked
  • Question
portrait images displayed as landscape
Replies
7
Views
123
darryncooke
darryncooke
2thetiger7
  • Locked
  • Question
Java Script image slider will not load images within Firefox
Replies
2
Views
81
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top