SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouseover and tables

    Hi all,

    I'm trying to achive an effect like http://www.homepagetools.com where when you place your mouse over the links in the left navigation panel, the color behind the text changes, as well as the text itself.

    How can I do this? I'm not very "fluent" in JavaScript, so if you could provide actual code and documentation, that would be great.

    Thank you,
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
     3J? looking at the source you will see that the table bg colour is altered with the following function

    function over(src,color)
    { if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = color;}}


    (The style.cursor="hand" has only been added to make the cell area around the link text behave like a link by having the cursor change to the pointing hand when the cursor is over it)

    The onMouseOver event has been put into each of the opening <td> tags in that column.
    They have also added a function called clicked to the cell so that it too will function as a link.
    I will leave you to find and dissect that one


    onmouseover="over(this,'#3399ff');" onmouseout="out(this,'#0071ff');"

    The text itself is changed with CSS using classes. You have to be directly over the text for it to change colour.

    They have used...

    a.mainmenu { font-family: MS Sans Serif, News Gothic MT, Arial, Helvetica; color: #f7f7f7; text-decoration: none; font-weight: normal; font-size: 9pt; }

    a:hover.mainmenu { font-family: MS Sans Serif, News Gothic MT, Arial, Helvetica; color: #000000; text-decoration: none; font-weight: normal; font-size: 9pt; }


    ...in the stylesheet and...

    class=mainmenu

    ...in the opening <a> tag for each text link.


    Whilst it sounds to me like I know as much (or as little) about javascript as you so, I have found there's no better way to learn than to go diving through the scripts on any pages you might like.

    Search out the name of the javascript function/command or the stylesheet class attached to the link/event and trace it backwards from there.

    If worse comes to worst then you can simply copy it and paste it into your page.
    It's not the most ethical of practices (unless from a script resource) but again, when you start tweaking it to fit your own needs you'll find it a great way to understand how these things work.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill,

    Thanks...but that is all foreign to me.

    Could you tell me where to put each set of code? (Ie. put the following in the <HEAD> section, etc.)

    Thanks,
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I assumed that when you said "not very 'fluent'" that you already knew something about the structure of javascript


    The Javascript

    If you take a look at the page source of the url you mentioned you will see where each of the parts should go.
    You may have to sift through alot of the nonsense, but just 'Find' bits like function over(src,color) and it'll take you straight there.

    Then simply take a mental note of which of the standard html tags it is being used within and paste it in the same place in your page.
    (Cheat one: the javascript will be between the <HEAD></HEAD> tags.
    When used in the HEAD (as opposed to a separate javascript document (.js) you will need to have the html declare the javascript by putting it between some <SCRIPT></SCRIPT> tags.

    <SCRIPT LANGUAGE="JavaScript">

    function over(src,color)
    { if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = color;}}

    </SCRIPT>


    Usually, you can slip this in just before the closing </HEAD> tag.


    After you have set up the FUNCTION you will need to then add some kind of EVENT to trigger it.
    You can attach a javascript event to pretty much any item on the page.
    In the url you posted they have attached an onMouseOver and an onMouseOut event to the cells of a TABLE

    They simply place the event triggers into the opening <TD> tag.

    They have also placed an onClick event in the cell too that triggers a function that makes the cell area around the text link perform the same link as the text (but you don't really need to know about that. Which means I've looked at the script and I don't understand it (yet))


    The CSS

    You can create a range of CSS specifications and put them between <STYLE></STYLE> tags and put all that between the <HEAD></HEAD> tags too.
    Depending on your site it may be better to use external stylesheets.

    To have it in the HEAD it will look like this

    <style type="text/css">

    a.mainmenu { font-family: MS Sans Serif, News Gothic MT, Arial, Helvetica; color: #f7f7f7; text-decoration: none; font-weight: normal; font-size: 9pt; }

    a:hover.mainmenu { font-family: MS Sans Serif, News Gothic MT, Arial, Helvetica; color: #000000; text-decoration: none; font-weight: normal; font-size: 9pt; }

    </style>


    You will need to tell the browser which pieces of text you want use this instruction, so you place class=mainmenu into the link tags <A HREF...> of all the text links where you want to use it.


    The entire line that contains both the Javascript events and the CSS attached to the text links is

    <td height=20 bgcolor="#0071ff" onmouseover="over(this,'#3399ff');" onmouseout="out(this,'#0071ff');" onclick="clicked(this);" align=center valign=middle><a class=mainmenu href="http://homepagetools.com/ultraboard">UltraBoard</a></td>



    There are a million good CSS tutorials online that will make it as simple as possible to get your head round. Sitepoints's sister site Webmasterbase.com has a range of CSS tutorials that would make a good place to start.
    It is by far the easier of the two parts (Javascript and CSS) to understand to achieve the effect you want.

    I REALLY suggest you get your head under the bonnet/hood and have a dig around. It's quite satisfying to have something that makes no sense to you suddenly make sense.
    The best way (perhaps the only way) to do that is get your hands a little bit dirty by getting stuck in.
    Last edited by Bill Posters; Feb 9, 2002 at 04:57.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you!

    Thanks Bill
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!


Bookmarks

Posting Permissions

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