Junal on the run

Mapping an image with CSS!

Posted on: July 23, 2008

Today, I went through this challenging (for me of course) task to map/create separate links on one image. I think this could be a great alternative of Image Mapping. Well after doing it, I felt that I would write a small tutorial on this CSS image mapping. So lets have a look how we can simply create separate links on one image with CSS.

First of all, we will put the image in a div as a Background. Note one thing that, div height must be given, otherwise it could be overlapped by other divs.

Let’s have a look at the HTML part…

<div id=”link_out”> </div>

CSS ….

#link_out{

background:transparent url(yourfile_path/link.jpg) no-repeat;

border:5px solid #ccc8bc;

height:263px;

width:194px;

margin-bottom:30px;

}

now, lets put <a> tag for a link and of course thats should be in the DIV.

<div id=”link_out”>

<a id=”first_a” href=”https://junal.wordpress.com/&#8221; target=”_blank” ></a>

</div>

so we have a tag id called first_a . now point this link with CSS ..

#link_out #first_a {

display:block;

height:20px;

margin-top:50px;

margin-bottom:1px;

outline-style:none;

outline-width:medium;

overflow:hidden;

width:194px;

}

this above CSS should point out the first link. Same as we can create another link that can follow another link….

here is the example image that I have from this tutorial.

CSS Image Map

CSS Image Map

To get the complete example, download the code from here:CSS Image Mapping

3 Responses to "Mapping an image with CSS!"

Nice article Junal!

But can you also please explain why CSS image mapping is preferred instead of HTML image mapping tag, so that your readers know why you did the same thing in CSS that could have been easily possible using HTML image mapping tag.

As always, the reasons are more important to me than the techniques😉

Thanks Ahsan bhai, i should have mentioned that in the blog. anyways, i see there are 2 main reasons why we should use it….

1. We are not splitting an image and then writing css for each part of that image. So it’s making our life simpler!
2. It will work in “text-only” browsers as well. So that even if my image is not loaded/allowed, my all links will be still there ….

btw, it also reduces the code as i’m not using tag for different links.

cool, I think my next tool will be to use CSS to map an image.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

View Junal Rahman's profile on LinkedIn
Subscribe to me on FriendFeed

Follow Me on Twitter

Archives

My photos

Downtown, Ottawa

Dream

Jasper, AB

Jasper, AB

Banff, AB

Folkfest, Bangladesh Pavilion Saskatoon

Lovely Sky

Stunt bikers on summer festival, Saskatoon

More Photos

Blog Stats

  • 420,271 hits
%d bloggers like this: