PDA

View Full Version : Rollover Menu SOS!

g10tto
10-13-2007, 12:30 PM
This is a website that is due today. My problem is I don't know squat about Java and our Java guy is on vacation.

All I need is to replace bullets on a list with images so that when you rollover the TEXT of a category under the list, a small image pops up to the left. Again, the image exists only AFTER you rollover the text.

I have the image and the text, but I need to know what the code will be and what src links go where.

Any help is IMMENSELY appreciated!
BonRouge
10-13-2007, 12:53 PM
Can you post a link to your page?
g10tto
10-13-2007, 12:56 PM
it goes live today, so it's not yet published.

I need to remove the bullets altogether and have the categories aligned similiarly, with a rollover effect that brings up an image in place of the bullet.
BonRouge
10-13-2007, 01:19 PM
Yes, it's CSS.
Something like this:#mylist a:hover {
list-style:none;
background:url(image.jpg);
}
g10tto
10-13-2007, 01:32 PM
This works, but I'm not using a bulleted list. I've already formatted the CSS so it aligns like a list, where each category has a specifc margin and sits one on top of the other.

What I basically need is an image to the left of each category that is off when the mouse is not rolled over the category text and on when it hovers over the category text.

The actual HTML categories look like this:

<div class="submenu">
<font color="green" size="1">
<a href="specials.html">Monthly Specials</a><br />
<a href="pl-1.html">Plaques</a><br />
<a href="cyl-i.html">Crystal Awards</a><br />
<a href="tr-i.html">Trophies</a><br />
<a href="ri-i.html">Ribbons/Medals/Rosettes</a><br />
<a href="acr-i.html">Acryclic Awards</a><br />
<a href="http://yp.bellsouth.com/sites/alscustomframes/">Gold Records (RIAA)</a><br />
<a href="silver-i.html">Silver/Pewter Awards</a><br />
<a href="ap-1.html">Apparel</a><br />
<a href="specialty.html">Specialty/Promotional <br /> Items</a><br />
</font>
</div>



and should have <img> tags before each one with rollover commands inside, so that they are to the left and only appear when the text has a mouse hovering over.


If there is a better solution, please let me know.
BonRouge
10-13-2007, 01:36 PM
.submenu a {
padding-left:1em;
}
.submenu a:hover {
background:url(image.jpg);
}
g10tto
10-13-2007, 01:48 PM
Hmm, it works as far as the padding is concerned, but the image (trophy_on.gif) isn't loading when it hovers.

This CSS formula should work. Is there any reason why it might not besides a missing image file?
BonRouge
10-13-2007, 02:02 PM
Is there any chance of you uploading the page and showing it to me?
g10tto
10-13-2007, 02:31 PM
http://cteaguedesign.com/abc-beta/test.htm

this is a prototype page.

as you can see, the categories under Products need to have pop up images beside them.

Also, once implemented, these images will be scaled down.

Thank you for helping me get this far! :)
g10tto
10-13-2007, 03:18 PM
I was able to get the rollover to take effect by using the CSS as embedded in the <head> tags of the page.

However, it still needs to popup off to the left of the word. Any idea how to accomplish that?
BonRouge
10-14-2007, 02:26 AM
Here's one way...

Add a span to each of the links:
<a href="http://cteaguedesign.com/abc-beta/specials.html"><span></span>Monthly Specials</a>
Then, add this to your stylesheet:.submenu a {
position:relative;
}
.submenu a span {
display:none;
}
.submenu a:hover span {
display:block;
position:absolute;
margin-left:-65px;
margin-top:-20px;
width:65px;
height:65px;
background:url(http://cteaguedesign.com/abc-beta/trophy_on.gif);
}