SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Different rollover effects on my page

    I expect this question has probably most likely been asked already, apologies if it has, I didn't want to go through and look for it in case it wasn't as specific as mine.

    I would like the links on my page to have different rollover effects.

    http://www.stablewars.com/statistics/stat.htm

    If you take a look at the above page, I woudl like teh sub-menu on the left which includes teh menu items; Wrestlers, Individual Standings etc to start as white without an underline and when a mouseover action takes place to change colour to the purple you see on the page without underline.

    Now if you take a look at the box with the skull on the opposite side of the menu, I would like that to start off as just plain black text and when a rollover occurs to to become underlined as a normal link would and remain in black (I may choose for it to be bolded as well, something I have yet to decide).

    And finally I would like the text in the middle of my page to be black and any links to be simply purple and when a mouse rollover action occurs the link should be underlined.

    Now I realise this is probably something that I will be able to achieve via CSS, although since Im using DW I haven't found any tutorial that shows how css can be used by DW built in functions let alone one that shows me how to create different mouse over effects for different links on a page. Im deriving all the pages from a 5 templater so I would like to apply this mouseover effects to the template.

    So my question is how do I achieve this, I don't mind hand coding it, but im not sure how I can seperate parts of the page so that a certain style only effects the links I want it to.

    So the menu items have a different set of instructions, as does the main body text of the document as well as the links in the skull box.

    Anyone out there who understood what I was trying to say?
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!

  2. #2
    SitePoint Enthusiast icrafter's Avatar
    Join Date
    Nov 2001
    Location
    Denver, CO
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that I understand what you are saying.

    This link I believe is what you want help with. Hopefully.

    http://www.htmlgoodies.com/beyond/rollover.html
    Paul K. Zorn - pzorn@interlacedmedia.com
    All help is always good and I will always try to help back.

    http://www.interlacedmedia.com/ - Full Service Graphic Design, Multimedia, Photography, Video and Web Shop.

  3. #3
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. You can create a rollover affect for the basic things like

    Code:
    <td class="roll">
    [code]
    <style type="text/css">
    <!--
    .roll:hover{ background-color:red; }
    -->
    </style>

    You can also do it using javascript. If you can pull off everything you want in CSS it will be smaller and more efficient the a lengthy javascript code. Go here for more info on javascript and css

    www.w3schools.com
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive created a style sheet with the following within it (just used the one on that link pgae provided above by icrafter to test it) ;

    <STYLE TYPE="text/css">
    a.menu:link { color: blue; text-decoration: none }
    a.menu:active { color: red; text-decoration: none }
    a.menu:visited { color: blue; text-decoration: none }
    a.menu:hover { color: green; text-decoration: underline }

    a.skull:link { color: green; text-decoration: none }
    a.skull:active { color: yellow; text-decoration: none }
    a.skull:visited { color: red; text-decoration: none }
    a.skull:hover { color: orange; text-decoration: underline }
    </STYLE>


    And Ive also included this line of text in my templates header;

    <LINK REL="stylesheet" HREF="stablewars.css" TYPE="text/css">

    But nothing is happening. Nothing has changed with me adding the style sheet so quite clearly I have done something wrong but I can't see it. Is it that you cannot apply a style sheet to a template file? Or have I just missed something?
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!

  5. #5
    SitePoint Enthusiast teknikewl's Avatar
    Join Date
    Feb 2002
    Location
    Pennsylvania, USA
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What Browser?

    It works for me in IE 5.5...are you using Netscape?

  6. #6
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean to say you can see the links in the submenu and the one in the skull image changing colour?

    Im using IE5 here, but i can't see no change to the page at all, before i added the css.
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!

  7. #7
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your CSS is fine, but it seems like the stylesheet isn't loading. I can't seem to download your CSS files either. Are you sure you're pointing to the right location for the stylesheets?

    Also, if your using an external stylesheet, you shouldn't have the <style></style> tags in it, just the CSS. I don't think that would cause a problem though (?)

    HTH

  8. #8
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <LINK REL="stylesheet" HREF="stablewars.css" TYPE="text/css">
    I am afraid Isotope is right. you href should be

    href="..\stablewars.css"

    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  9. #9
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn, its always something stupid, thanks Maelstrom

    Ok fixed that, although if any of you clicked the link you'll see that the page is still the same. Not sure why that is because the template file Im applying the css to shows the changes when I preview it, but none the files derived from the template actually have the changes implemented. Anyone know why this is? Or is it simply that I have to put the style sheet in every htm file I want it used in rather than the template file the files are going to be derived from?

    I suspect thats the reason why isotope235 coudn't download my css files, for some reason they have not been applied to the htm files.

    And one more Q, this line;

    a.menu:active { color: red; text-decoration: none }

    What does the active function actually do? From what I can see whatever colour I set it to, its not something I actually see on screen.

    This is the definition given on the site link provided by icrafter;

    a:active affects anchor flags when being clicked

    But when it was set to red, I didn't see the link change to red at all when it was being clicked?
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!

  10. #10
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL Ok, disregard the first part about the change not propagating through the template to the derived htm files. I was inserting the style sheet link at the top of the head tag, moved it down to be the last line before the end of the head tag and its working ok now. Another one of those stupid things

    Although I still haven't picked up the the purpose of the active tag.....
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!

  11. #11
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Crippler
    Although I still haven't picked up the the purpose of the active tag.....
    The pseudo-class active affects the color of links from when you click the link to when the focus goes off the link. Try clicking a link without letting go of the left mouse button -- you should see your color change.

  12. #12
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh right I see, thats what it is supposed to do, although it is not actually doing it for me. Ive set that attribute to being red, but I don't see red at all when I hold down the mouse button over the link. This is the updated css file im using;

    <STYLE TYPE="text/css">
    a.menu:link { color: #FFFFFF; text-decoration: none; font-weight: bold }
    a.menu:active { color: red; text-decoration: none; font-weight: bold }
    a.menu:visited { color: #FFFFFF; text-decoration: none; font-weight: bold }
    a.menu:hover { color: #9999CC; text-decoration: none; font-weight: bold }

    a.skull:link { color: #000000; text-decoration: none; font-weight: bold }
    a.skull:active { color: red; text-decoration: none; font-weight: bold }
    a.skull:visited { color: #000000; text-decoration: none; font-weight: bold }
    a.skull:hover { color: #000000; text-decoration: underline; font-weight: bold }
    </STYLE>


    I show you this for another reason as well, I have set the link attribute to be white in the menu, but for some reason, on my first time viewing of the page, it will always show all the links to be in blue, not bolded and underlined. Basically what is I believe the default setting. Yet once Ive clicked a link only then does the link setting kick in, to be white and bolded.

    Now I would have thought that was myabe the css didn't kick in until I clicked a link, but when I hover a link it does the mouse over effect I have defined.

    To summerise, the link attribute defined in css only seems to take effect after I have clicked the link.

    Can anyone take a look at these links to the various pages with submenu items and see why it is doing so?

    http://www.stablewars.com/htp/htp.htm
    http://www.stablewars.com/statistics/stat.htm
    http://www.stablewars.com/ppv.htm

    Apologies for being a pain guys.
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!

  13. #13
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the style tags from your .css file

    or if your editor wants them for editing, do as I did..

    /* <style> */
    .style { color:white; }
    /* </style> */

    when you use an external css file you do not need the style tags, and they seem to mess something up if there. My code-based editor did not regognize the separate file as an stylesheet so I had to use this trick.

  14. #14
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only thing that needs to be in an external stylesheet are the styles themselves. Nothing more, nothing less (hopefully ). Now, try this and tell me if it works for you. If not, it might be your browser, but TopStyle is telling me that this *should* work perfectly in IE5.

    Try it out, eh?

    Code:
    .menu a:link {
      color: #ffffff;
      font-weight: bold;
      text-decoration: none;
    }
    
    .menu a:visited {
      color: #ffffff;
      font-weight: bold;
      text-decoration: none;
    }
    
    .menu a:hover {
      color: #9999cc;
      font-weight: bold;
      text-decoration: none;
    }
    
    .menu a:active {
      color: #ff0000;
      font-weight: bold;
      text-decoration: none;
    }
    
    .skull a:link {
      color: #000000;
      font-weight: bold;
      text-decoration: none;
    }
    
    .skull a:visited {
      color: #000000;
      font-weight: bold;
      text-decoration: none;
    }
    
    .skull a:hover {
      color: #000000;
      font-weight: bold;
      text-decoration: underline;
    }
    
    .skull a:active {
      color: #ff0000;
      font-weight: bold;
      text-decoration: none;
    }

  15. #15
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked perfectly without the style tags, thanks guys

    I think having just done all this, Im starting to apprecite the power that css can bring. Although I don't like the DW built in functionality for css - seems a tad confusing.

    Thanks for the help once again, I think I'll play with this some more.
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!


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
  •