SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    can you style MAP and/or AREA tags?

    I am NOT trying to build an image map. I am merely curious if i could add stile attribute to an img map using CSS... it seems rules are allowed but have no visual effect.


    for example:
    area { border:3px solid #fff}
    or
    map{background:#fff}


    just curious if it can be done or not..

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you can style them, it just takes a little bigger values in order for it to happen.

    (Yes I'm going to use w3schools)
    http://www.w3schools.com/TAGS/tryit....ryhtml_areamap

    If you try giving the map a border, the minimum it takes to show a border is 3px (3px solid red for example)

    I don't think backgrounds will show though (why would you want to have a background color appear over your images?)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    hmmm.. I dont see the borders appearing on the MAP or AREA (oly the "standard" link image border...:/

    as far as covering up an image.. that COULD have it's uses..

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I stand corrected, apparently the map is displayed ADJACENT to the image... :/ with 0 for width and height unless I add "display:block;" which of course gives it height, but places it BELOW the image.

    nothing I do makes the areas show up...

    Yeah I guess trying to style this element is pretty useless...

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You may not be able to see it but yes it can be styled. It's just difficult because of the way the tag is
    Edit:

    Yup you got it .

    Just style a containing element, aka a <div> surrounding it
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,384
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can style them but like other special elements they are usually display:none to start with.

    e.g.

    Firefox has these as default in html.css

    Code:
    area, base, basefont, head, meta, script, style, title,
    noembed, param {
       display: none;
    }
    If you set it to display:block you can give it a background and borders etc.

    However, as you noticed the element doesn't actually sit in the place specified by the co-ordinate attributes. The element is probably just a container for holding data that the browser can use to identify the relevant parts.


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
  •