treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Image map with css?

  • Is it possible to make something like image map with css? :roll: :?

    If yes, then how?

    P.S I'm using WordPress CMS
  • yep it is.

    There is a good example here>>
  • I think the theory is to place the image inside of a DIV with the same dimensions. Apply relative positioning to the DIV, then you can absolutely position things inside the DIV like you would an image map.

    Personally, I don't mind just using regular image maps. It's one of things I still pop open Dreamweaver for.

    Here is a little example I did for a client that uses a regular image map and javascript tooltips:
    http://beaconathletics.com/shopthisfield.php

    -Chris
  • "Personally, I don't mind just using regular image maps. It's one of things I still pop open Dreamweaver for."

    But, Dreamweaver makes a Html image map, i can't use this, becouse i'm working with WordPress CMS :(. I need css image map.
  • Use absolute positioning to put a div over the image which can be clicked using javascript.
  • What does WordPress have to do with it? Is it stripping away your image map code? I'm sure there is a way around that... Even just switching into HTML view while writing posts/pages and dropping the map code in there should probably work.
  • If you want some inspiration, this is a good place to go for image maps.

    http://www.cssplay.co.uk/menu/ left hand column at the bottom.

    http://www.cssplay.co.uk/menu/old_master

    Stu Nicholls is up to all sorts of css madness!

    Check it out. :D