I. Intro Here is a simple guide on how to code mall banners; these can be put on your lookup, shop, petpage, and whatnot. You can also use this for many other uses, however, mall banners are the most common use of image maps. I can code any mall banner for you for just 1k a shop advert....I can also make a mall banner graphic as well...but I'm not that great at Gimp, so I wouldn't advise that. My price would be 5k a box for that. ;x I. Intro II. Requirements III. GeoHTML Settings IV. Coding It V. Getting The Code VI. Optimizing The Code VII. End II. Requirements You will need GeoHTML, free of cost { download } Mall banner (must be .gif, .jpg, or .jpeg) Text editor(MS Word preferred - notepad also works) A little patience III. GeoHTML Settings You need to open GeoHTML. Go to Settings - Options. In your href, you need to enter the shop code, which I have listed below for convenience. If your banner has specific sizes of the shop advertisements, you can use the Rectangle area feature; the banner I made happens to have 150 x 100, so I can use this feature. Code (Text): www.neopets.com/browseshop.phtml?owner= Still under the Options window, go to the "Layer Initialization" tab. You can edit these settings to whatever pleases you. These settings don't affect your final outcome. IV. Coding It Below, I have made a tacky mall banner. It is not a real banner, but the same concept applies and it will work. Obviously, a real mall banner would have more than two shops. Create a brand new project. Now, click the "New Map" button and then select your image and select 'Ok'. Remember, it needs to be .gif, .jpg, or .jpeg format. You also need to open the "Area Inspector." This can be done by going to View - Area Inspector or by clicking the "I", next to the "L". Now for the fun part! Make sure you are using the rectangle tool, and draw a rectangle around your shop advertisement, covering it all. Be sure to only select one at a time. If you have fixed dimensions on the advertisements, you can just click on the left corner(if you set the Rectangle Area earlier in the "Area Initialization" tab). Still active on the selection you just made, change the end of the "href" in your Area Inspector. I recommend doing whatever shop it is, as it will be easier to edit later on when a spot gets filled or whatnot. Continue to repeat the previous step until all of your spots are filled. This may take some time, as some smalls can have 30+ spots in their banner. Note, to do Faeries, you will need to Drag & Select. If the faeries are fixed, however, you can make them even by adjusting the Rectangle dimensions in the "Area Initialization." Most people who make mall banners put their username in them so that nobody steals their banner or takes credit for it, as good banners can take hours upon hours. To be courteous, you can link to their username or shop, depending on what they prefer(if they have an empty shop, they obviously wouldn't want to have their shop linked.) V. Getting The Code Now for the actual code itself! Go to the HTML Source at the top(next to images, below the floppy disk). Copy all of the code and paste it into Microsoft Word. Note: I do not have MS Word so I use WordPerfect, which is similar(came with my computer and I'm too cheap to buy MS Office). Remove everything from <IMG SRC to </MAP>, as that is unnecessary. Finally, change the image to a web url(upload it with tinypic). This image does not have to be .gif, .jpg, or .jpeg, however, it must be the same image!! Your image map is done! You can use this if you like. VI. Optimizing The Code That code is long and bulky, and for most malls, you want your banner's code to be as minimal as possible!! Here is my current code: Code (Text): <IMG SRC="http://i43.tinypic.com/14uxdhv.png" USEMAP="#pseudo banner" WIDTH=420 HEIGHT=300 BORDER="0"> <MAP NAME="pseudo banner"> <AREA SHAPE="RECT" HREF="http://www.neopets.com/userlookup.phtml?user=cackle" COORDS="364,271, 418,294"> <AREA SHAPE="RECT" HREF="www.neopets.com/browseshop.phtml?owner=food" COORDS="263,123, 413,223"> <AREA SHAPE="RECT" HREF="www.neopets.com/browseshop.phtml?owner=toys" COORDS="34,124, 184,224"> </MAP> Since all links on neopets must be TO neopets, you do not need to include the domain. I recommend a "Replace All," which can be done by hitting CTRL + F. Depending on how many shops you have in your banner, your code might lose anywhere from 100 to 500 characters, I lost about 50 and I only have 2 shops and a userlookup linked. Note: you could originally avoid this by just putting /browseshop.phtml?owner= in the "Area Initialization" box; for demonstrative purposes only, I chose not too. My updated code: Code (Text): <IMG SRC="http://i43.tinypic.com/14uxdhv.png" USEMAP="#pseudo banner" WIDTH=420 HEIGHT=300 BORDER="0"> <MAP NAME="pseudo banner"> <AREA SHAPE="RECT" HREF="/userlookup.phtml?user=cackle" COORDS="364,271, 418,294"> <AREA SHAPE="RECT" HREF="/browseshop.phtml?owner=food" COORDS="263,123, 413,223"> <AREA SHAPE="RECT" HREF="/browseshop.phtml?owner=toys" COORDS="34,124, 184,224"> </MAP> However, there is still more to lose: SHAPE="RECT". Do another CTRL + F and replace all SHAPE="RECT" with nothing. New code: Code (Text): <IMG SRC="http://i43.tinypic.com/14uxdhv.png" USEMAP="#pseudo banner" WIDTH=420 HEIGHT=300 BORDER="0"> <MAP NAME="pseudo banner"> <AREA HREF="/userlookup.phtml?user=cackle" COORDS="364,271, 418,294"> <AREA HREF="/browseshop.phtml?owner=food" COORDS="263,123, 413,223"> <AREA HREF="/browseshop.phtml?owner=toys" COORDS="34,124, 184,224"> </MAP> Two more fixes that probably aren't needed but will still help: renaming the map and ridding of width, height, and border. You can rename the map to anything, I will use "NF" as an example but for maximum efficientcy, use one letter. Be sure to remember to change both. Fianlly, you do not need the Width= height= or border= codes, as they are not necessary. My final code: Code (Text): <IMG SRC="http://i43.tinypic.com/14uxdhv.png" USEMAP="#nf"> <MAP NAME="nf"> <AREA HREF="/userlookup.phtml?user=cackle" COORDS="364,271, 418,294"> <AREA HREF="/browseshop.phtml?owner=food" COORDS="263,123, 413,223"> <AREA HREF="/browseshop.phtml?owner=toys" COORDS="34,124, 184,224"> </MAP> VII. The End I hope this guide has helped you. I spent about 2 hours making the guide. ;D Although I get distracted easily...so it is probably less. Comments/Criticisms wanted. Please let me know if I need to be more specific on a certain part or if you're getting lost somewhere.[/center]
If you want a truly optimized and efficient code, you should always code it manually. If you use a program, there will be gaps in the banner where there is no link. Related shops should be placed next to each other in the banner so the coder can combine the links for all of the categories into one link area. The actual code should also have whitespace removed, which will gain approx 30-50 characters. Manual coding ftw