Jump to content

Help w get TD id on mouseover.


btamxx
 Share

Recommended Posts

Hi.I have searched many forums, tutorials, on many sites for over a week (W3C etc.) and I can't find the answer. I want to be able to change a cell background image onmouseover and mouseout. I know that I can put the code in each cell to do that but if I have a lot of cells, it increases the size of the HTML file and takes longer to download on a dialup line.I can set a handler which can scan all the objects in a form and that works well for a form. But I can't seem to find any way to get cell element attributes the same way. If I could send the cell ID to a function and let the global function use the cell ID to change the background, that would work as well. But I can't seem to do that either. What I'm actually trying to do is use simplified code to make simple buttons by using cell/TD as an image holder to hold and change the buttons images on mouseover. To my way of thinking, this would be simpler by this: onmouseover function(cell name) on mouseout function(cell name). Even better would be a scanner to detect globally mouseover and determine which cell had the action, what the action was, and to change the image appropriately.I found a snippet which is quite elegant in that it sets up a listener. The listener then determines which element of a form the action took place and reacts accordingly.setListner( focus ,setBKColor); setListner( blur ,reSetBKColor); This way the HTML statement doesn't care which function to call. It simply calls the same function on the event and the function is able to determine which cell to modify.<input type="text" onfocus="setBkColor(event)" ; onblur="reSetBKColor(event)" size="20">I think this works because forms allow you to determine element information based on this. var ele = document.forms[0].elements;However, if I change document.forms[0].elements to document.cells[0].elements or document.td[0].elements, JS doesn’t recognize it as a valid object.It would appear that I know just enough about OOP to get extremely frustrated. :-)Would anybody like to help?Thanks.Bill

Link to comment
Share on other sites

That is the fastest response I have ever had. Thanks roundcorners.I would love toknow how to do that. CSS seems to be another concept I have trouble with. I have read a lot and gone through some tutorials but they simply scrape the surface. I have downloaded some very fancy CSS files and stand amazed at what I don't know. Can you suggest a source that I can study and learn how to do what you mentioned?Thanks,

you could use css background images instead
Link to comment
Share on other sites

One thing I forgot to mention. I wanted to use cells because with cells I can use a background button image and place text over the button eliminating the need for individual buttons. One button fits all.I'm thinking now that there is a better way to do this. I just don't know it.

That is the fastest response I have ever had. Thanks roundcorners.I would love toknow how to do that. CSS seems to be another concept I have trouble with. I have read a lot and gone through some tutorials but they simply scrape the surface. I have downloaded some very fancy CSS files and stand amazed at what I don't know. Can you suggest a source that I can study and learn how to do what you mentioned?Thanks,
Link to comment
Share on other sites

try something like this.<body><style type="text/css">li {float: left;}li[title=image1] {background: onImage1.jpg;}li[title=image1]:hover {background: offImage1.jpg}li[title=image2] {background: onImage2.jpg;}li[title=image2]:hover {background: offImage2.jpg}</style><ul><li title="image1">text<li><li title="image2">text<li></ul>typically tables andtable cells aren't used anymore, what you're talking about is more of a list, so the above code uses an unordered list and list items with title attributes, which can be whatever, I just added them as hooks for the css. The you can assign background images to the <li>'s and have them change when the user hovers. I'll have a look for a good online resource for you, but there are tons out there, you are bound to stumble onto one. Good Luck

Link to comment
Share on other sites

You can use document.getElementsByTagName to get all elements of a certain type. You can use a CSS class (even if you don't have an actual class in a CSS file) to mark the ones you want to assign handlers to. So this will work for all td elements with a class "changeme", e.g. <td class="changeme">.

var tag_name = "td";var class_name = "changeme";var els = document.getElementsByTagName(tag_name);for (var i = 0; i < els.length; i++){  if (els[i].class == class_name || els[i].className == class_name)  {	els[i].onmouseover = function(e)	{	  if (!e) var e = window.event;	  var tg = (window.event) ? e.srcElement : e.target;	  tg.style.backgroundImage = "url('path/to/over/image.jpg')";	}	els[i].onmouseout = function(e)	{	  if (!e) var e = window.event;	  var tg = (window.event) ? e.srcElement : e.target;	  tg.style.backgroundImage = "url('path/to/normal/image.jpg')";	}  }}

So that assumes that you have a CSS background image on the element, which is the best way to do it.<td class="changeme" style="background-image: url('path/to/image.jpg');">

typically tables andtable cells aren't used anymore
That's not true at all, they have their place. Also, the CSS selector for attribute value you used probably isn't going to work in IE6.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...