Probably the easiest form of HTML, especially for photographers and Photoshop lovers alike is the image map. If you know the size of the image you need, then you can create your own custom image, or clickable page to be inserted onto your page.

To make this easier to explain, lets make a real world example.

On Ritzpix Pro, you can create your own custom image logo to go across the top of your web page. This logo must be 825 pixels in width, by 73 pixels in height. I am giving minimal instructions for Photoshop since that is what I use, but you are more than welcome to use any graphics software that will allow you to do the same things.

To start, Create a new document (File -> New), 825×73 and set the resolution to 72dpi. This is not a high resolution file, but we are not printing it, this is only to be placed online, so the file SHOULD be really small. In fact, the smaller, the better!

It is best to keep the back ground the same color as your web page so the logo doesn’t look like a cut and paste block on the top of the site. Add the graphics for your site name and any other logos or graphics you wish to add.

Here, we are going to add a “Home” button. Since the logo is on top of all the pages, the “Home” button will be as well. Many photographers have their own site and utilize Ritzpix Pro for selling, so YOUR home button may take your customers back to your other site, I will just have mine take me to the home page of my current site.

You can add other buttons or “Clickables” but we will only work with one for now.
Now we need to ‘Map’ the image. To do this, we need to find the pixel coordinates for every item we want clickable. In photoshop, Go to View->Rulers and make sure they are turned on. You also want the rulers to display pixels, not inches, so right click on the ruler and choose pixels, now we are ready to map!

You can map a rectangle or a circle. For a rectangle, you need to know the coordinates for the top left point and the bottom right point. (Marked with Green Dots)

To map the home button, you need 4 numbers. Always start with the top first and move down.
(Top Left Red, Top Left Blue, Bottom Right Red, Bottom Right Blue)
Based on the rulers, our numbers for the home button would be ‘10,15,115,60‘

Now that we have the image(s) mapped, we can begin working on HTML code!

Insert the image using an image tag, and include the dimentions as well as the map name (just in case you have more than one image map on the same page).

<img src=”/rpp/images/Imagemap1.jpg” width=”825″ height=”73″ usemap=”#map1″>

Now that we have the image posted, and we named the map, “map1″ we can tell the map what to do:

<map name=”map1″>
<area shape=”rect” coords=”10,15,115,60″ href=”http://imagesoflight.lifepics.com/”>
</map>

Now we posted an image with a clickable button! As you can see after the ‘href=’ I inserted the web address that the link will take you to. Make sure you end the map by closing the tag </map>.

Comments Off