Author: Tachu
Intro: Image map is like a 'special' banner that has some links in it. for this, you'll need a code, so make sure that wherever you using it, has something to add codes. a preview of this can be found in the InvisionGraphix thread, in 'Advertising and Self Promotion' forum. This tutorial is made assuming you are using Windows. (i'm using Windows XP)
The tutorial:
1) Open the banner you want to add the links in 'paint'. Make sure the banner has the buttons already written!
2) Select the Square tool thing, and select the section of the button. here's a preview:
3) Now when you drag you drag the square selected, you should see 2 numbers sapareted by a comma (,). for EXAMPLE, something like '300,25'. remember those numbers.
4) now open notepad, or word or watever, and add this code:
5) just below that, paste this:
Code:
<AREA SHAPE="Rect" HREF="MyPage.html" COORDS="X,X">
replace the MyPage.html, with the url of wat you want to be redirected when you press the button. Replace X,X with the coordinates that gave you paint. (the 2 numbers.)
6) Repeat steps 2,3 and 5 until you finished with all the buttons.
7) now add this code at the very bottom of the code you are currently making:
Code:
<IMG USEMAP="#MyMap" SRC="MyImage.jpg" BORDER="0">
change MyImage.jpg witht he url of the banner. Notice that there's a tag that says BORDER="0". you should have that tag, otherwise it will add a very ugly blue border around the banner.
8) Now add this little thing that is saying that the code is finished:
9) the final code should look something like this:
Code:
<MAP NAME="MyMap">
<AREA SHAPE="Rect" HREF="MyPage.html" COORDS="X,X">
<AREA SHAPE="Rect" HREF="MyPage.html" COORDS="X,X">
<AREA SHAPE="Rect" HREF="MyPage.html" COORDS="X,X">
<AREA SHAPE="Rect" HREF="MyPage.html" COORDS="X,X">
<IMG USEMAP="#MyMap" SRC="MyImage.jpg" BORDER="0">
</MAP>
10) Paste it in the wrappers and your'e done!
Works, GUARANTEED!
*comments are appreciated*
[Tutorial] Image Map
Linear Mode
