WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts

WeLoveCSS > WEB DESIGN > CSS > Some advanced hover help

  Thread Tools Display Modes
Old 12th November 12, 04:55 AM   #1
WLC Member
Join Date: Nov 2012
Posts: 1
Default Some advanced hover help

Hello fellow CSSers,

I've never done CSS work like this before, I don't really know where to start, so if someone could point me in the right direction that would be great.

I need to create a menu system using images - similar to the "symptom checker" you see on WebMD.com - except I can't use Flash.

I have images of a body illustration and the user needs to be able to select parts of the body by hovering. When you click on a body part, a specific menu will populate. How do I use CSS magic for special shapes like this?

I've attached a picture:


Last edited by scribblesteve; 12th November 12 at 04:56 AM. Reason: image not showing; adding link
scribblesteve is offline   Reply With Quote
Old 12th November 12, 07:55 AM   #2
WLC Lover
Phreaddee's Avatar
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default Re: Some advanced hover help

I would use an image map for that more than likely, unless there is other requirements you haven't yet stipulated.

basically you get your image as the background.
and set coordinates for the anchors to go.
when you click (or hover) over that particular area you can than bring up the section which includes the information.

an example of an image map I've done recently can be found on this page.
when you click on a regions name it changes the stylesheet to update the header eg.
<img width="549" height="351" usemap="#Map" alt="regions" src="/Images/UserUploadedImages/192/regions-map-new.png" style="border-width: 0px; border-style: solid;" />
<map name="Map">
<area onclick="setActiveStyleSheet('default');" href="/" coords="22,22,252,67" shape="rect" />
<area onclick="setActiveStyleSheet('northernrivers');" href="/" coords="345,28,534,48" shape="rect" />
<area onclick="setActiveStyleSheet('northcoast');" href="/" coords="367,74,534,91" shape="rect" />
<area onclick="setActiveStyleSheet('newengland');" href="/" coords="295,91,534,110" shape="rect" />
<area onclick="setActiveStyleSheet('midcoast');" href="/" coords="367,110,534,129" shape="rect" />
<area onclick="setActiveStyleSheet('upperhunter');" href="/" coords="359,129,534,149" shape="rect" />
<area onclick="setActiveStyleSheet('hunterv');" href="/" coords="442,149,534,168" shape="rect" />
<area onclick="setActiveStyleSheet('skillswest');" href="/" coords="376,168,534,186" shape="rect" />
<area onclick="setActiveStyleSheet('shiregroup');" href="/" coords="376,186,534,205" shape="rect" />
<area onclick="setActiveStyleSheet('southerntablelands');" href="/" coords="322,205,534,224" shape="rect" />
<area onclick="setActiveStyleSheet('illawarra');" href="/" coords="390,224,534,242" shape="rect" />
<area onclick="setActiveStyleSheet('shoalhaven');" href="/" coords="376,242,534,260" shape="rect" />
obviously that's not exactly what you are after, but you can see the basic syntax to make an image map.
Phreaddee is offline   Reply With Quote

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 07:55 PM.

Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.