Mouseonclick show/hide divs imagemap? [Jquery/css]

Question

I've been looking at a bunch of different questions and answers here regarding a project I have to do. I'm still unsure of the best way to go about it.

At this point I have a large image with one part of the image to be cut up into 5 uneven parts. Each part/section is a category. When it is clicked the color of the section changes and some images and text should be displayed to the right of the image in a separate div. I'm pretty much a newbie to jquery but I have a background in js and css.

I'm unsure if highlighting of the sections (onmouseover) of the image will be needed. But would love that possibility as well.

I want to know if an image map or pagx,pagey coordinates for the onclick events should be used? Also, how can I replace the section with the highlighted version?

I guess I would like to replace the section with another image that shows the user that he clicked on that section.

I would prefer not to use a plugin just straight coding.

Answer 1

If you really are stuck on how to start coding something like described on your question, I believe that no answer will ever be good enough, but to point you on some path (right or not):

Here a working example of a Imagemap rollover using jQuery.

Also:

Another tutorial on how to build a interactive image map with Jquery!

Those two provide you with a starting point to what you are describing!

Best of luck to your work!

Answer 2

You really should provide some code, but I think image maps are better solution. Here is demo of image map. Give it a look and you will see if this solution is for you.