- Last post
- 6 Responses
Hey guys, I'm trying to create clickable map. Each district is going to be a hyperlink. I have rollover states for each one but it gets triggered when the mouse is over the bounding box of the bitmap and not the actual borders of shape.
Is there a way to make this work?
I used Adobe Animate first and exported the screen as a Canvas but the output quality was horrible. I found another online app called Quest AI and placed the bitmaps and created the hover states there. But the hover states based on bounding box causes problems.
yeah because it just tossed the images into the html, this needs an area over the imgs.
you need this fancy stuff what exports base64 encoded html?
check this for the logic:
@Original Answer using jQuery
- what sted said, image maps_niko
- image maps still exist?jaylarson
- wow, image maps :) that brings back memories.renderedred
- hover isn't working but i had to make ~700 maps for this site in 2003+update in 2005
- u can't imagine how i hated the client for his design recommendations making everything look lame and old in a nice British tone.sted
Animate was probably fine (you may not be exporting it properly). You might just need to do a quick adjustment. Post a link to that and I can probably help fix that really quick.
also Preloader doesnt go away unless page is refreshedBeeswax
- the lossy quality of that Animate export compared to this is obvious > http://bit.do/fzuJhBeeswax
- Weird, never seen or had that issue before. It's like it's aliasing the edges around the PNGs.fyoucher1
- Actually, just uncheck export images, and use your own PNGs (copy and paste into images folder). Just make sure they have the same name.fyoucher1
SVG for map boundaries, with the map image set as background of SVG elements?
If you export SVG from illustrator (for instance), you should be able to get the actual XML that you can put directly inside your html page. You then add css classes and background images with position offsets on :hover to the elements of the SVG file.
I'm not that sharp with SVG, so maybe this won't work, but it would be my first thing to try.
^ as I look into it, the above might require the image to be made into an svg pattern so the element can become a clipping mask.
alternatively: css "clip-path" might help
and from the way-way-back machine: use plain old HTML image maps to set up your hover-targets as polygons rather than bounding boxes, then have them offset the background in css on hover. I recall doing this long ago with a sort of film-strip of hover states in one image, and that all sitting behind a transparent gif with the imagemap attached to it.
the gif would effectively clip the filmstrip to only show the frame you selected with hover.