Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Help, rollover image

    hey, im trying to create a rollover image, ive created code that does this, however when my rollover image appears the original stationary image apperas above it also, how do i get rid of it, can you help??? code is below>>


    <style type="text/css">
    .rollover a { display : block;
    width : 120px;
    height : 120px;
    background-image:url( dom.jpg ); }

    .rollover a:hover { display : block;
    width : 120px;
    height : 120px;
    background-image:url( dom1.jpg ); }
    </style>



    cheers!!!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello mintycow123,
    There is not much we can tell from that little bit of code and no image. A link to the test site would make it a lot easier to help you.

    I can suggest a demo that shows how it's done, see CSS rollover here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 655 Times in 654 Posts
    You need both of your images combined into a single image. The dom.jpg at the top of the new image with dom1,jpg under it. This is called a sprite.

    Your css code displays only part of your new image controlling the area its shown in and what part of the image is shown.

    Read this for step by step instructions:
    http://www.tutorio.com/tutorial/pure...mage-rollovers

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    if you have dreamweaver, it has a built in rollover image thingy.
    Insert > Media > Rollover Image
    Although id just recommend doing what sunfigher said.


  •  

    Tags for this Thread

    Posting Permissions

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