Solved

Change menu hover state looks based on image

Posted on 2010-11-22
10
368 Views
Last Modified: 2012-05-10
At http://tinyurl.com/2d4dlx8 I am working on a site. The menu the way it is is not exactly what the client wants. See  menu correct style for a view of what is needed. I am having a hard time figuring out how I can do the hover part as the hover display seems to to need changes not only on the menu item hovered on, but on the previous one as well as a part of it should match the same color as the hover state color. How can I manage this?
0
Comment
Question by:rhandalthor
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34187746
I'm not sure of understanding what do you need, could you please explain it a bit more?
0
 

Author Comment

by:rhandalthor
ID: 34187774
Now when I hover on a menu item the color changes. But not like in earlier attached image. In the earlier attached image - menu as it should become - the color just above and next the curved part is also changed on hover. But the way the site's menu is created I do not see how I can adjust the color just surrounding the curved part on hover on its neighboring menu item...
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34187885
Ok... now I think I understand you.

So your buttons have two differenciated parts and you need to change both on hover event.

We need to know how are you doing the curved part above the buttons, to think in a way to change it at the same time you change the button itself.

I suppose that you change button color through CSS, so when you get your mouse over a button the hover style gets active and button changes it's color. And your problem is that you can't generate this style at same time for button and it's curved part above.

If this is the scenario, you'll need some type of client code to change the style on the curved part also.

I recommend you to avoid hover styles and define two classes on you stylesheet. One class for standard style and another one for "hover" style.

Then, through javascript, you can change your button's class and your curved part's class on button onMouseOver event (backing to standard classes when onMouseOut event fires).

Make me know if you need further assistance to reach this behaviour.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:rhandalthor
ID: 34188158
@ bardoBrave See earlier added link http://tinyurl.com/2d4dlx8 so you can see how it is all set up at the moment. I use images and CSS for hover. I prefer to make the adjustments as minimal as possible of course.
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34190339
Ok then.

You need two images for the curve (one normal and one for hover style) and two style classes for the button.

On button onMouseOver event, you change the class of your button and the image background of the curved part (or the url of the image if i isn't a background).

On button onMouseOut event you change back styles and images to normal styles.
0
 

Author Comment

by:rhandalthor
ID: 34190937
Basically I need to have two images change on hover to achieve this the way I see it and how can a trigger a hover on two images when I hover on one? I mean the hover button should change color and a piece (curve background) of button left of hove item. A larger hover image with a z-index covering its neighbor to the left maybe? Maybe I need to skip one night and try again. But I really do not see it yet .
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34194414
When your object is hovered you can fire a javascript function, this javascript function can get the curved part object and change it's background or image url, so it swaps to a hovered color version. On onMouseOut event you can revert back the color to original through another javascript function.

It's possible that you need to change both styles (button and curved image) through javascript, as changing one relying on stylesheet and another one through code may result in a slight delay in the change that could result a bit weird on the screen.
0
 

Author Comment

by:rhandalthor
ID: 34194532
Yeah, I guess JavaScript would be the only way to go. Too bad that is my real weak spot. I use jQuery and ready-made plugins that need basic adjustments most of the time. Would not really know where to start to manipulate two buttons to create a simultaneous hover effect that is smooth. And the menu is already using a Sprybar JavaScript so to add JavaScript to that might prove difficult. For me anyways. Any tips where to start Bardobrave?
0
 
LVL 19

Accepted Solution

by:
Bardobrave earned 500 total points
ID: 34194670
Ok, lets see.

If you are using jquery things get easier.

Your buttons should have an id to identify them. Also, your curved parts should have and id too.

On your buttons mouseover event you attach a change of style.

$("#button1Id").mouseover(function () {
       $("#button1Id").addClass("styleClassOver");
       $("#button1IdCurvedPart").addclass("styleClassOverCurvedPart");
       $("#button1Id").removeClass("styleClassNormal");
       $("#button1IdCurvedPart").removeClass("styleClassNormalCurvedPart");
});

$("#button1Id").mouseout(function () {
       $("#button1Id").addClass("styleClassNormal");
       $("#button1IdCurvedPart").addClass("styleClassNormalCurvedPart");
       $("#button1Id").removeClass("styleClassOver");
       $("#button1IdCurvedPart").removeClass("styleClassOverCurvedPart");
});

styleClassNormal, styleClassNormalCurvedPart, styleClassOver and styleClassOverCurvedPart will be CSS style classes that you define on your stylesheet to render buttons and it's curved parts in normal mode and in hovered mode. If you represent curved parts through images instead of changing styles you can use $("#button1IdCurvedPart").attr("href","pathToHoverCurvedImage"); to swap between normal and hovered images inside the functions.

You will need to add a pair of functions like above ones to each one of your buttons, this functions will link hover event behaviour of buttons and curved parts.

0
 

Author Comment

by:rhandalthor
ID: 34198377
Will work on that as soon as possible. Thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question