1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HTML Link

Discussion in 'Programming' started by Lucky Bastard, Jan 30, 2005.

  1. #1
    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.
     
    Lucky Bastard, Jan 30, 2005 IP
  2. Refrozen

    Refrozen Peon

    Messages:
    318
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Fool with CSS something like

    table:hover { text-decoration:underline; }

    should do it
     
    Refrozen, Jan 30, 2005 IP
  3. david_sakh

    david_sakh Peon

    Messages:
    1,225
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    david_sakh, Jan 30, 2005 IP
  4. Lucky Bastard

    Lucky Bastard Peon

    Messages:
    406
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    Lucky Bastard, Jan 30, 2005 IP
  5. Refrozen

    Refrozen Peon

    Messages:
    318
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Appears to work perfectly in Firefox and Konquerer (on Linux anyways?)
     
    Refrozen, Jan 30, 2005 IP
  6. Lucky Bastard

    Lucky Bastard Peon

    Messages:
    406
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Lucky Bastard, Jan 30, 2005 IP
  7. david_sakh

    david_sakh Peon

    Messages:
    1,225
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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?
     
    david_sakh, Jan 30, 2005 IP
  8. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #8
    IE only handles hover's with anchors. By the book, anchors can contain only inline contents.

    J.D.
     
    J.D., Jan 30, 2005 IP
  9. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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.
     
    J.D., Jan 30, 2005 IP
  10. Lucky Bastard

    Lucky Bastard Peon

    Messages:
    406
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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. :)
     
    Lucky Bastard, Jan 30, 2005 IP
    david_sakh likes this.
  11. Lucky Bastard

    Lucky Bastard Peon

    Messages:
    406
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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.
     
    Lucky Bastard, Jan 30, 2005 IP
  12. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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.
     
    J.D., Jan 30, 2005 IP
    david_sakh likes this.
  13. Lucky Bastard

    Lucky Bastard Peon

    Messages:
    406
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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:
     
    Lucky Bastard, Jan 30, 2005 IP
  14. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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.
     
    J.D., Jan 30, 2005 IP
  15. Lucky Bastard

    Lucky Bastard Peon

    Messages:
    406
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #15
    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).
     
    Lucky Bastard, Jan 30, 2005 IP
  16. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #16
    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.
     
    J.D., Jan 30, 2005 IP
  17. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Oh, yeah. For IE to handle getElementsByName correctly you need to have a proper DOCTYPE declaration.

    J.D.
     
    J.D., Jan 30, 2005 IP
  18. Lucky Bastard

    Lucky Bastard Peon

    Messages:
    406
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #18
    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,
     
    Lucky Bastard, Jan 31, 2005 IP
  19. Lucky Bastard

    Lucky Bastard Peon

    Messages:
    406
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #19
    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?
     
    Lucky Bastard, Jan 31, 2005 IP
  20. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #20
    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.
     
    J.D., Jan 31, 2005 IP