Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have the image below and need to create a rollover for each "piece" or arrow in the circle. Because the image isn't rectangular, it boggles how me how I'm going to do this without having badly overlapping pieces. As you can see from the image below, the slices will overlap each other (quite a bit), which will not be good for the rollover.

Does anybody have any ideas as to how to accomplish this without resorting to Flash or HTML5? The majority of our site's users use dinosaur browsers that don't support HTML5.

Here is the image:

Wheela

share|improve this question
    
Originally flagged for move to the design site, but should probably just go to SO and be closed as dupe of this question. @Hoff, see my answer there for what's most likely your best option. What you really need is an image map(which can't handle rollovers), but those scripts will let you get the effect you want. –  Su' May 30 '12 at 21:36
1  
I fail to see how this isn't a webmaster question? I didn't ask for a code sample, nor did I ask how to create something like this in Photoshop. I asked for ideas on how to accomplish it without the use of Flash or HTML 5. The end product will be delivered interactively on the web, how exactly I'll get it there wasn't specified. Thank you for taking a look at it though. –  Hoff May 30 '12 at 22:09
    
Answering a question sometimes involves pointing out the wrong question is likely being asked, sometimes in the wrong place. How to cut up an image doesn't really fit here and I'm not up for arguing it. Ultimately, though, I think what you need is the scripts I provided in the linked SO topic. You may not have asked for code, but I'm telling you you probably need it. Your HTML5 concern is irrelevant as regards image maps; they've been around long before that. If you want your "dinosaur browsers" comment addressed, you'll need to provide version numbers. ImageMapster works back to IE6. –  Su' May 30 '12 at 22:27
    
I still fail to see how this doesn't fit on a Webmaster Q&A site. –  Hoff May 30 '12 at 22:40

2 Answers 2

up vote 1 down vote accepted

Basically don't slice it up, create an image map with irregular hotspots for each arrow and a series of on/off images for each arrow state which you can enable using jQuery.

You can see another example an image map with jQuery at work here (about as irregular as you can get).

Dreamweaver has an excellent tool for creating irregular image maps (if you don't have a copy download a 30 day demo).

Additionally There is a pretty decent walkthrough for creating pure CSS image maps with rollovers at n00bcube.

share|improve this answer
    
That's not CSS. Image maps can't do hover states. What you're seeing is a combination of an image map(in the HTML) and some custom Javascript(map.js) that swaps in images for the active state. –  Su' May 30 '12 at 21:33
    
Just as a follow-up, the tutorial at n00bcube isn't an image map at all; it's an old hack using unordered lists. You can get away with that sometimes, but there are significant downsides depending upon the shapes involved(Hoffs are particularly bad for this case). There's a significant chunk of the Africa hotspot, for example, that overlaps Asia map-wise. Hover past the top-right corner of Africa to see. –  Su' May 30 '12 at 21:48
    
I think this is the technique I might have to use, thanks. Image maps are very widely supported (although not my preference) but with a little JavaScript this should work just fine (and one big sprite of course) :) –  Hoff May 30 '12 at 22:13
    
@Hoff nick the first example is an extention of ian lunn's bbc interactive news map. –  toomanyairmiles May 30 '12 at 22:18
    
@Su' the first example was intended as an example of an image map, the second as an example of a pure css image map - sorry if that wasn't clear enough for you. –  toomanyairmiles May 30 '12 at 22:20

Something like this could be very efficiently done in Adobe Flash. If you don't want to use Flash, you could explode the pieces and put each piece in its own rectangle, then treat all of them as individual rectangles as well.

share|improve this answer
    
The OP specifically mentions not being able/wanting to use Flash. –  ChrisF May 30 '12 at 21:17
    
Oh, I'm sorry. I didn't read that part. –  ionFish May 30 '12 at 21:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.