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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to change background-image in table cell with CSS?

Status
Not open for further replies.
kippie

kippie

Technical User
Nov 8, 2001
158
I have a HTML (see below) with functions to swap images in one table cell (imageframe) and texts into another cell (textframe). I set a background-image (backimg.jpg) in the textframe. How can I change this backimg.jpg with CSS?
Kippie
<html>
<head>
<meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=iso-8859-1&quot;>
<meta name=&quot;generator&quot; content=&quot;Adobe GoLive 4&quot;>
<script language=&quot;JavaScript&quot; name=&quot;WZW&quot;><!--
//These are the images to appear in the image frame

alt1 = new Image();
alt1.src = &quot;img1.jpg&quot;;

alt2 = new Image();
alt2.src = &quot;img2.jpg&quot;;
// -->
</script>

<script language=&quot;JavaScript&quot; name=&quot;CQ&quot;><!--
//These are the texts to appear in the textframe
var msg1 = 'This is Message 1'
var msg2 = 'And this is Message2'

//This is the functions to change text:
function htmlChange(id,message){
d=document;
re=d.all?d.all[id]:d.getElementById(id);
re.innerHTML=message;
}

//This is the function to change an image
function rewriteImg(id,imgName){
d=document;
re=d.all?d.all[id]:d.getElementById(id);
re.innerHTML=&quot;<img src='&quot;+eval(imgName + &quot;.src&quot;)+&quot;'>&quot;;
}

//this is a function not used in this html
function changeImg(id,imgName){
document.images[id].src=eval(imgName+&quot;.src&quot;);
}

// -->
</script>

</head>

<body>
<table name=&quot;bigtable&quot; border=&quot;1&quot; width=&quot;570&quot; height=&quot;357&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr height=&quot;14&quot;>
<td id=&quot;headmenu&quot; colspan=&quot;2&quot; height=&quot;14&quot;>
<a href=&quot;/&quot; onmouseover=&quot;htmlChange('textframe',msg1);
rewriteImg('imageframe','alt1');&quot;>Choice1</a>
<a href=&quot;/&quot; onmouseover=&quot;htmlChange('textframe',msg2);
rewriteImg('imageframe','alt2');&quot;>Choice2</a>
</td>
</tr>
<tr height=&quot;301&quot;>
<td id=&quot;imageframe&quot; width=&quot;226&quot; height=&quot;301&quot;>
<img src=&quot;img0.jpg&quot; height=&quot;301&quot;>
</td>
<td id=&quot;cell for texttable&quot; valign=&quot;middle&quot; height=&quot;301&quot;>
<table border=&quot;3&quot; cellpadding=&quot;15&quot; width=&quot;344&quot; height=&quot;100%&quot;>
<tr>
<td id=&quot;textframe&quot; background-image=&quot;backimg.jpg&quot;>Starting Text</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

</html>

Kippie

 
Sort by date Sort by votes
hi kippie,
you have to create css class (or add background-image property to existing ID) for that table cell:

<style>
#textframe { background-image: url(&quot;backimg.jpg&quot;); }
</style>

good luck
 
Upvote 0 Downvote
Hi Starway,
Thanks, but I'm not clear about it. I can use the background-image property to set a background-image for a cell. That's what I understand. But suppose I would like to link backimg1 to choice1 and backimg2 to choice2. How can I do that? Hope you can help me.
Kippie
 
Upvote 0 Downvote
Are you asking how to access the background image property using HTML DOM?

Do it like this:

document.getElementById(&quot;foo&quot;).style.backgroundImage = &quot;url('logo.gif')&quot;;

I beileve. ===
Supports Mozilla and Web Standards
Knows HTML/XHTML, CSS1, JavaScript, PHP, C++, DOM1
===
 
Upvote 0 Downvote
Guys,
I misunderstood the kippie's question: what I told is how you can set the background image for a table cell using CSS. But the question was how can you change it (dynamically, I guess).

What I can tell is that there's no way to do it using CSS. You may try to use some DHTML scripting, but it doesn't seem to me to work. I personally never do such things because it's not cross-browser solution (this also concerns your use of innerHTML property, kippie).
As far as I know the subject, it won't work in NN4.x and Opera, and will probably work in N6. It will work in IE, but I don't think that it worth it.

 
Upvote 0 Downvote
to deal with this, use the following javascript :

<script language=&quot;JavaScript&quot;>
function LmOver(elem)
{elem.style.backgroundImage = &quot;url('path_to_img')&quot;}

function LmOut(elem)
{elem.style.backgroundImage = &quot;url('')}
</script>

in your td tag, add events :
<td onMouseOver=&quot;LmOver(this)&quot; onMouseOut=&quot;LmOut(this)&quot;

works with nescape too...
regards,
lucd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
970
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
907
pmonett
pmonett
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
977
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top