Graphic Back Grounds & Image Maps



Graphic Backgrounds
Click on the graphic you would like more information on.


Back Ground set


Background


Double Border


Side Border


Top Border


Side Border







Image Maps

    Image Maps are graphics that link from different parts of the graphic. Try clicking in different parts of the graphic below. A new window will pop up and you can visit differnet places.




The code for the above image map is:

<TABLE BGCOLOR=#718CC3 BORDER="7" CELLSPACING="7" CELLPADDING="7"> <TD>
<img src="a/ImageMap.gif" width=200 height=200 border="0" usemap="#map">
<map name="map">
<area shape="rect" coords="72,73,132,128" href="index.html" target="new_window">
<area shape="rect" coords="140,0,200,55" href="123ABC_HTML_MadeEasy.html" target="new_window">
<area shape="rect" coords="0,0,60,55" href="BODY_BGCOLORcode_chart.html" target="new_window">
<area shape="rect" coords="0,145,60,200" href="123AHTMListADV.html" target="new_window">
<area shape="rect" coords="140,145,200,200" href="123ABC_HTML_AHome4YourPage.html" target="new_window">
<area shape="default" nohref>
</map>
</TD></table>


The Image Map above is set up in a table. The code for the map begins on the second line
<img src="a/ImageMap.gif" width=200 height=200 border="0" usemap="#map">
In this line we are basicly setting up the code for the image/graphic, and adding in usemap="#map">. This is to give the image a name to use for the map. You can name the map any thing you like. If you have more than one Image Map on a page then the map will know which one to use. You will want to give each one a different name. I used the name map in the example to keep it simple.
<map name="map">

In this line we are telling the image code above that we are now going to use that image in this code. You use the same word in each place.

<area shape="rect" coords="72,73,132,128" href="index.html" target="new_window">
The next 5 lines are telling the map where to send the user when each place in the graphic is clicked. Below I will break down the code.

<area shape="rect":
Is stating that the the shape of the area we are chosing is a rectangle/square type shape. Other shapes can be used depending on the graphic program you have.

coords="72,73,132,128":
is setting up the coordinates in the map. To find the coords/coordinates you will need a photo editor, or paint shop program. Such as "Microsoft Photo Editor" or "Paint Shop Pro". In the program find a select or crop button then chose a part of the graphic you wish to make a part of the map. Highlight that area then as you move it around there should be a place where you see numbers changing. you will need to write those numbers down in the order that you see them, these will be the coordinates for your map, to place in the above code.

href="index.html" :
Next is the address/url you wish the map to send the visitor to. Notice that the a is left out in the href. usually <a href=

If you click in the map above where it says "Main" it will take you to the index page in a new window

target="new_window">

I added that in so you would not leave this page, you can leave that part of the code out and when the link is clicked the visitor will just go on to the next page.

You can make as many places to visit in the map as you like. As long as they don't start overlapping each other. You can make your own graphics or use exsisting graphics. In the example above I chose 5 places and so there are 5 sets of Coodinates in the code:

<area shape="rect" coords="72,73,132,128" href="index.html" target="new_window">
<area shape="rect" coords="140,0,200,55" href="123ABC_HTML_MadeEasy.html" target="new_window">
<area shape="rect" coords="0,0,60,55" href="BODY_BGCOLORcode_chart.html" target="new_window">
<area shape="rect" coords="0,145,60,200" href="123AHTMListADV.html" target="new_window">
<area shape="rect" coords="140,145,200,200" href="123ABC_HTML_AHome4YourPage.html" target="new_window">

Then we tell the map to use the default because we are not using <a href and to close the map with the following code:

<area shape="default" nohref>
</map>

Following that we are just closing the table.


Designing Christian Web SitesHTML
Designing Christian Web SitesTables
Designing Christian Web SitesFrames
Designing Christian Web SitesForms
Designing Christian Web SitesGraphics
Designing Christian Web SitesMusicDesigning Christian Web Sites
Designing Christian Web SitesMain Page
Designing Christian Web SitesSite IndexDesigning Christian Web Sites