Results 1 to 3 of 3

Thread: CSS image map

  1. #1
    Administrator Chris's Avatar
    Join Date
    Feb 2003
    Location
    East Lansing, MI USA
    Posts
    7,055

    CSS image map

    I'm going to be making a CSS image map for a site. This is a system that functions just like an HTML image map but uses CSS to put active spaces on top of an image using absolute positioning.

    I'm not a CSS ninja so I wanted to get some clarification on this.

    Is absolute positioning always from the window boundaries, or can it be from within a div, or is that relative positioning?

    So if I put the image as the BG of a div, then put my CSS links in the div, I'd need to use position: relative or position: absolute if I wanted to do the positioning based on pixels in the image, as opposed to pixels on the screen.

    Then, with positioning, what part are you positioning? Do I give the position of the top left corner, or the center?
    Chris Beasley - My Guide to Building a Successful Website[size=1]
    Content Sites: ABCDFGHIJKLMNOP|Forums: ABCD EF|Ecommerce: Swords Knives

  2. #2
    Absolute positioning is always from within the window boundaries unless the item you're positioning is in side of another parent container.

    Here is a link I dug out of my bookmarks that may help? http://www.webreference.com/html/tut...html#SUBHEAD-1

  3. #3
    Administrator Chris's Avatar
    Join Date
    Feb 2003
    Location
    East Lansing, MI USA
    Posts
    7,055
    I'm done with this... but I did run into 1 issue.

    Firefox cannot handle a css file with a query string. With 300+ individual dynamic definitions making the css imagemap I figured it called for a separate file. So I made a css file, used ForceType to have it processed for PHP, and put the PHP code in it to take a query string and generate the right CSS.

    Worked great... in IE. firefox would balk at the query string (and yes, I figured out it WAS the query string, I copied the output and put it in a file without a query string and it worked fine). PITA.

    So I have to echo all the CSS definitions on the page.
    Chris Beasley - My Guide to Building a Successful Website[size=1]
    Content Sites: ABCDFGHIJKLMNOP|Forums: ABCD EF|Ecommerce: Swords Knives

Similar Threads

  1. Photoshop - How do I resize an image in a layer?
    By Erin in forum Graphics & Multimedia
    Replies: 8
    Last Post: 10-20-2014, 04:29 PM
  2. Google Image Frame "Busting"
    By Todd W in forum General Chat
    Replies: 1
    Last Post: 11-15-2006, 11:27 PM
  3. image data entry kinda
    By Chris in forum The Marketplace
    Replies: 3
    Last Post: 06-05-2006, 06:14 AM
  4. Resizing an Image
    By izwar in forum Website Programming & Databases
    Replies: 11
    Last Post: 05-18-2006, 11:58 AM
  5. Image Borders for CSS
    By Chris in forum HTML, CSS, Layout, and Design
    Replies: 8
    Last Post: 08-11-2005, 09:41 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •