Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tables III - Highlighting Cells.

    How can I highlight the cells of a table on a mouseover event - without using images?


    Thanx.


    Ionsurge.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have just figured it out I think.


    <A STYLE="color:#FFFFFF;text-decoration:none;" HREF="Link" TARGET="_top" onmouseover="this.style.color='#FFCC00';"

    onmouseout="this.style.color='#FFFFFF';">Link</A>&nbsp;
    I am checking it out now.


    Ionsurge.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <style>
    td.menuon {
    background-color: #FFFF00;
    }
    td.menuoff {
    background-color: #FFFFFF;
    }
    </style>
    
    <table>
      <tr>
        <td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
          Put your mouse here
        </td>
      </tr>
      <tr>
        <td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
          Or here...
        </td>
      </tr>
    </table>
    redhead

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers Redhead, you are a saint!


    Ionsurge.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    td:hover{
    background-color: #FFFF00
    }
    td{
    background-color: #FFFFFF;
    }

    Is alot easier IMHO.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    from a coding point of veiw yes... but it doesnt work in IE... (not for me anyway )
    redhead

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Redhead's script works - I uploaded just now, www.ionsurge.com.

    Cheers all anyhow.


    Ionsurge.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could it be possible to make the whole cell a link too, so the user can click anywhere in the cell?


    Cheers.

    Ionsurge.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #9
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Give this a try

    <td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';" onClick="document.location='page.html';">

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    if your making the whole cell clickable you probably should add "cursor: pointer;" to the td.menuon style...
    redhead

  • #11
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey ionsurge... I just took a look at your page in Opera... it didn't work. I think it is because you have so many internal style sheets defined. If possibly you should consolidate them all into your top one. The menu background change doesn't work specifically because you have the style sheet in in the body section of your document.

    Let me know when you change that and I'll take another look... the code you used should work if put in the right place.

    -Doug
    "The focused mind can pierce through stone."
    - Japanese Maxim

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I am sorting everything out now, that has been suggested since my last post, so I will post another reply to this thread when I think I have sorted everything - well almost everything that I can.

    Cheers!


    Ionsurge.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I have sorted out the clickable cells, and no I am seeing what will happen with Opera.


    Ionsurge.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #14
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey Ionsurge,

    I don't know if you're going to like me after this :P but I just checked out your page again, and dove a little deeper into the code. I was going to try fixing some things for you, but I realized, your code is (at least from a standards coding person's point of view) really messy.

    I looked at your page in IE 5.5, and I have to say I really like your design! But since you appear to have some design and other computer tutorials, you might be interested in how it renders on more than IE.

    Here are just a few examples:

    - Your Doctype Declaration HAS to be the first line, unless you're using XML, which you're not.
    - Your meta tags are written incorrectly, you have:
    <meta description="Your ultimate advert and popup free resource."> which should be
    <meta name="description" content="Your ultimate advert and popup free resource.">
    - You have 1 external style sheet and 3 internal style sheet, one of which isn't in the head section.
    - You're using deprecated tags even for HTML 4, for instance bordercolor="#" does not even exist, and you are relying on it for a HUGE amount of your visual effect. using style="border:1px solid #afd5ec" would be a much better alternative.

    Well those are just a few specific examples, but here's my strong suggestion to you and anyone else that reads this. Think seriously about using the w3c validator. If you can code your pages to look right, and validate, it will look right on anything else. My personal tactic is to always code for the strictest browser I have (Opera) and then from there I may have to add only one or two lines to make things perfect in IE also... this is much easier than writing for IE, which will accept anything, and then being forced to recode the whole page when you get a number of complaints from your visitors... and your page looks like you're trying to get a lot of visitors.

    I hope this helps, at least a little bit.

    -Doug
    "The focused mind can pierce through stone."
    - Japanese Maxim

  • #15
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Doug,

    I will sort out all those problems, and I am not one to dislike another for making comments to improve my work. I welcome it with open arms, and I look up to you for that, because you are guiding me to make my site better, and run better for all those that will view it. So thank you.

    It is now just past 7 am, so I will start on it in a few hours time.

    By the way, I was going to download Opera, but it turns out that you have to pay for it, so I was sort of turned away from it. But, seeing as there are people that use it, I will sort it out, and download it.

    By the way, I used Dreamweaver MX, which generated all the meta tags, and w3c validators, and I have not touched it since I started, apart from adding my own descriptions. Anyhow, that will be fixed too.

    Cheers.


    Ionsurge.
    http://www.mudsplat.com - Web design, print, and marketing solutions.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •