Changing the ascii drawing in your Tapped In office to an image map

Office remodeling should be easy. Unfortunately, because it requires several procedures that involve creating or modifying images, storing images on a server, copying or modifying code, and inputing code into the Tapped In editor, it is not really for the novice. However, the following instructions can help those with some experience get over the tricky hurdles.

References

Tapped In Office Remodeling: Adding a Graphic to a one-room office

The link above is extremely helpful and should be used as the primary resource in Tapped In office remodeling. Tapped In members may even use the graphics supplied on this and other webs.

Assumptions:

1. You have an office in Tapped In.
2. You already have a image that you have uploaded to a server.
3. You know the URL of the image you have uploaded.
4. You have used an image editor and have located the top, left X and Y pixel coordinates and the bottom, right X and Y pixel coordinates for the exit (OUT) on your image.
5. You have used an image editor and have located the top, left X and Y pixel coordinates and the bottom, right X and Y pixel coordinates for the whiteboard on your image.
6. If you haven't done these things above, use the URL reference above and scroll to the top. Follow the directions to accomplish these tasks. If you know all this, and you really want to start building, skip this puz and go below.

Example:

Here is an image I have borrowed from Tapped In. The code showing the pixel coordinates refered to above is at the right.

# Format: NCSA # Red Table Room # go out, view whiteboard, or default look rect #30143 16,70 71,109 rect {#30141,"whiteboard"} 119,1 223,27 default {#30141,"look"}

In an image editor (PhotoShop, LiveView Pro, PhotoStudio, etc.), I can determine the coordinates for the exit (OUT) and the Whiteboard. In this particular case, Tapped In provided them for me.

The numbers 16,70 71,109 refer to the pixel coordinates for the top, left (16,70) and the bottom, right (71,109) of the Exit (Out) object which is assigned #30143.

Creating the Objects:

So, since we're talking about objects and object numbers, we ought to find out more about this.

• Exits are objects:

Exits are objects that are part of the collection of items that you own. You can see your items by clicking on "my items" in the web window when you're in your office. You can also type @exits in the java text window and it will give you all your exit object numbers. You will probably only have one since you're in a single-room office. Look for the exit number that leads you out of your office. You'll need it later when you assign pixel coordinates to it as in the example above. Remember, the exit object number for my Red Table Room is #30143.

• Places and things are objects:

  If you have a Bulletin Board that you got from your supplies, and you want to allow people access to it by clicking on your image map, you need the bulletin board's object number, too. You get that by clicking on "my items" in the web window or by typing @d Bulletin Board.

• The image map is an object:

  You need to create an object that will be recognized as your image map, and you need to link it to a URL.

  1. While you're in your office, enter the following command into the text window making sure you substitute your own image map name for what you see in red below.
     • @create &imagemap_cgi named red_table_map
     • In this case, you will replace red_table_map with a name that you want to use for your object. It is important to distinguish the image map object from the room. In my case the room I've added is called Red Table. That is different from red_table_map. The room is Red Table. The image map is red_table_map. This difference is very important.
     • For example, your command may look like this for Fred's Office:
       • @create &imagemap_cgi named fredmoo
  2. To link the image map object to a URL, enter the following making sure you substitute your own image map name where you see the red text, and your own URL for the image you have stored on a server.
     • @imagemap_url red_table_map is "http://www.csus.edu/indiv/m/mcvickerb/tappedin/images/red_table.gif"
     • The quotation marks are absolutely necessary before and after the URL.

      

  By creating the image map object, I can find its object number by entering @d red_table_map in the text window, or I can click on "my items" in the web window.

Entering the code editor:

You may not have permission to get into the code editor yet. To get permission, you need to enter the the following code into the text area and press enter or return.

@edito -cut&paste

This only needs to be done once. Once this is done, your office can be modified.

Create your mapping code in a word processor or a simple text editor (Word, Notepad, SimpleText, etc.) and save it. Make sure there are no spaces before and after the commas in the pixel coordinates. Also, eliminate spaces at the ends of lines.

Here's an example that I'll use for creating Blue Table. This is a room that I will use as an office.

Modifying the Blue Table:

The Blue Table is an office in Tapped In. Offices are rooms which are objects with assigned object numbers.

Here is what I have for the Blue Table so far:

• Blue Table = object #30144
• Out (from Blue Table to some other room) = object #30146

Now, I need to create the image map object. I'll call it blue_table_map.

• In the text editor, I'll enter @create &imagemap_cgi named blue_table_map.
• After pressing return, I note that blue_table_map is assigned object #33949.

Next, I will link the blue_table_map to a URL.

• @imagemap_url blue_table_map is "http://www.csus.edu/indiv/m/mcvickerb/tappedin/images/blue_table.gif"

If you get a message that says "not saved" because of an error, there is a typo in the mapping. Look for extra spaces between commas, etc. Repeat the above as necessary (until you fix the typos).

Now, I type

@set-imagemap blue_table_map for here

When I press Enter, I'm done. Update your view and you'll see your new office look.

The Blue Table office looks like this.

Return to Splash Page.