Simple rollover on menu item?

General questions relating to Joomla! 2.5. Note: All 1.6 and 1.7 releases have reached end of life and should be updated to 2.5. There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Locked
lialeaves
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 135
Joined: Sat Jan 07, 2012 4:53 pm

Simple rollover on menu item?

Post by lialeaves » Mon Jun 18, 2012 1:14 am

Hi -

I have a menu with images and would like the images to rollover when highlighted.

Is there a way to create rollover images using CSS?

thanks,
Liam

User avatar
coaleb
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 185
Joined: Fri Mar 16, 2012 11:40 pm
Location: California
Contact:

Re: Simple rollover on menu item?

Post by coaleb » Fri Jun 22, 2012 3:37 am

Yes, but only as a background image. In other words, you need the "image" to actually be a div container with a background image. For instance, if you have an image that is 200 x 200, you would make a div container 200 x 200 with your image as the background, like this:

HTML:

Code: Select all

<div class="rollover"></div>
CSS:

Code: Select all

.rollover {width:200px;height:200px;background-image:url('images/yourimage.png');}
then you would create the roll-over like this:

CSS:

Code: Select all

.rollover:hover {background-image:url('images/yourimage2.png');}
There's a wealth of information on the web about this, too.

good luck!
Best Regards,
Brian Coale
Simpl Extensions: http://extensions.joomla.org/extensions ... play/24407

lialeaves
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 135
Joined: Sat Jan 07, 2012 4:53 pm

Re: Simple rollover on menu item?

Post by lialeaves » Thu Jun 28, 2012 11:26 pm

My menus are set to image in the admin menu item. The images look good, and the links work, now would like the images to rollover on hover - is this possible? I've put the #categories ul li a:hover in the LInk CSS, but it is not functioning.

This is what's in the CSS:
#rollover ul {
display:table-row; }

#rollover ul.menu li {
display:inline; }

#categories ul li a:hover {
width:286px;height:160px;
background-image:url(../images/box1r.jpg); }

thanks!

User avatar
coaleb
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 185
Joined: Fri Mar 16, 2012 11:40 pm
Location: California
Contact:

Re: Simple rollover on menu item?

Post by coaleb » Fri Jun 29, 2012 9:04 pm

It looks as though you declared the roll-over image, but not the base image.

For instance, if we assume that your roll-over image is "box1r.jpg" and your base (non-rolled-over) image is "box1.jpg", then the code would look something like this:

Code: Select all

#categories ul li a {
width:286px;height:160px;
background-image:url(../images/box1.jpg);	}

#categories ul li a:hover {
width:286px;height:160px;
background-image:url(../images/box1r.jpg);	}
Notice how one anchor has the ":hover" declaration while the other doesn't?
Best Regards,
Brian Coale
Simpl Extensions: http://extensions.joomla.org/extensions ... play/24407

lialeaves
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 135
Joined: Sat Jan 07, 2012 4:53 pm

Re: Simple rollover on menu item?

Post by lialeaves » Fri Jun 29, 2012 9:28 pm

coaleb wrote:It looks as though you declared the roll-over image, but not the base image.


Notice how one anchor has the ":hover" declaration while the other doesn't?
yes, I left out the base image because the image was being described in the Menu manager. What you're saying is that I should take out the image from menu manager and add it to the CSS, and put "categories" in the menu manager CSS link type?

lialeaves
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 135
Joined: Sat Jan 07, 2012 4:53 pm

Resolved: Simple rollover on menu item?

Post by lialeaves » Fri Jun 29, 2012 10:39 pm

Figured it out!

When removing the image from the menu manager a text link is automatically inserted. To avoid the text link, I replaced the image in the menu manager with a 1 pixel gif. Now you can see the CSS image and the rollover.

Thanks for your CSS help on this!
Last edited by lialeaves on Wed Jul 04, 2012 11:07 pm, edited 1 time in total.

User avatar
coaleb
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 185
Joined: Fri Mar 16, 2012 11:40 pm
Location: California
Contact:

Re: Simple rollover on menu item?

Post by coaleb » Tue Jul 03, 2012 6:04 am

Sweet! I'm glad it got figured out :)
Best Regards,
Brian Coale
Simpl Extensions: http://extensions.joomla.org/extensions ... play/24407


Locked

Return to “General Questions/New to Joomla! 2.5”