Introduction Audio What's New? Movie Clips Downloads Making Waves Interaction Writings Film Info Websites Historical Info Experiences Image Gallery Merchandise Artwork B2T Games Music Guestbook

Today in Titanic History - with Searching
Today in
Titanic History

Tuesday, October 22, 2024
1886 - 1st class survivor Mr George Achilles Harder was born to Victor Achilles Harder and Minnie Mehl Harder in New York City, New York, USA.

1974 - 2nd class survivor Mrs Antonine Marie Mallet died in Paris, France at the age of 86.

1888 - 3rd class passenger Mr Nils Martin Ödahl was born to Ola Öhdal and Hanna Nilsson.

1887 - 3rd class passenger Mr René Aimé Lievens was born in Heldergem, Belgium.

1926 - Able Seaman and survivor Mr William Henry Lionel Weller died in a shipwreck at the age of 44.

search other dates

Help B2T stay afloat!

Shop at Cafepress
Buy this on a t-shirt!
Buy this on a t-shirt!
Buy this on a t-shirt!
more Titanic designs




Image Maps


An image map is a graphic that is broken up into different links using HTML code. The code is simple enough. Download this template:

http://www.back-to-titanic.com/waves/copal/apr01_crew-map.html

If you click on Captain Smith's head, it goes to smith.html (or it would if such a page existed). Right click and view the source to see how this was done.

You may change SHAPE="rect" (for rectangle) to SHAPE="poly" for a polygon or SHAPE="circle" for a circle.

Rectangles have four numbers, or coordinates. The first number is always the X coordinate and Y is the second. So if you had "166,32,236,96", X=166 and Y=32. The next pair of numbers is the X and Y of the next point. So you are giving the upper left point and the lower right point and, since you've written that it's a rectangle, the other two points are implied.

Polygons are noted the same way with X,Y,X,Y,X,Y (and so on) of all of the points. There is an infinite number of points you can give a polygon. The last point will imply that it connects to the first point, so no need to repeat that.

Circles are only two points. You're deciding the center of the circle and the outer rim (in other words, the radius). Since circles are the same distance to the rim all the way around, there's no point in typing any more than that.

You know that you need the X,Y coordinates of all of those points, but how are you going to know the right numbers? Option #1 would be to guess. A century later you might have a few shapes made. Option #2 would be doing the math. All of these coordinates are based on pixels, and so are the dimensions of your image. So if you want to divide a 200x100 image in half, your coordinates are 0,0,150,100 for the first rectangle. The second rectangle is 0,100,200,100.

But what if you want shapes in the middle of nowhere or very precisely? Photoshop 5.0 has the answer. Photoshop 6.0 users can use ImageReady, which is achingly simple. But since most people don't have it yet, or can't afford it, I'll show it to you old school:


Open an image.

Choose the Rectangle selection tool (or a circle if making a circle). Go to the menu and select "Window | Show Info" or click the "Info" tab behind the navigator.

You will see four different sets of numbers appear. Most likely they are RGB, CMYK, XY, and WH. We only care about XY. Press and hold onto the cross by the XY numbers. Like this:


http://www.back-to-titanic.com/waves/copal/apr01_xy-dropper.jpg

Drag your mouse onto "pixels" and let go. Take your cursor over your image. The XY numbers change as you drag it over your image. Hold it still whereever you'd like your upper left corner to be. Write down the XY coordinates. Move the cursor to where you want the lower right corner to be and write those XY coordinates.

Back to our HTML, run all those numbers together, separated only by commas (no spaces). (As in 3,4,63,71) You may actually want to make a selection to visualize this better. Just make sure you write down the XY while holding your mouse button down (easy for me being left-handed, but you guys might have some trouble.

In making images that have many different links on them, make your selection and "Edit | Cut" that spot. This way you won't overlap shapes. Netscape will not show links for any shapes that overlap, even a little. Just remember not to save your image with all of the shapes cut out.

To make more than one link on our example, copy and paste the AREA tag and paste it before the MAP end tag.

Congrats! You've got an image map.





about back-to-titanic.com | contact us