Webmaster Forum - View Single Post

zannucci · 06-12-2009, 08:39 PM

Here's a post I did on a blog today, minus the links and the pictures. You can find the free programs, despite the removed links, with a simple Google search on the names. I was writing about Wordpress development, but this works for anything. Just hoping someone will find it useful...

If you are a code tinkerer/developer without formal training, chances are that you frequently do things about the hardest way imaginable. Just think of the poor tinkerer who wants extra buttons in his/her header. Pouring through code, trying to adjust the header, creating buttons, floating things around, 20 CSS definitions. It’s a nightmare. That’s because you don’t know what you are doing. And that’s okay, most of us don’t. We’re trying hard, and we do the best that we can.

Welcome to one of the most useful things a tinkerer can learn: the wonderful world of image mapping. Image mapping is when you take an image, plot out where you want your links to go, and code them up. It’s almost sinfully easy using a free download program I’ll link you to. I’m going to show you an example of a WordPress header I did using image mapping and then explain how I did it.

First, go look at the header and then come back. The header is at (site name removed by author). The header, in case you are confused, is everything in the white section at the top of the page, basically above the funny looking guru guy.

I’ll get to the image mapping in just a second, but let’s get the $3 out of the way first. I paid $1 for each girly picture on the left side. You can get lots of royalty free photos out there, but if you want to show someone’s face on your site, particularly in relation to selling something, then you better do it legal. The picture of the smilie face wagging its tongue came from a royalty free clipart site.

So, to put it all together, including the titles, I used a completely free art program called Paint.net. If you can’t afford Photoshop, there’s a good alternative for you.

I then took the background image from the site and constructed, again in Paint.net, the buttons and put them into the header. Now I had a single picture, three girls who appear to be together, the title, 10 buttons, and a crazy looking smilie.

So how do I figure out the coordinates of all those buttons and write the code that makes it work? I don’t. I have a free software program that I downloaded to do it for me. Check out Handy ImageMapper. There are probably some other ones out there, but this one is the only one I’ve used and it is EXTREMELY easy.

After you install the program, just open it and click on the little file icon and upload your picture. Here’s a screen shot of the header in question opened in the program.

(picture removed by author)

Okay, just for a moment, pretend you can actually see that.

Now, next to the file folder button near the top right, you have several mapping tools, like a rectangle and a circle. You click one of those and then drag out an area on the page where you want to create a link, for instance one of the buttons or the site name.

Once you’ve marked an area, the HREF field on the side opens up and asks where that link should lead. You put the URL there.

Now you can go back and mark more areas, each time adding the URL for that link. When you are done marking and adding URLs for all your areas, the second button from the left on the bottom says “Copy to Clipboard.” Click that button and, just for kicks, paste it into some text editor or other.

My results looked like this:

Code:

<MAP NAME="map1"> <AREA SHAPE="RECT" COORDS="321,1,409,21" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="412,2,501,20" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="504,1,592,20" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="595,2,682,20" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="686,2,774,20" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="386,128,473,147" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="477,130,566,147" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="569,130,656,146" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="660,130,748,147" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="752,129,837,146" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="840,1,1014,149" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="6,2,314,148" HREF="url removed" TITLE="">
<AREA SHAPE="RECT" COORDS="344,33,747,70" HREF="url removed" TITLE="">
<img src="url removed" USEMAP="#map1" border="0" alt="headermap" title="headermap" width="1018" height="150" class="aligncenter size-full wp-image-302" />

Fill in the “title” areas, and copy and paste this into your theme where you get your header image and you are done. Now you have a complex header image that links to where ever you want. If you use good image compression, it also takes up very little space. It doesn’t call the database over and over. It’s a great solution.

NOTE: In retrospect, without the picture, it is difficult to see what I'm talking about. Just imagine having a header image that looks however you want it to look, with as many buttons as you want, where ever you want them, linking to where ever you want each to link--all contained in about a single image that you've put together inside a graphics program.

06-12-2009, 08:39 PM	#1 (permalink)
zannucci Member Join Date: 06-02-09 Posts: 35 iTrader: 0 / 0% Latest Blog: None	The $3 Header and Image Mapping Here's a post I did on a blog today, minus the links and the pictures. You can find the free programs, despite the removed links, with a simple Google search on the names. I was writing about Wordpress development, but this works for anything. Just hoping someone will find it useful... If you are a code tinkerer/developer without formal training, chances are that you frequently do things about the hardest way imaginable. Just think of the poor tinkerer who wants extra buttons in his/her header. Pouring through code, trying to adjust the header, creating buttons, floating things around, 20 CSS definitions. It’s a nightmare. That’s because you don’t know what you are doing. And that’s okay, most of us don’t. We’re trying hard, and we do the best that we can. Welcome to one of the most useful things a tinkerer can learn: the wonderful world of image mapping. Image mapping is when you take an image, plot out where you want your links to go, and code them up. It’s almost sinfully easy using a free download program I’ll link you to. I’m going to show you an example of a WordPress header I did using image mapping and then explain how I did it. First, go look at the header and then come back. The header is at (site name removed by author). The header, in case you are confused, is everything in the white section at the top of the page, basically above the funny looking guru guy. I’ll get to the image mapping in just a second, but let’s get the $3 out of the way first. I paid $1 for each girly picture on the left side. You can get lots of royalty free photos out there, but if you want to show someone’s face on your site, particularly in relation to selling something, then you better do it legal. The picture of the smilie face wagging its tongue came from a royalty free clipart site. So, to put it all together, including the titles, I used a completely free art program called Paint.net. If you can’t afford Photoshop, there’s a good alternative for you. I then took the background image from the site and constructed, again in Paint.net, the buttons and put them into the header. Now I had a single picture, three girls who appear to be together, the title, 10 buttons, and a crazy looking smilie. So how do I figure out the coordinates of all those buttons and write the code that makes it work? I don’t. I have a free software program that I downloaded to do it for me. Check out Handy ImageMapper. There are probably some other ones out there, but this one is the only one I’ve used and it is EXTREMELY easy. After you install the program, just open it and click on the little file icon and upload your picture. Here’s a screen shot of the header in question opened in the program. (picture removed by author) Okay, just for a moment, pretend you can actually see that. Now, next to the file folder button near the top right, you have several mapping tools, like a rectangle and a circle. You click one of those and then drag out an area on the page where you want to create a link, for instance one of the buttons or the site name. Once you’ve marked an area, the HREF field on the side opens up and asks where that link should lead. You put the URL there. Now you can go back and mark more areas, each time adding the URL for that link. When you are done marking and adding URLs for all your areas, the second button from the left on the bottom says “Copy to Clipboard.” Click that button and, just for kicks, paste it into some text editor or other. My results looked like this: Code: <MAP NAME="map1"> <AREA SHAPE="RECT" COORDS="321,1,409,21" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="412,2,501,20" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="504,1,592,20" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="595,2,682,20" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="686,2,774,20" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="386,128,473,147" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="477,130,566,147" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="569,130,656,146" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="660,130,748,147" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="752,129,837,146" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="840,1,1014,149" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="6,2,314,148" HREF="url removed" TITLE=""> <AREA SHAPE="RECT" COORDS="344,33,747,70" HREF="url removed" TITLE=""> <img src="url removed" USEMAP="#map1" border="0" alt="headermap" title="headermap" width="1018" height="150" class="aligncenter size-full wp-image-302" /> Fill in the “title” areas, and copy and paste this into your theme where you get your header image and you are done. Now you have a complex header image that links to where ever you want. If you use good image compression, it also takes up very little space. It doesn’t call the database over and over. It’s a great solution. NOTE: In retrospect, without the picture, it is difficult to see what I'm talking about. Just imagine having a header image that looks however you want it to look, with as many buttons as you want, where ever you want them, linking to where ever you want each to link--all contained in about a single image that you've put together inside a graphics program.