Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS – Change Image on Link Hover

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #32333
    Lockh33d
    Member

    Hi guys, I am fairly new to CSS and I’m having some difficulty that I was hoping someone might be able to shed some light onto.

    What I am trying to do is get an empty div which is contained inside another div to change it’s background image when I hover over a few links I have placed beside the empty div. Do I use a class for something like this?

    “Image1” link would change the background Image of #emptyDiv to image1.png, “Image2” link would change it to image2.png and so forth.

    This is the code I have so far as an example.

    CSS:


    h1 {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    }

    #mainDiv {
    position: relative;
    top: 5px;
    left: 5px;
    height: 200px;
    width: 200px;
    background-color: #CCC;
    }

    #emptyDiv {
    float: right;
    position: absolute;
    top: 5px;
    left: 75px;
    height: 50px;
    width: 50px;
    border: groove;
    }

    HTML:



    Any help is greatly appreciated!

    Thanks =)

    #51537
    angus
    Participant

    Doing this in CSS would be quite difficult, and would most likely require many extra divs and unsemantic markup. It would be best to use javascript, and bind a function to the hovering over of a link that changes the background image. Here’s some quick code, haven’t had a chance to test it, but it should work.

    HTML Markup

    We can store the path to the image we want the background to be changed to in the rel property of the link. We’ll access this with javascript later.

    CSS

    #main {
    width: 600px; /* Whatever you want */
    height: 300px; /* Whatever you want */
    /*** You could also set any background styling that is common to all the hover backgrounds; for example ***/
    background-repeat: none; /* Stops the background image from repeating */
    /* Makes the background cover the entire div for browsers that support it (Safari 3+, Any Chrome, IE9+, Opera 10+, Firefox 3.6+ */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    The Javascript

     /* Import jQuery */

    If you want to learn more about the awesome jQuery library, Jeffrey Way had an awesome screencast series on it.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.