How to best setup an image rollover state for site navigation

I have a site that must be rebuilt to be responsive.  The new design will be close to the current design, and will use images in two different states for a vertical navigation menu. I can either use two larger images or 7 smaller images. In each case I would use css to reposition the image in the different stacked divs depending on which state is displayed. Rollover, active and clicked are the same.

Option 1: one larger image of all rollover states and one large image for all link state, using css to reposition the image in each of 7 divs.
Option 2: create a link and rollover state for each of 7 divs using 7 different images. Each image will have two states and be repositioned using css.

Which option would be the most efficient for site performance or would it matter? Here's a link to the current site: http://themaidplace.com
weknowjackAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I wouldn't use the rollovers for the mobile version. I would make the mobile version simple info based with a normal collapsible menu (which is what mobile users have come to expect).

If you do decide to go with that menu my feeling is use a sprite - all images (rollover and not) in a single image that is repositioned as required.

Results in 13 (assuming 7 menu items) less requests going back to the server.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom BeckCommented:
Agree with Julian on the single sprite image to reduce requests. Sample using a single sprite:

http://jsfiddle.net/jfh2sdxm/
0
Slick812Commented:
greetings weknowjack, I looked at your site on my android phone in the default browser, and I could see it, an use the "menu" there (on the right in the home page),  to go to the the Five other pages as "packages", "about us", "our rates" etc.

But this question about the two options as - "one larger image" and the other as - "each of 7 divs using 7 different images", , , makes no sense regarding using CSS and repositioning for a newer "responsive" web site design.

The CSS for a new site design to be responsive, means you change the entire site, not just the menu, for different "size" width and height views in a "phone", a tablet, and a laptop. You say nothing about the "New Design" site arrangement changing when the "Phone" narrow vertical view (portrait view) and the repositioning of ALL the elements in the site, including the menu in the Phone view.
0
weknowjackAuthor Commented:
julianH answered my original question. There are differing opinions on whether or not to use images in mobile navigation. In this case, the preservation of the design is more important than the simplified functionality for mobile users. Thanks.
0
Julian HansenCommented:
You are welcome - good luck with your project.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.