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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Im VERY new to web design and need some rollover help

    Hey all, great to be here. Like I said I'm very new to all of this so go easy...

    Im trying to make it so that when someone rolls over a link on the left side of the page a corresponding image appears next to it. I know this shouldn't be hard, but like I said....I need help.

    Heres the site if youre curious. Nothing fancy. Cause I don't know how to do fancy yet, haha.

    www.radiatormusictransmedia.com

    THANKS!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jarnld,
    What you're describing is called a disjointed rollover, or at least that is one method of doing it. Here's a pretty simple example - http://nopeople.com/CSS/disjointed_rollover/index.html
    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
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    dont see a picture on the left, so im guessing left is the div you will put it in so try this

    Code:
    #left img:hover {
    position your new pic and put the code for it here
    }
    got to admit tho, im rather new to this stuff myself, oyu might have to make the img a link to accomplish this
    Last edited by mjbasford; 06-09-2010 at 01:50 AM. Reason: thought of something else

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a bunch... let me try that and well see if it works

  • #5
    New Coder
    Join Date
    May 2010
    Location
    Midwest, USA
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Im trying to make it so that when someone rolls over a link on the left side of the page a corresponding image appears next to it. I know this shouldn't be hard, but like I said....I need help.
    I assume you're talking about the Menu of site links.

    You can add a nested unordered list with your image source, description, and size in it.
    Here's an example of adding an image source listing to your "Home" link:

    Code:
    <li><a href="http://www.radiatormusictransmedia.com/">Home</a>
            <ul>
              <li><img src="ImageSource" alt="ImageDescription" width="ImageWidthInPX" height="ImageHeightInPX" /></li>
            </ul>
    </li>
    You would then just have to add the following selectors to your CSS:

    Code:
    #left li ul {
    	display: none;
    }
    #left li:hover ul {
    	list-style: none;
    	display: inline;
    }
    #left li {
    	position: relative;
    	display: block;
    }
    This approach works any time you want to put a submenu to any menu item. There is an issue with IE6 not handling the li:hover selector for any element other than a, but all this means is that the few people using IE6 won't see the image. The link still works.

    If you're determined to cater to IE6, you can check out two different approaches to handling the IE6 quirk at http://www.htmldog.com/articles/suckerfish/dropdowns/ and http://www.xs4all.nl/~peterned/csshover.html

    Hope this helps.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great. You get as more as you want here


  •  

    Posting Permissions

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