Typewriter
Well-Known Member
- 153
- 2007
- 0
- Credits
- 3,350
Look at my forum, Infinity Advertising. Then, look at the banner. See the five words to the right? News, Rules, Services, Resources, Chatter? Well, click on one. Try "Rules". Then, go back, and click "Services". See how each time you click an image, you are moved to another category. You may also notice that the image is ONE image, not a set of images, as seen on CL for example. Heres how to do this:
1. Get your image, and host it somewhere. I reccomend imageshack.
2. On IF, find the section where you change the logo. It's in the images section. Now, put your cursor in that box, delete all the text IN THAT BOX ONLY.
3. Type
4. Type
Above, find [link dest] and replace it with where it goes. For example, on my IA image i have "Rules" for the rules link, and "Resources" for the resources link.
Again, find [this is the tricky bit, see below]. And yeah, this Is the tricky part. You'll need to get the location in pixels for the area - by area I mean each clickable area. First, get the location in pixels for the left to right (x) of the Top Left corner of the area. Next the location in pixels for the up to down (y) of the Top Left corner of the area. Third, the loacation in pixels for the X of the Bottom Right corner of the area. Finally, the Y for the bottom right. Put them in like this:
CODE xtopleft,ytopleft,xbottomright,ybottomright
Heres an exapmle from my forum:
CODE
For the rules section.
Find [location]. Replace it with the url of the destination.
5. Repeat step 4 for each clickable region in your image map (Area).
6. Type . Congradulations! You've completed the hardest part.
7. Type
Above, find [Image Location], and replace it with the url of your image.
8. DONE!
Tips
CODE
1. Get your image, and host it somewhere. I reccomend imageshack.
2. On IF, find the section where you change the logo. It's in the images section. Now, put your cursor in that box, delete all the text IN THAT BOX ONLY.
3. Type
4. Type
Above, find [link dest] and replace it with where it goes. For example, on my IA image i have "Rules" for the rules link, and "Resources" for the resources link.
Again, find [this is the tricky bit, see below]. And yeah, this Is the tricky part. You'll need to get the location in pixels for the area - by area I mean each clickable area. First, get the location in pixels for the left to right (x) of the Top Left corner of the area. Next the location in pixels for the up to down (y) of the Top Left corner of the area. Third, the loacation in pixels for the X of the Bottom Right corner of the area. Finally, the Y for the bottom right. Put them in like this:
CODE xtopleft,ytopleft,xbottomright,ybottomright
Heres an exapmle from my forum:
CODE
For the rules section.
Find [location]. Replace it with the url of the destination.
5. Repeat step 4 for each clickable region in your image map (Area).
6. Type . Congradulations! You've completed the hardest part.
7. Type
Above, find [Image Location], and replace it with the url of your image.
8. DONE!
Tips
- The first area defined is the one that is clicked on, if two areas are overlapping.
- If you have any problems, post the code in this thread or PM it to me and I shall fix it.
- Most major browsers work with this, but some obscure ones have problems.
- Be careful with the defenition of the pixel sizes of the areas.
- REMEMBER TO TICK THE SELECT BOX!!!
- Heres my code, you can use it if you want.
CODE
