Rollovers without title

Discussion in 'CSS' started by José Manuel Rosón Bravo, Aug 22, 2006.

0
  1. #1
    Hi:

    I am intended upon a development including rollovers with images but with no letters using CSS. Thus, I would like the same result as using rollovers with Javascript coding generated, for example, by Dreamweaver.

    I have tried once and again, by I am afraid that my knowledge of and practice in CSS programming is not enough to reach the desirable result.

    If such a result is possible using just xhtml and css, for I want a code according to the purest code standards.

    For starting, the example of html code would be like this:

    (……)

    <DIV id=navbar>
    <UL>
    <LI><A href="home.html/">Lorem ipsum</A>

    (……)


    And the CSS would be:

    (……)

    A:link {
    COLOR: #666666; BACKGROUND-COLOR: #95b7cd; TEXT-DECORATION: none
    }
    A:visited {
    COLOR: #666666; BACKGROUND-COLOR: #95b7cd; TEXT-DECORATION: line-through
    }
    A:hover {
    BACKGROUND-COLOR: #aaddee
    }
    A:active {
    BACKGROUND-COLOR: #3cc7f0
    }

    (…)

    #navbar {
    FONT-WEIGHT: bold; LEFT: 0px; WIDTH: 198px; POSITION: absolute; TOP: 0px
    }
    #navbar UL LI A:link {
    DISPLAY: block; PADDING-LEFT: 20px; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px solid; TEXT-DECORATION: none
    }
    #navbar UL LI A:visited {
    DISPLAY: block; PADDING-LEFT: 20px; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px solid; TEXT-DECORATION: none
    }
    #navbar UL LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
    }
    #navbar UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
    }

    Now, I would like to change the “lorem ipsum” text in the anchor <LI><A href="home.html/">Lorem ipsum</A> for just an image that we shall call IMAGEA that would eventually change to IMAGEB in Hover.

    Is this effect possible?

    In the other hand, is it possible to reach an acceptable result in the most important Internet browsers?

    Thanking you in advance for all your replies to this subject,

    Best wishes

    José Manuel Rosón Bravo (Northern Spain)
     
    José Manuel Rosón Bravo, Aug 22, 2006 IP
  2. Mano70

    Mano70 Peon

    Messages:
    42
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do you wan't the Lorem Ipsum text to be shown or not? Didn't quite understand your meaning. Anyway, if the text are shown you can use this solution:
    http://wellstyled.com/css-nopreload-rollovers.html

    If you wan't to hide the text (and have the text on the image instead) let me know, I have some code lying around for that.
     
    Mano70, Aug 22, 2006 IP
  3. José Manuel Rosón Bravo

    José Manuel Rosón Bravo Active Member

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #3
    Hi:

    No, I do not want the Lorem Ipsum text shown. I am seeking for the way to implement a rollover by using just images (two of them). A first image called IMAGEA that would change to IMAGEB in hover with html and css.

    Is that possible?

    Thank you.
     
    José Manuel Rosón Bravo, Aug 24, 2006 IP
  4. Mano70

    Mano70 Peon

    Messages:
    42
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You should use only one image for the rollover (if not the image will flicker on rollover the first time). Use the same concept as in the link in my previous post.

    Below you will find some example code and a attached image to a horizontal example.

    CSS:
    ul#topmenu li {
    display: inline;
    float: left;
    overflow: hidden;
    }
    ul#topmenu li a {
    display: block;
    overflow: hidden;
    padding: 44px 0 0 0;
    height: 0; /* For IE */
    background: no-repeat 0 0;
    }
    ul#topmenu li a:hover {
    background-position: 0 -44px;
    }
    #contact {
    background: url(/layout/meny/kontakt.gif);
    width: 158px;
    }
    HTML:
    <ul id="topmenu">
    <li><a href="/" id="contact" title="Contact">Contact</a></li>
    </ul>

    As you see I have used the concept from the "Fast Rollovers Without Preload" example, but I hide the text.

    Each link must have a unique id used in the link, in this example id="contact".
     

    Attached Files:

    Mano70, Aug 24, 2006 IP