Solved

Change menu hover state looks based on image

Posted on 2010-11-22
10
360 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
  • 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
 

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now