Little Tip page 5 ~ Free online image mapping generator, Image mapping,,form buttons with images,colored text and line breaks,unchanging status bar message,drop down menu,open link in new browser window

I mage maps are one of the most-used and least-understood display functions used in Web development. Although they have been around for ages, very few people understand the concept and the creation of image maps. In short, image maps are navigation tools that allow hyperlinking from within an image environment. A good example is actually a map, where you could click a city to take you to a page about that city. Here's how it works. The image is really a coordinate of cells, with a block of cells designated to hyperlink to a particular page. To create an image map, your best bet is to get an image map editor, but you can code them by hand. Here's how:

I n layperson terms, all this means is that you can have the complete graphic, (as above) and have numerous links associated in the same graphic. Our graphic has 5 "Hotspots" or links within the one graphic. Run your cursor over the graphic and see what the "alt" tags tell you. Each link will open in a new window target=_"blank" so you won't lose this page.

Y ou can either click on one of the links within our graphic or use the link below to get to the free on line image mapping generator. We feel you will find this image mapper extremely easy to use where image mapping will become second nature to you. When we found it, we had one of our staff that has no knowledge of image mapping check it out. After about 15 minutes it hit like a ton of bricks how really simple it is. The comment was, "All the coordinates are doing is setting your four points or corners on each link within the graphic".
[ Image Mapping Generator ]

W e have also included below a link that will take you to a site that you can get your own image map program to download. This site has both free and buy me versions of different image map programs.
[ Numerous Image Map Editors ]

Form Buttons With A Twist

U ntil now, you had two options for building Form Buttons. You could use text or an image, or you could get fancy with CSS. But here is a new Tag that makes coding online forms both more fun and functional. You can add an image, change font size and or color etc.

OLD WAY:

<INPUT TYPE="button" VALUE="Button Text">

T he new button command makes creating buttons easy. The following code does exactly what the previous code does:

Button Text

<BUTTON>Button Text</BUTTON>

T his code makes a button with bigger text in Arial font, if it's on your computer:

<BUTTON><FONT FACE="Arial" SIZE="5"><B>Bigger<BR>Bolder Text</B></FONT></BUTTON>

Now we have coloured text:

Look, colors! And line breaks!<BR>

<BUTTON><FONT COLOR="#ff0000"><B>Look, colors!<BR>And line breaks!</B></FONT></BUTTON>

How about an image? Yes, an image inside a button!

Now we have a table, and image and some Arial text!:

T hese form buttons will NOT work because they need to be asigned a function and be incorporated within your forms in order to work.

Open New Browser Window

T his is a very easy effect to add to your links to keep your guests on your main page and still navigate your site. All you need to do is add the attribute of target="_blank" into either your hyperlink of image link. See the below examples.

Text Hyper Link

Image Link

Unchanging Status Bar Message

A re you sick and tired of the body onload window status message disappearing when you move your mouse over a link? This script will change all that - and it's only one line! IE only.

C heck out the below status bar! The message won't change even when you move your mouse over one of the links below. The only time the message will change is when you click on the link and give you the URL of where it is targeted. The below two links have been disabled for this tutorial.
[ Link 1 ]
[ Link 2 ]

D epending on your knowledge of HTML and Java Scripts, this is an easy, two part copy and paste code.
1. Add the onLoad event handler into the <BODY> tag of your document.
2. Copy the coding into the <BODY> section of your document.

I f you do not know how to add the onLoad event handler into the <BODY> tag of your document, see the below example.

</head>
<body bgcolor="#000000" text="#9966ff" link="#ffa500" alink="#ffff00" vlink="#ffa500"Body onLoad event handler goes here">
<basefont size="3">

I n all actuality, you do not need to insert anything into the <BODY> section of your document because once the above onLoad event handler has been pasted into your <BODY> tag all links on the page will be effected. If you want to add this effect to your pages, follow the below link.
[ Get Code Here ]

Pull-Down or Drop-Down Menu

P ull-down, or drop-down, menus are great space savers when it comes to displaying a series of hyperlinks. The form and script below will enable you to easily place a drop-down selection of links, without the need for any server-side programming. All you have to do is re-code the form elements, including the option values, file selections and submit button value.

W e have for this example, disabled the "Go!" button so it will not take you from this page. The below script however is functional and all you need to do is copy and paste it into the <BODY> section of your document where ever you want it positioned.

<form name="drop_down" method="POST">
<select name="selections" size=1>
<option value="file1.html"> first page </option>
<option value="file2.html"> second page </option>
<option value="file3.html"> third page </option>
</select>
<input type=button onClick= "location = '' +
document.drop_down.selections.options[
document.drop_down.selections.selectedIndex ].value;" value="Go!">
</form>

T o answer your next question, the answer is "Yes" you can add as many links to this as you want just follow the sequence and for every link add
<option value="file4.html"> fourth page </option>
before the closing </select> tag.

D o not forget to change the file.html to the address you want to link to and change fourth page to the name of the linking page.

More Little Tips And TricksPage 5

More Little Tips And Tricks
Page 5