Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1143
  • Last Modified:

Using CSS to draw polygons on a GIF

I'm completely new to CSS, so pardon the ignorance of this question.

Let's assume that I have a gif of a map that changes daily (a satellite image, for instance).  Is there a way to use CSS to overlay a polygon over a predefined area of the gif?  For example...let's assume I want to place a rectangle over the Grand Canyon.  The backgound gif will change from day to day, but the x-y location of the Grand Canyon (and thus, the rectangle) will always be the same.  With each successive gif image, I want the rectangle(s) to display in the exact same spot, with no user intervention.  How can I accomplish this?

"Barney-style" examples greatly appreciated!

Thanks much!

0
treefrogz
Asked:
treefrogz
  • 2
1 Solution
 
TheKyleCommented:
If you use a second image for the polygon, then this is definitely possible using absolute positioning.

HTML:
...
<div id="Map">
    <img src="..." alt="My Map" />
    <div class="Overlay"></div>
</div>
...

CSS:
#Map { position: relative; padding: 0; }
#Map .Overlay
{
    position: absolute;
    top: 25px; left: 100px;
    background: transparent url(polygon.png) no-repeat center center;
    height: [IMAGE HEIGHT IN PIXELS]
    width: [IMAGE WIDTH IN PIXELS]
}

That should do it.  You should keep in mind that this solution will not be accessible for anyone with visual disabilities. However, depending on what your project is, that may not be a concern.

Also, I specified a PNG for the polygon so that you don't end up with some ugly gif with jagged edges.  If you use a PNG, then you'll have to look into a PNG fix for IE6 and below since it doesn't support PNG alpha transparency.
0
 
treefrogzAuthor Commented:
Thanks much--that was exactly what I needed.
0
 
TheKyleCommented:
No problem... Thanks for the points!  :)
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now