Bitmap as a hyperlink
- Started
- Last post
- 6 Responses
- Beeswax
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.
Live link:
https://1583003166171-7baff417c9…
- sted0
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:https://stackoverflow.com/questi…
@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
http://web.archive.o…sted - 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
- fyoucher10
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.
- http://moluskturkiye…
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
- http://moluskturkiye…
- monNom4
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.
- nice idearenderedred
- this will workPonyBoy
- na it's easy and if the only effect he is using for the hover is an overlay, that can be done with a simple hover fill alpha setting.sted
- monNom0
^ 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
https://bennettfeely.com/clippy/…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.- I used to do this with Fireworks all the time. I'll check the clip-pathBeeswax
- sted0
Adobe Illustrator Script that exports path items as HTML MAP Area coordinates. Perfect for building complex Image Maps directly in Illustrator.
- sted0
these area based hover solutions are all using 2d render engine what has its limitations(mostly feels glitchy), a canvas or webgl based approach would have smoother results.
something what i would look into:
https://gist.github.com/sergeiwa…