What I want to do, is have a link that spans an entire table (albeit a small table) within a table. I need the content of the link to be in table form, for formatting reasons - won't go in to that here. Anyway a brief example (nb.lame example only). <html> <head> </head> <body> <table> <tr><td> <a href="somepage.html"> <table> <tr><td>Hello</td></tr> <tr><td>world</td></tr> </table> </a> </td> <td> <a href="some_other_page.html"> <table> <tr><td>How are</td></tr> <tr><td>You?</td></tr> </table> </a> </td> </tr> </table> </body> </html> So in otherwords when you mouse over the word "Hello". "hello world" should be active, linkable at the same time EVEN though they are in different table cells. I know if I stripped the table it would work, but that isn't an option unfortunetly. The above example didn't work for me Any way of doing this using HTML "ids" or anything tricky to links cells together, so that when one is "moused over" they both show as a "single" link.
I remember this being discussed before. I don't think that kind of experimentation will work across older versions of many browsers, if any at all. The hover attribute, as I understand, only works reliably with the anchor tag.
My mistake. Incorrect example above. Below is what I mean : <html><head></head> <body> <table> <tr><td><a href="product1.html">Product 1 Image here</a></td><td><a href="product2.html">Product 2 Image here</a></td><td><a href="product3.html">Product 3 Image here</a></td></tr> <tr><td><a href="product1.html">Product 1 Title here</a></td><td><a href="product2.html">Product 2 Title here</a></td><td><a href="product3.html">Product 3 Title here</a></td></tr> <tr><td><a href="product1.html">Product 1 Price here</a></td><td><a href="product2.html">Product 2 Price here</a></td><td><a href="product3.html">Product 3 Price here</a></td></tr> </table> </body> </html> Code (markup): So basically when any of the 3 "Product 1" lines (image, or title, or price) are "moused-over" all 3 lines appear moused over (ie..font-color changes on each). ps.I need to keep the table.
Can it be used in my example (post #4: http://forums.digitalpoint.com/showpost.php?p=92676&postcount=4)?
older versions, is what I'm saying. I remember being strongly warned not to experiment with hover. I could have been misinformed. Maybe J.D. can shed some light on this. Anyway, maybe this could be accomplished with J.S.... something like, onmouseover this*.className='something';" *I'm used to using 'this' here, but I wonder if you could target another cell?
You can highlight just about anything with JS, though. Traverse all cells, identify those you need (e.g. using element names, or just positionally) and change their background color. J.D.
I agree, I think SOMETHING LIKE this may work (onmouseover="productOver(this)" ) if it could be tie the 3 related "Product" cells Where the JavaScript productOver function changed the class of the 3 "related" product cells (image,title, price) by using a .classname='hoverClass'... BUT, and a BIG BUT(T) how to affect the other 2 cell classes when you are mousing over the 3rd class (say mouse over "image" changes the bg color of the image cell (easy) AND title cell, and price cell). Any way to relate them. I hope you get my drift.
J.D. can you elaborate a bit, maybe my modifying my example with a working example My html/JavaScript knowledge isn't that flash Thanks for your input anyhow.
This should give you the idea... This code changes the background color on a sibling element - another cell, if there's one. <html><head> <script type="text/javascript"> function hiliteCells(td) { if(td.nextSibling) td.nextSibling.style.backgroundColor = "#BBBBFF"; td.style.backgroundColor = "#FFBBFF"; } </script> </head> <body><table> <tr><td onmouseover="hiliteCells(this)"><a href="product1.html">Product 1 Image here</a></td><td><a href="product2.html">Product 2 Image here</a></td><td onmouseover="hiliteCells(this)"><a href="product3.html">Product 3 Image here</a></td></tr> </table> </body> </html> Code (markup): J.D.
Thanks J.D. though my javascript isn't that advanced. Would that example work for me, where the sibling "related" cells lie in the SAME COLUMN but each in DIFFERENT ROWS. See example: <html><head></head> <body> <table> <tr><td><a href="product1.html">Product 1 Image here</a></td><td><a href="product2.html">Product 2 Image here</a></td><td><a href="product3.html">Product 3 Image here</a></td></tr> <tr><td><a href="product1.html">Product 1 Title here</a></td><td><a href="product2.html">Product 2 Title here</a></td><td><a href="product3.html">Product 3 Title here</a></td></tr> <tr><td><a href="product1.html">Product 1 Price here</a></td><td><a href="product2.html">Product 2 Price here</a></td><td><a href="product3.html">Product 3 Price here</a></td></tr> </table> </body> </html> PHP:
If you have a fixed number of cells, your best bet could be just ID'ing all cells uniquely and using document.getElementById to pick the ones you want. If you want to extend the example I showed, you would need to traverse the table. For example: td.nodeParent -> this row td.nodeParent.nextSibling -> next row td.nodeParent.nextSibling.firstChild -> first td in the next row You can also use element lists (getElementsByName or getElementsByTagName) to get more than one element at once. FF has a great tool - the DOM inspector (installed when you select to install development tools). Press Ctrl-Shift-I (or Tools > DOM Inspector) to see the interface. You will see the entire HTML tree. This should make it easy for you to find who's a parent and who's a sibpling One thing to watch out for is that firstChild may be a text node (you will see these in DOM Inspector) and you will need to get the next sibling until you get to the next td. Try ID'ing cells first - it's much simpler, although may be not as flexible. J.D.
Thanks once again JD. So I could do something like this : <html><head> <script type="text/javascript"> function hiliteCells(product) { var product_name = getElementName(product) getElementsByName(product_name).classname='hoverClass'; } <style type="text/css"> hoverClass {bg-color:red;} </style> <head> <body> <table> <tr><td><a href="product1.html" name="product1" onmouseover="hiliteCells(this)">Product 1 Image here</a></td><td><a href="product2.html">Product 2 Image here</a></td><td><a href="product3.html">Product 3 Image here</a></td></tr> <tr><td><a href="product1.html" name="product1" onmouseover="hiliteCells(this)">Product 1 Title here</a></td><td><a href="product2.html">Product 2 Title here</a></td><td><a href="product3.html">Product 3 Title here</a></td></tr> <tr><td><a href="product1.html" name="product1" onmouseover="hiliteCells(this)">Product 1 Price here</a></td><td><a href="product2.html">Product 2 Price here</a></td><td><a href="product3.html">Product 3 Price here</a></td></tr> </table> </body> </html> PHP: Sorry I am just headbanging a bit. BTW, I have FF, where can I dind the dev tools (under which menu).
Keep in mind that it's elements, not element. This function returns you a list, not a single node. Once you get the list, you can use 'length' to get the number of elements and 'item(index)' to get a particular element. e.g. document.getElementById("my-unique-id").style.backgroundColor = "red"; document.getElementsByName("my-name").item(0).style.backgroundColor = "red"; document.getElementsByName("my-name").item(1).style.backgroundColor = "red"; Code (markup): You can name cells in each column the same way (e.g. col-1, col-2, etc) and use getElementsByName to get all cells with the same name. Then it's just as simple as traversing this node list and changing the background color. When you install FF for the first time, there's a checkbox (Development Tools, or something along these lines). It gives you DOM Inspector and Java Console. Both are very handy tools. You may need to uninstall your FF and install it again. May be there's a way to enable them after installation - I don't know. J.D.
Oh, yeah. For IE to handle getElementsByName correctly you need to have a proper DOCTYPE declaration. J.D.
Thanks will try that out (the treversing). is this how you would do the treversing : for i=0 to document.getElementsByName("product1").length; document.getElementsByName("product1").item(i).style.backgroundColor = "red"; } Code (markup): I'm JavaScript rusty,
Got it to work now with the following JavaScript : function prodOverEffect(prod) { var metaArray = document.getElementsByName(prod.name); for (var i=0; i<metaArray.length; i++) { metaArray[i].className = 'detailOver'; } } function prodOutEffect(prod) { var metaArray = document.getElementsByName(prod.name); for (var i=0; i<metaArray.length; i++) { metaArray[i].className = 'detailNormal'; } } Code (markup): It is called in : <table> <tr> <td> <a href name="something" onmouseover="prodOverEffect(this)" onmouseout="prodOutEffect(this)">Hello</a> </td> </tr> <tr> <td> <a href name="something" onmouseover="prodOverEffect(this)" onmouseout="prodOutEffect(this)">Hello</a> </td> </tr> </table> Code (markup): Tested it in the latest IE, and Mozilla and it WORKS . Can you tell from experience if this JavaScript code is backward compatable with older version of IE, Mozilla, or Oprah?
This code will work in all modern browsers. It will also work fine with some of the older ones (most of the stuff released in the last couple of years should be fine). If you need to make sure your code works with really old browsers, you will need to use old pre-DOM techniques that are browser-specific. There're many examples on the web how to deal with this. Personally, I don't do old-browser stuff - they are full of security holes and I can't imagine someone using, say, IE3 (unless they are using an older mobile device, which are not upgradable). You can test if DOM functions are available by something like if(document.getElementsByName). Also, keep in mind that JS may be disabled - make sure that your website works without JS - it may be not as nice looking, but it should still be functional (I saw websites that wouldn't respond to any clicking without JS - this is just bad). J.D.