Imagemaps and Rollovers

What is an Imagemap? According to Wikipedia, "in HTML an image map is list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations". An imagemap can be very useful in many ways. It gives you an opportunity of creating multiple live link areas of an image. You do not need to divide the image into several parts.

For the third assignment Web page #3 I wanted to create an imagemap with the links to additional information. I chose a place in Saint-Petersburg that is very popular among the citizens and the tourists - the Peter and Paul Fortress. Located in the center of the city it is a great historical place. It is actually the oldest construction in the city. Inside the fortress there are a lot of places to discover. That is why I wanted to create a map of the fortress using an imagemap technique so that the user can get more information about any location by clicking a number on a map. While searching for the good map I was really surprised that our University Library has a lot of material about Saint-Petersburg. I found several maps, chose one with a best quality and scanned it. After that I had to apply several effects and filters to my map in Photoshop because the map had a stripe in the middle (the map takes two pages in the book and as a result has a white zone in the middle after scanning). This took me a lot of time to get a map a more or less presentable view. I applied the artistic filter of posted edges, so the map's details could look sharper.

I read the chapters about HTML and graphics and Page design from the Yale Web Style Guide. Creating a page layout can be a really difficult and long process. It is very important to create a good and efficient layout for displaying the information. Web Style Guide gives you many useful advices about this. I tried to develop an overall layout of my page using a conceptual drawing on paper. I had several ideas but the best one was to put the image on the top of the page (so that when the users open my page they see a map of the fortress) and all other information underneath the image. I used the table to create the layout. The table has two columns and two rows. The left column is narrow and has some additional information and links to the places inside the fortress, while the right column contains the main text and is wider. This layout helps to make the information accessible and easy to read.

I had some images of the places inside the fortress taken last summer such as, St. Peter's Gate, Cathedral of St. Peter and St. Paul , Neva Gate, Trubetskoi Bastion and Monument to Peter the Great.

I decided to make the links to these pictures from my web page. By clicking on a number on the map another page will open with the more detailed image and some additional information about the place.

Macromedia Dreamweaver is a great tool for creating complicated layouts. I used CSS to add additional properties to my text and table as well as other tags.

For the link to my blog I decided to use the roll-over images. In Photoshop I created a polygon and applied a gradient background (using gradient tool) to get an interesting combination of colors. For adding the 3D effect to the button I used the Single Column/Row Marquee tool for selecting the edges. After changing the brightness/contrast of the edges the button looks more highlighted.

References:
1. Leningrad: A Guide. Moscow: Raduga Publishers. 1984.

2. Leningrade and Its Environs A Guide. Y.Doroshinskaya, V. Kruchina-Bogdanov, Moscow: Progress Publishers, 1979.

3. Masha Nordbye St.-Petersburg. Russia's Imperial City. Passport Books in conjunction with the Guidebook Company Ltd., 1983