...

View Full Version : Im VERY new to web design and need some rollover help



jarnld
06-09-2010, 01:15 AM
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!

Excavator
06-09-2010, 01:47 AM
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

mjbasford
06-09-2010, 01:48 AM
dont see a picture on the left, so im guessing left is the div you will put it in so try this


#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

jarnld
06-09-2010, 01:50 AM
Thanks a bunch... let me try that and well see if it works

tinimic
06-09-2010, 03:16 AM
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:


<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:


#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/ (http://www.htmldog.com/articles/suckerfish/dropdowns/) and http://www.xs4all.nl/~peterned/csshover.html

Hope this helps.

benneyquenue
06-09-2010, 03:56 AM
Great. You get as more as you want here



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum