onmouseover/onmouseout effects without javascript

Discussion in 'CSS' started by CSSLearner, May 7, 2007.

0
  1. #1
    Hi all,

    I'm trying to achieve the following goal: I want to use the "a" tag, and inside this tag I want to use the "img" tag, but I would like to apply that onmouseover/onmouseout effect that we easily have using javascript, but I would like to achieve the same effect only using css. Actually, I've already achieved such a goal, but I think I am doing that in a not so good way. See below:

    <style type="text/css">
    .effect, .effect:visited, .effect:active {
    width: 142px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("button_out.gif");
    }

    .effect:hover {
    width: 142px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("button_over.gif");
    }
    </style>

    <a href="http://www.something.com" class="effect">
    <img border="0" width="142px" height="20px"
    src="very_little.gif" vspace="0" hspace="0"/>
    </a>

    The size of button_out.gif and button_over.gif is 142px and 20px. The size of very_little.gif is...uh... a very little size. The fact is that I need to use this very_little.gif to achieve my goal, and I would not like to use this artifice. I don't even know why exactly the very_little.gif image is necessary!

    Please, help me!

    PS: Sorry for crossposting. I posted the same question here:
    http://www.csscreator.com/node/22000
     
    CSSLearner, May 7, 2007 IP
  2. clicyu

    clicyu Peon

    Messages:
    22
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    if u wanna use only css for that first u must know that u can use :hover only for a link.U dont need to put <img> in html,u only need to define it in CSS, like background.

    a.effect{
    width: 142px;
    height: 20px;
    background: url("button_out.gif") no-repeat center center;
    }
    a.effect:hover {
    width: 142px;
    height: 20px;
    background: url("button_over.gif") no-repeat center center;
    }
    U 2 do the same thing, just a little mess-up.
    html <!-- u need to remove img from here -->
    <a href="http://www.something.com" class="effect">something</a>
    if u dont wanna to see "something", add this line in css:
    a.effect{
    width: 142px;
    height: 20px;
    background: url("button_out.gif") no-repeat center center;
    text-indent: -9999px;
    }
    and that will move text"something" 9999px to the left and out of screen.
     
    clicyu, May 7, 2007 IP
  3. CSSLearner

    CSSLearner Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you very much for your tips!!!

    Actually, adding the "display: block" solved the problem. I don't even need that "text-indent: -9999em". See below the final solution that works perfectly:

    a.effect {
    width: 142px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("button_out.gif");
    display: block;
    }

    a.effect:hover {
    width: 142px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("button_over.gif");
    display: block;
    }

    <a href="http://www.something.com" class="effect" />
     
    CSSLearner, May 8, 2007 IP