Menu
I need to make a custom shape div holding a "google maps" map. The custom border it's fine, I can handle it using a png, but the shape itself, I have only some theories of how to do it, but nothing in practice. But I think there is a way to do it using html5 canvas to make the custom shape on the div and use in css a overflow:hidden to hide what goes out of the div.
right now I have the following structure:
<html>
<body>
<div class="Orange_Background"></div>
<div class="FX_Lines_over_background"></div>
<div class="GoogleMaps_Container"></div>
</body>
</html>
So as you can se I can't use the background as a png to only show the map, and because I need the map to be clickable.
Here is a image of what I was saying.
If anyone can help me, I'll be grateful !!
Thank you all.
PS: It can be with jquery too ! (if someone knows a plugin that do it.)
509
You would need to create a frame with 4 different layers, top/right/left/bottom, and apply a higher z-index, background-image using a transparent PNG image than the map itself. Position would need to be absolute or fixed on those layers.
As you can see below, the 4 images are the black highlighted areas, and they would need to be individually sliced, then you can position them over the map layer. This keeps the middle area open without any overlapping layers so the map is still functional:
You can keep the entire orange background behind the maps layer, it won't matter because you'll be overlapping it first with the map, then with the 4 frame layers which if sliced properly and positioned properly would just overlap the background image. The entire background image would obviously be the full image, without any maps on it, but all orange with your stripes and gradient. Quite a task if you asked me, time consuming, but is possible.
NOTE: The transparent areas are only the white spaces you see in the black highlights, the rest would obviously be your image.
198
RE: Zee Tee's answer: If you do go this route, you can set pointer-events: none (in your css) for the div containing the images. this will send all mouse events to the layer below it. Sorry, I don't have the privilege to comment on answers yet :D
If you don't care about IE(6-8) support, then you can use CSS 3D transforms to do this directly on the map layer. But the map will look skewed, if that's the effect you are after, if not previous answer is still the best approach
Another solution is to use the mask image. sorry browser support sucks for this, but if you have a nice fallback until they catch up, you should be alright
https://developer.mozilla.org/en/CSS/-webkit-mask-image
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
