Using CSS to draw polygons on a GIF

Posted on 2007-09-27
Last Modified: 2008-01-09
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!

Question by:treefrogz
    LVL 6

    Accepted Solution

    If you use a second image for the polygon, then this is definitely possible using absolute positioning.

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

    #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.

    Author Comment

    Thanks much--that was exactly what I needed.
    LVL 6

    Expert Comment

    No problem... Thanks for the points!  :)

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now