Computer Science Canada

<td> Question
Author:  Delos [ Sun Jun 05, 2005 5:53 pm ]
Post subject:  <td> Question
HTML:

<table border="1" cellpadding="10" cellspacing="0" width="200"
height="200" summary="A Table">
<tr>
    <td onmouseover=background="bgpic_1.gif"
                onmouseout=background="bg_pic2.gif">
                Random Cell
    </td>
</tr>
</table>


Okay, I'm pretty new to HTML, mainly using FP to do my scripting. My question is this: is this code good form? The effect, as can be deduced, is to have the background image of the cell change as the mouse rolls in and out.
I did this in FP, and it spewed out some crazy Javascript that works perfectly in FireFox, but not so well in IE.

Any suggestions, comments etc? Thanks a lot.
Author:  Tony [ Mon Jun 06, 2005 9:45 am ]
Post subject:  Re: <td> Question
Delos wrote:
Any suggestions, comments etc?

Well as long as it works in FireFox.. Laughing

And persoanlly I'd use CSS for such.
Author:  Notoroge [ Tue Jun 07, 2005 8:12 am ]
Post subject: 
HTML:
<html>
<head>
  <title>Whoah! Whoah! Whoah! Whoah! . . . Whoah!</title>
  <style type="text/css">
    table.asdf {
      border: 1px;
      border-style: solid;
      color: black;
      padding:10px;
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <table class="asdf">
    <tr>
      <td>
        I'm the king of the world!
      </td>
    </tr>
  </table>
</body>
</html>
Why doesn't syntax highlighting work for me? Sad
Author:  Delos [ Tue Jun 07, 2005 2:35 pm ]
Post subject: 
Well, I'm not sure if 'syntax' is case sensitive, but I use this:
code:

[syntax="html"]
Author:  md [ Tue Jun 07, 2005 3:16 pm ]
Post subject: 
Notoroge wrote:
HTML:
<html>
<head>
  <title>Whoah! Whoah! Whoah! Whoah! . . . Whoah!</title>
  <style type="text/css">
    table.asdf {
      border: 1px;
      border-style: solid;
      color: black;
      padding:10px;
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <table class="asdf">
    <tr>
      <td>
        I'm the king of the world!
      </td>
    </tr>
  </table>
</body>
</html>
Why doesn't syntax highlighting work for me? Sad

This doesn't make the cell change on mouse over though... for that you'd need to do something like

HTML:

<head>
  <title>Whoah! Whoah! Whoah! Whoah! . . . Whoah!</title>
  <style type="text/css">
    table.asdf {
      border: 1px;
      border-style: solid;
      color: black;
      padding:10px;
      width: 200px;
      height: 200px;
    }
    table.asdf.cell { background-image: url("bgpic_1.gif"); }
    table.asdf.cell:hover { background-image: url("bgpic_2.gif"); }
   
  </style>
</head>

<body>
  <table class="asdf">
    <tr>
      <td class="cell">
        I'm the king of the world!
      </td>
    </tr>
  </table>
</body>
</html>   

Not sure about the quotes in the url(); part; you'd need to check the css standard for that (google is your friend...)

Oh, and to get highlighting to work you need to make sure that you use lower case "html" Wink
Author:  wtd [ Tue Jun 07, 2005 5:22 pm ]
Post subject: 
I think what you're looking for is:

HTML:

<head>
  <title>Whoah! Whoah! Whoah! Whoah! . . . Whoah!</title>
  <style type="text/css">
    table.asdf {
      border: 1px;
      border-style: solid;
      color: black;
      padding:10px;
      width: 200px;
      height: 200px;
    }
    table.asdf td.cell { background-image: url("bgpic_1.gif"); }
    table.asdf td.cell:hover { background-image: url("bgpic_2.gif"); }
   
  </style>
</head>

<body>
  <table class="asdf">
    <tr>
      <td class="cell">
        I'm the king of the world!
      </td>
    </tr>
  </table>
</body>
</html>   
Author:  Delos [ Tue Jun 07, 2005 6:54 pm ]
Post subject: 
Wow! That's really nifty, and I like it a lot more than the Javascript FP spewed out. One small problem though...
Can anyone tell me why this does not render on IE? Is it that IE doesn't support css?
Author:  Notoroge [ Tue Jun 07, 2005 6:58 pm ]
Post subject: 
Delos wrote:
Is it that IE doesn't support css?
It does, just very crappily.
Author:  md [ Tue Jun 07, 2005 7:40 pm ]
Post subject: 
IE doesn't support :hover on anything other then links. Personally I tend to only use hover-type stuff to make things stand out when your mouse is over them (like to show that your over a specific thing in the nav bar); but I limit it so that if you can't see the hovering bit then it still works fine.

And remember, there are people who use text browsers who don't get to see all your fancy graphics.
Author:  Delos [ Tue Jun 07, 2005 9:38 pm ]
Post subject: 
Interesting...so how would you (or someone else out there) suggest I go about doing the whole 'change background picture on hover' thing? Right now I've got it set up so that each table cell will act as a 'button' or sorts: they'll have various navigational references on them ("News", "About Us", etc), when you hover the bg pic changes, and when you click they take you somewhere (to another page - hopefully!)

I've got a feeling there's a better way to do this, but I don't want to get too fancy if it's possible.

And as for text-only browsers...well, I've got a feeling that the populace who'll be viewing this site will be all but M$ junkies...[sigh].

[i]Oh yeah, I realized that my code above (in the first post) does not render in Firefox. Everything past the '=' (like in onmouseover=...) is treated as an argument, so the changes don't apply.
This is turning out to be rather...informative this.
Author:  md [ Wed Jun 08, 2005 9:14 am ]
Post subject: 
If your doing it so that it will always work in IE then you can write a javascript function to change the background of the cell to a specified image, and then use onmouseover="function('image.png');" and onmouseout="function('image2.png');" that *should* work; but you'll probably also have to give the elements you want to change IDs and pass those to hte function as well. I used to have some code that did just that somewhere; but I think it may have been destroyed when I went to a CSS based design. I'll see what I can dig up; but you could always try google Wink
Author:  Delos [ Tue Jun 21, 2005 9:24 pm ]
Post subject: 
HTML:

<style type="text/css">
    table.hoverCell {
    }
    table.hoverCell td.cell { background: red; }
    table.hoverCell td.cell:hover { background: black;
                                    color: white;}
   
  </style>


Une autre fois...

Can anyone tell me why this won't render in IE? Do I need to add any header info like "Content="text/css" or some odd jargon like that?
Meh...why can't browsers just use the simple stuff that works so well! [sigh]. On second thoughts, why can't the masses just switch over to FireFox?


Edit...apparently, after some searching, it appears that IE will not support this 'pseudo code' of CSS'. Irksome? Yes.
Would someone be able to help me with the following instead?

- When I make a link the text is automatically underlined. Is it possible for me to set up the text such that on mouse hover, it becomes underlined?

i.e., would this work:
HTML:

<style type="text/css">
.textmod{
font-family: "Century Gothic";
font-size: 12pt;
font-weight: bold;
textmod:hover {font-size:14pt;}
}
</style>


Ok, I agree that's an horrible example...but you get the idea yes?
Author:  Blade [ Wed Jun 22, 2005 2:24 am ]
Post subject: 
HTML:

    <style type="text/css">
      A:link {text-decoration: none}
      a:hover{text-decoration:underline}
    </style>


that should work, i tested it with firefox 1.03 and IE6sp2 and it seems to work fine


on a completely unrelated note: my 800th post since 05-MAR-03
Author:  Blade [ Wed Jun 22, 2005 2:41 am ]
Post subject: 
okay... after some research i was able to figure out how to highlight table cells in both IE and FF. you guys are trying to make it more complicated than it really is (dont worry, i ALWAYS do that :S) but nevertheless:

HTML:
<html>
<head>
  <style type="text/css">
    .hover {
      background: #000000;
      color: #FFFFFF;
    }

    .offhover {
      background: #FFFFFF;
      color: #000000;
    }
  </style>
</head>
<body>
  <table border="1">
    <tr>
      <td onmouseover="this.className='hover';" onmouseout="this.className='nohover';">
        Hover Me
      </td>
    </tr>
  </table>
</body>
</html>


and... if you edit your css a little bit, you can make it change images on a hover...

HTML:
<html>
<head>
  <style type="text/css">
    .hover {
      background-image: url(image2.jpg);
      color: #FFFFFF;
    }

    .offhover {
      background-image: url(image1.jpg);
      color: #000000;
    }
  </style>
</head>
<body>
  <table border="1">
    <tr>
      <td background="image1.jpg" onmouseover="this.className='hover';" onmouseout="this.className='nohover';">
        Hover Me
      </td>
    </tr>
  </table>
</body>
</html>
Author:  Delos [ Wed Jun 22, 2005 8:43 am ]
Post subject: 
Excellent! It actually works. I had actually umm...compromised by formatting my hyperlinks so that they had no underline, changed color when hovered over, and had a bgcolor appear when hovered over. This of course meant having to make both the link and the button link to the same page (but seperately) (the text used the usual < A > while the button used used a 'onClick="window.location='...'" type thing.
This makes my life a lot easier.
Thanks!

Edit: BTW, any idea why I have to add an extra 'bgcolor=...' parameter to my cells even though a colour is specified in the 'offhover' part of it all? Without the specification, no bg colour is rendered at the cells are transparent.
Of course I could just leave well-enough alone!
Author:  Blade [ Wed Jun 22, 2005 3:54 pm ]
Post subject: 
well, i'm not sure, i've been playing around with it for a bit and it just seems that the "off" reverts it back to whatever colour it was initially. it doesnt actually change it to that colour... if you use

HTML:

    td{
      background: #FF0000;
    }


that will format all your cells to the specified colour. i cant remember for sure, but if you specify what colour you want it in your cell i think it'll change it from that default you set in the css

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy