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

this.style.background-image in a TD element

Status
Not open for further replies.
MuadDubby

MuadDubby

Programmer
Sep 23, 1999
236
CA
I'm trying to get a background in a TD element to change images when I hover the mouse over it...

Has anyone succeeded in getting the damn thing to work? I've been searching for a couple of hours now, and all the samples I find point to approximately the same piece of code, but it never works. I would greatly appreciate it if someone could figure this one out :)

The code I have right now is this:
<td onmouseover="this.style.background-image: 'url(MenuItem_Selected.jpg)';" onmouseout="this.style.background-image: 'url(MenuItem_Unselected.jpg)';">

No matter what I do, I always end up with a Javascript error on the page, and the image flipping never happens.

Thx!
 
Sort by date Sort by votes
Save yourself the pain and try CSS :)

Code: 
<td id="cell1">data</td>
Code: 
#cell1 {background-image: url(images/pic1.gif);  background-repeat: no-repeat;}

#cell1:hover {background-image: url(image/pic2.gif);}

The key is the :hover pseudo-element.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote

Try using this:

Code: 
<td onmouseover="this.style.background-image = 'url:(MenuItem_Selected.jpg)';" onmouseout="this.style.background-image = 'url:(MenuItem_Unselected.jpg)';">

You were missing the "=" signs.

Hope this helps,
Dan
 
Upvote 0 Downvote
Thx for the tips.

I tried #2 first because it seemed simpler, but I always get an error on loading the page, even after inserting your code as-is (although I just changed the paths of the images). I wish there was an easy way of debugging this.

As for #1 - I've never implemented code like that, so could you please provide me with a working sample of it? I assumed the #cell lines go straight in the html doc, but couldn't get it to work. Do they go in a specific area, or are they prefixed by anything in particular? Thx again!
 
Upvote 0 Downvote
sample code using the hover statement:

HTML file: xxxx.html
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<html lang="en">
<head>
  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
  <title>Test Page</title>
  <link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>
  <h1>This is a testcase for the :hover pseudo-element</h1>
  <table summary="">
    <tr>
      <td id="menu1">Menu item 1</td>
      <td id="menu2">Menu item 2</td>
      <td id="menu3">Menu item 3</td>
      <td id="menu4">Menu item 4</td>
    </tr>
  </table>
</body>
</html>

and for the 'my-styles.css':
Code: 
h1 {color: #39c;}

#menu1 {background-image: url(images/menu1_off.gif); background-repeat: no-repeat;}
#menu1:hover {background-image: url(images/menu1_over.gif); }

#menu2 {background-image: url(images/menu2_off.gif); background-repeat: no-repeat;}
#menu2:hover {background-image: url(images/menu2_over.gif); }

#menu3 {background-image: url(images/menu3_off.gif); background-repeat: no-repeat;}
#menu3:hover {background-image: url(images/menu3_over.gif); }

#menu4 {background-image: url(images/menu4_off.gif); background-repeat: no-repeat;}
#menu4:hover {background-image: url(images/menu4_over.gif); }

css can do so much for your site: it can make it extremely easy to (consistently) change the look and feel of a huge site, plus it often reduces page sizes (by stripping out all the presentational code from the html, and moving it to a single cacheable css file).

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote
But hover won't work in IE unless it's in a link right? Or am I doing something wrong?
 
Upvote 0 Downvote
thanks - I develop so much for Moz that I sometimes forget IE's limitations ;)


That said, image-swaps are usually used where a a user's action is required - such as a menu item - in which case it would be an a tag (one would hope!)

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
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
1K
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
391
Alt255
Alt255
Lets Code
  • Locked
  • Question
Inline element into a block level element
Replies
1
Views
485
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top