Follow by Email

Oct 26, 2007

Image Maps & Splices

Just to let you know I thought it would just be a funny thing to post an entire blog in binary. And in case you couldn't read what my last blog said in binary. It was the first part of the Hackers Manifesto. That being said. Today I'm going to be talking about splices and image maps.

What is a Splice?

A splice is an alternative to an image map. Pretty much what it is is an Image that is chopped (sliced) up into several images. There are several advantages to doing this that image maps can't do.

What is an Image map?

An image map is a whole picture (not sliced up). And when you click on a certain part of the picture you web page will do a certain thing.

Why use Splices?

Splices are great for several different reasons. One reason is that for each slice you can format it a different way. So if you want a really good quality for part of an image and a crappy quality for another part of an image you can save them in 2 different formats (.bmp, jpg, .gif)Thus saving you space on your server.

Why use Image Maps?

There may be times when you need to use an Image map, because if you had a picture with say a house and a tree, and they are both in the middle of the picture with with odd shapes, obviously splices wont work the way you need them to. And even if you did it wouldn't look right. In this case Image maps are needed.

Good Examples of using splices

If your going to just be doing Circles and Squares such as clicking on black squares of a checker board. Or clicking on poka dots. Then sprites are cool to use. They would also be easier to use this way.

Bad examples of using Splices

A bad example of using splices is using them to make a map of the USA and making it so you can click on each individual state. The reason this would be bad idea is because states are different shapes.

Good Examples of using Image Maps

Well the perfect example is a map of the USA. Another good one is for a play waldo game.

So how do you make Splice?

Splices are easy. Take your picture. Think to your self where do I want my picture to be click able. Ok so I want it to be click able in the top left corner, top right corner, bottom left corner, bottom right corner. So I will crop the corners out of the image and make each corner a separate image. No I will add those image on to the site and have them so close to each other it will look like the same picture. Well that is a splice.

Now say that the top left corner has only two different colors. So I can make it a more compact image and save space. So I will turn that corner into a gif file. But the top right corner has alot of colors so I will leave that image as a jpg file. So now instead of the image being 125KB it might only be 100KB. So we just freed up 25KBs by making parts of the spliced image smaller by changing there formats.

So how do you make an Image Map

There are two types of Image Maps. one type is a server side Image Map, the other is a client side Image Map. The most commonly one now is a client side Image Map. A client side Image Map is where it runs on the Users side. This will be the one I will teach today.
First add an Image Tag like so.

We will say that is a picture of me holding my MP3 player that I made.
So now we want it so people can click on my eyes to be able to see what color they are. And we also want to have the user click on the MP3 player to get a closer look at it. To do this we would type the following after the Image tag.

Pretty much what that means is simple.
the word map is the name of the tag. The word Name is the same thing as id but it is for Internet Explorer. the word id is telling the recognizing what other tag has the same id.
The word area is the start of the area tag. The word shape is to tell the web browser which shape to make for the click able area of the picture. The word href is where to link to. Now for the scariest part. The word coords is short for coordinates. And it tells the web browser where on the image is supposed to be click able. Ok it's not that hard if you know where the part of the image is located.

We would also add some extra things to the image tag. Like so

Well now you have made an image map. I hope it serves you good in the future.

No comments: