Welcome to Gaia! ::

<3 </3

Sigmaps?

great president 0.43788819875776 43.8% [ 282 ]
the GREATEST president 0.56211180124224 56.2% [ 362 ]
Total Votes:[ 644 ]
1 2 3 4 5 6 7 8 >

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100
Yes, they're back!
LAST UPDATE: Nov 24th, 2005 - 2:30AM

Table Of Contents



1. introduction (you are here)
2. history
3. overview
4. example
5. instructions
6. code
7. troubleshooting
8. flash interface
9. hosted sigmaps


Introduction


What is this?

This is a method for making image maps for use on Gaia (probably for your sig, but they'll work anywhere)

How is it different?
1 - You don't need coordinates!
2 - You can make a map with any shape at all, not just rectangles, circles, polys.

I came up with this method to make creating sigmaps easier and more flexible. Other methods require you to find out the coordinates of the regions of your image you want clickable. Many people find this rather confusing and tedious, so I came up with this method that eliminates that step entirely: you don't need to deal with coordinates at all.

Also, other methods require you limit yourself to a few basic shapes. A simple imagemap will let you use a rectangle, more sophisticated ones will let you use a cricle or polygon (a shape with a number of straight sides). This method works entirely differently, so you can make any curvy, weird shape you want, as you can see in the example below

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100
History




You may remember this thread. The previous version was made about, I dunno, march or so. It was munched in the forum migration, and only the last 2 pages survived. It now resides in the recycle bin in the chatterbox: http://www.gaiaonline.com/forum/viewtopic.php?t=6510194&page=1

I've neglected to put it back up since then, but recently, i've had a few people ask for it, so I finally got around to it


6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100
Overview


How does it work?

My method doesn't require coordinates, and lets you use completely irregular shapes, any shape you can imagine. Rather than find coordinates, you draw blotches of color on top of the parts you want to make into links

Since you'll want to have multiple links, you blot in different colors for different links

You save that image (with the blots of color) as a bitmap

Then, what makes it work, is my code. You upload that bitmap along with my scripts to your host. Run the setup script, and it will help you match the links up with the right colors.

Once you do that, it should be ready! You just need to link to it on gaia with the right BBCode

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100
Instructions



  1. Create the bitmap

    For your image map, you're going to have 2 images. The image that goes in your sig (the first image shown above), and a separate bitmap image, that is just blotches of color (the second image shown above; i'll call this the bitmap).

    The bitmap won't actually be shown, no-one else will see it. It is used by the script; The script opens it up and uses it to figure out which areas are clickable, and where they link to.

    This bitmap should be exactly the same width and height. On it, you'll draw soild colors over the areas you want to have link to somewhere. Use different colors for different links. For example, in my image above I drew in red over where "MPL" would be; yellow over "friend me", green over "guilds", etc


  2. Save the bitmap


    It's very important that you save the bitmap in a specific way.

    It must be a 256 color bitmap. No other type will work (not "16 color", "24 bit", etc). Your graphics program may call it an "8-bit bitmap" or have an option to save with "8-bit color"

    When saving a bitmap, there will probably be some options available. Be sure to check these options before saving. You should choose "RGB" rather than "RLE". RLE is a type of compression which my script does not understand. your map will not work

    You may have an option between "os/2 bitmap" or "windows". Choose 'windows'. My script will not understand the os/2 type, and your map will not work

    If you're using MSPaint, you will not have these options, but as long as you choose "256 color bitmap", it will be fine.



  3. Download + unzip my code


    This is the code that makes he map work: http://gaia.doorknobsoft.com/map_code.zip

    Download it, and unzip it. There will be 3 files with the extension ".php". You don't need to do anything with these, you don't need to edit them, etc. Just have them unzipped ready to upload




  4. Upload everything


    Now, you'll need to upload all of these onto your host, all in the same directory:
    - all 3 scripts (map.php, mapsetup.php, bumplip.php)
    - the bitmap

    The other image, the one that goes in your sig, does not need to be uploaded here, it can be uploaded anywhere else (photobucket, tinypic, etc). The bitmap cannot.


  5. Configure your image map / add links


    You'll need to access the 'mapsetup' script. You'll need to know where this is. For example, I had an account with t35.com with the username 'doorknob', so the url to my site was 'http://doorknob.t35.com/', and I uploaded everything into the 'default' directory, so for me it would be "http://doorknob.t35.com/mapsetup.php"

    So, figure out where it is, and go to it in your webbrowser after it's uploaded wink

    There will be a box. type in the name of the bitmap file and hit submit

    User Image - Blocked by "Display Image" Settings. Click to show.


    It will magically read your bitmap and show you what colors were used:

    User Image - Blocked by "Display Image" Settings. Click to show.


    In the boxes, type in your URLs.
    For example, for me, blue is 'sigmaps' so I have a link to this page, red is MPL so I have a link to that guild, etc....

    With all the URLs typed in, hit submit. If you don't get an error, then it saved it for you and your map will now work!

    User Image - Blocked by "Display Image" Settings. Click to show.




  6. Delete mapsetup.php


    This is not a required step, but recommended. Mapsetup.php can be accessed by anyone, so they can mess with your map. You should delete mapsetup.php after you're done typing in the links



  7. Get the BB code


    Finally, you'll need some gaia-specific BBcode to use it here.

    For this, you'll need the URL to 'map.php', and the URL to your image.

    For example, in the code below:

    map.php - http://gaia.doorknobsoft.com/maptest/map.php
    the image - http://tinypic.com/fymxk3.jpg

    Replace the URLs below with your own URLs

    [url=http://gaia.doorknobsoft.com/maptest/map.php][imgmap]http://tinypic.com/fymxk3.jpg[/imgmap]


    That's it! If the URLs are right, and you did all the steps right, then you're done. Just put the BBcode in your sig, or wherever else you want it.





6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100
Troubleshooting


RESERVED

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100
Flash interface (new!)


This is something new I'm working on, which wasn't included in the previous version of the thread. People have trouble with making the bitmap, like lacking a program that has layers, using good colors, and saving it correctly, so this should help with that....

it's not done yet, so stay tuned

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100
Hosted Sigmaps


This is also something new, and will be added when the above is complete (flash interface). This will simply the process even further

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100

6,000 Points
  • Mark Twain 100
  • Invisibility 100
  • Megathread 100

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum