Forums » Advanced Editor Forum » Read Thread

Here is an example of incorporating image mapping into your story: http://chooseyourstory.com/story/help-tom-escape~21.

What is image mapping? http://en.wikipedia.org/wiki/Image_map

As stated in the description, this is merely a demo for image mapping.  There is very little story involved because of this.  This was a two day project so keep that in mind when viewing the story, image, and publishing quality.

Awesome! How did you know where to link the clicks to, so they pointed to the right pages in the story?

Can you throw down a copy of your Script Lines?

How the hell did you do it? Write how you did it in a article, youll get atleast 50 points.

*points finger a DB13*

you are zikara.

Still need to know how this is done

- it is such an amazing accomplishment that it would make the site much better if we could all duplicate it  :)

If he can explain how he got this part:

"onclick="PostBack('FollowLink','5');"

Then I could explain the rest. I have no idea where he gets the number 5 from. (He uses other numbers for other links, point is i have no idea where the number comes from)

OHHHH I GET IT.

The number there is the actual page number on your list of pages (actually it may be 1 value off, but that should be the basis of it).

I'm busy at the moment, but give me a little bit and I'll explain this sorcery to the rest of you (assuming he doesn't do it first).

Alright, unfortunately the number signifies something a bit harder to explain, so I'll need to mess around with it a bit before giving a real explanation.

For reference, this is all html, not scripting at all.

And Killa Got it! (Thanks for the PM) - it is complicated to explain, but worth learning how to do if you want to do some extra nifty stuff in your games  :)

Hey, PM me too! I have a key pad puzzle too solve, so it would be nice.

Could you also PM me?

The actual image mapping part is simple, but extremely  tedious.  So, the easiest way to do it is to use an image mapping tool.  (ex. http://www.image-maps.com/). 

After you finish the mapping there are parts in your code that look like this:

<area shape="rect" coords="10,10,60,60" href="url" alt="" title=""    />

Pretty much what this says is the area that you are mapping, in this case a rectangle, has the specified coordinates.  Next it tells you were that area that you mapped is linked to and finally the title which will display when you mouse-over the area.

From here, with this website, comes the HORRIFICALLY painful second step, if you do not write it down ahead of time.

Here is an example of one in my story:

<area shape="rect" coords="407,460,539,586" onclick="PostBack('FollowLink','6');return false;" href="#" alt="Room 1" title="Room 1"    />

Because you do not link to a specific URL you will have to link to a link.  With this website there is no way to identify links other than jotting them down.  Every time you create a new link in your story, jot down which number it is.  Then where it says: ('FollowLink',6'); you want to input the number of which link you want to go to.

For example, if you have an option of clicking on an orange or an apple and the link that you want the orange option to be on is the 7th link you created and the link that you want the apple option to be on is the 14th link you created then input those numbers in the above code.

Hope this makes sense, I am bad at explaining things.  If you have a question just post a reply and I will try to explain it better.

No, that makes sense and helps a lot. (THANKS!)

Here's what Killa found out about the Link number assignments as well:

From: Killa_Robot
To: BerkaZerka
Date: 7/2/2013 1:59:29 AM

---

It's worth noting that you can do what Killa said above with IE, but only with View Source and then you have to scan down to look at the Link Info...

Yeah, but view source is a bitch to use in finding it (and you shouldn't be using IE anyway ^_^).

It is a bitch - I'll give you that LOL!