Announcement

Collapse
No announcement yet.

CSS question or two

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS question or two

    I have LinkA and LinkB

    My link tags look like this:
    Code:
    A:link {text-decoration: none; color: #FFFFFF}
    A:visited {text-decoration: none; color: #FFFFFF}
    A:active {text-decoration: none}
    A:hover {text-decoration: none; color: #000000;}
    How do I change the colors for LinkB? For instance, LinkA is white and hover is black but I want LinkB to be black and hover to be blue. How do I do this?

    Thanks!
    Ladies and gentlemen, take my advice, pull down your pants and slide on the ice.

  • #2
    OK, I figured it out looking around the web. Just in case you are interested:
    Code:
    <style type="text/css">
    a.one:link {color: #ff0000}
    a.one:visited {color: #0000ff}
    a.one:hover {color: #ffcc00}
    
    a.two:link {color: #ff0000}
    a.two:visited {color: #0000ff}
    a.two:hover {font-size: 150%}
    
    a.three:link {color: #ff0000}
    a.three:visited {color: #0000ff}
    a.three:hover {background: #66ff66}
    
    a.four:link {color: #ff0000}
    a.four:visited {color: #0000ff}
    a.four:hover {font-family: monospace}
    
    a.five:link {color: #ff0000; text-decoration: none}
    a.five:visited {color: #0000ff; text-decoration: none}
    a.five:hover {text-decoration: underline}
    </style>
    Ladies and gentlemen, take my advice, pull down your pants and slide on the ice.

    Comment


    • #3
      and I arrive two hours too late to answer,

      ..are you going to show us the site when you have finished?

      Comment


      • #4
        ummm, well, go easy as I just started learning CSS a few days ago. I used CSS to create all "tables". I guess they are called boxes in CSS?



        BTW, it looks a tad better in FireFox. Feel free and give me any pointers as I really have no clue what I am doing.
        Ladies and gentlemen, take my advice, pull down your pants and slide on the ice.

        Comment


        • #5
          OK, I'm stuck again. Is there a way to do mouseovers with images in CSS or do I need to start learning javascript? I've looked around the web but haven't come up wtih any clear answers. thanks for the help!

          Dave
          Ladies and gentlemen, take my advice, pull down your pants and slide on the ice.

          Comment


          • #6
            There are several ways to do CSS image rollovers; however, it requires a shift in the way one incorporates images into their page design. Basically, if you want to change an actual image element from one image file to another, then, yes, you shall want to invest some time in the learning of the necessary Javascript.

            If you're having trouble finding good source material, then I suggest looking through A List Apart and HTML Dog. Specific to your inquiry though, here are a some articles, from ALA, to get you started:

            - CSS Design: Mo' Betta Rollovers
            - Dynamic Text Replacement
            - CSS Sprites: Image Slicing's Kiss of Death
            - Night of the Image Map

            The first applies specifically to what I think you're on about, the others might give you some more ideas to work with.
            “And, remember: there's no 'I' in 'irony'” ~ Merlin Mann

            Comment


            • #7
              Big Edit.

              Two options.

              1. Effect current Div.
              <div id="name" class="defaultclass" onmouseover="this.className='hoverclassr'; this.style.cursor='pointer'" onclick="location.href='link.htm'" onmouseout="this.className='defaultclass'" title="title>Text</div>

              Images/colours borders etc set in the css.

              Buttons here created as above.

              2. Effect image on page

              <a href="link.htm" onmouseover="elementname.className='hoverclass'" onmouseout="elementname.className='defaultclass'" title="title">Text</a>

              Images/colours borders etc set in the css.

              Region hovers here created as above
              Last edited by dbdg; 17 October 2005, 01:53.

              Comment


              • #8
                ...and I thought that this was going to be a Counter Strike Source thread

                Comment


                • #9
                  Thanks for the info JW & dbdg. I ended up using a javascrpit that I found on the web, but I'm now stuck again since trying to use the javascript more than once messes things up Do you guys know javascipt at all?

                  OK, I get the first image and rollover image to work fine. It's when I am trying to do a second image with a rollover image, it causes both images to stop working. Here is the cjavascript I am using:
                  Code:
                  script language="javascript" type="text/javascript">
                  
                  normal_image = new Image();
                  normal_image.src = "http://www.hilliardhouse.net/images/icons/house.gif";
                  
                  mouseover_image = new Image();
                  mouseover_image.src = "http://www.hilliardhouse.net/images/icons/house1.gif";
                  
                  <!-- repeat the 4 lines above for any subsequent images. -->
                  
                  function swap(){
                  if (document.images){
                  for (var x=0;
                  x<swap.arguments.length;
                  x+=2) {
                  document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
                  }
                  }
                  }
                  </script>
                  Here is the html code, I am using:
                  Code:
                  <div id="header1">
                  <a href="http://www.hilliardhouse.net/" onMouseOver="swap('name_of_img','mouseover_image')" 
                  onMouseOut="swap('name_of_img','normal_image')">
                  <img class="icon-position" name="name_of_img" src="http://www.hilliardhouse.net/images/icons/house.gif" border="0"></a></div>
                  Now, I don't know javascript but I can understand the jist of what it is doing. When I try to repeat the first 4 lines in the javascript, and add the html code for the second image, and of course change all of the links to the appropriate new image, it causes the rollover features to stop working on both images. I can only guess that I need to change the second set of 4 lines to be specific, but how?

                  Thanks for all the help so far, very much appreciated
                  Ladies and gentlemen, take my advice, pull down your pants and slide on the ice.

                  Comment


                  • #10
                    Here is what one image looks like that is working:




                    This is what it looks like with two images failing. I realize the positioning of the second image is off, but I am not worried about that right now. I just wnat to get the rollover effect to work on two images. Look what happens when you rollove the second image, it disappears!

                    Ladies and gentlemen, take my advice, pull down your pants and slide on the ice.

                    Comment


                    • #11
                      both rollovers work for me in the second example. try clearing your browser cache.
                      P.S. You've been Spanked!

                      Comment


                      • #12
                        Both work for me as well, as does Pacman!
                        Join MURCs Distributed Computing effort for Rosetta@Home and help fight Alzheimers, Cancer, Mad Cow disease and rising oil prices.
                        [...]the pervading principle and abiding test of good breeding is the requirement of a substantial and patent waste of time. - Veblen

                        Comment


                        • #13
                          When I first read that you guys had no problems with the rollovers, I thought it might just be that it works in IE and not Firefox, but after coming to work and testing it in both IE and Firefox, it DOES work! Sweet. So something is wrong with my browser at home. I'll have to try clearing the cache and see what happens.

                          And yes, Pacman can be fun I've played it myself several times
                          Ladies and gentlemen, take my advice, pull down your pants and slide on the ice.

                          Comment


                          • #14
                            And that is why I recommended using CSS
                            “And, remember: there's no 'I' in 'irony'” ~ Merlin Mann

                            Comment


                            • #15
                              Originally posted by Jesterzwild
                              And that is why I recommended using CSS
                              I tried to find a simple solution but I either don't understand how to do it, or all of the examples I saw are way overboard. I figured there would be a n easy way to do an image rollover in CSS, but I have yet to see it.
                              Ladies and gentlemen, take my advice, pull down your pants and slide on the ice.

                              Comment

                              Working...
                              X