Image with clickable zones demo
2,429 views
Skip to first unread message
ElliotM
Feb 23, 2013, 10:51:09 AM2/23/13
to twee...@googlegroups.com
Thought I'd share some experiments of mine with the Image Map tag. We can already turn images into links, but the map tag would allow you to have one image with more than one clickable zone or link. Using a tool like this you could create several clickable zones of different shapes on an image that you can then click on to link to passages or do other things.
I''m not a code expert, but if you like the idea of clickable images that link and do things in your Twine game, then you may be interested in these basic examples with source code.
First, some helpful links:
Now some Twee source code:
1. Basic Image Map with Twine Links. Here I took the W3Schools image map example and added JS Twine links to the href attribute field. Their site has an online code editor if you want to try out the original.
:: ImageMap
ImageMap test. Click on a planet.
<html><img src="http://www.w3schools.com/html/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="javascript:state.display('sun', this);">
<area shape="circle" coords="90,58,3" alt="Mercury" href="javascript:state.display('mercur', this);">
<area shape="circle" coords="124,58,8" alt="Venus" href="javascript:state.display('venus', this);">
</map></html>
:: sun
You clicked on the Sun.
:: mercur
You clicked on Mercury.
:: venus
You clicked on Venus.
The important bit is the href attribute: href="javascript:state.display('sun', this);" Replace sun with the name of the passage you want to link to.
2. Here is another Image Map that will update variables when clicked. I use some inline javascript to update a variable named planet, which I declared in my start passage if you look at the source code download. The page won't reflect the changes until it is refreshed, however, so some scripting and css might be required if you don't want the passage to self link to refresh.
:: Variable Update Test
Click on a planet.
<html><img src="http://www.w3schools.com/html/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="javascript:state.history[0].variables['planet'] = 'Sun';">
<area shape="circle" coords="90,58,3" alt="Mercury" href="javascript:state.history[0].variables['planet'] = 'Mercury';">
<area shape="circle" coords="124,58,8" alt="Venus" href="javascript:state.history[0].variables['planet'] = 'Venus';">
</map></html>
The planet variable is currently set to: <<print $planet>>
[[Then click here to refresh this passage|Variable Update Test]]
Here we changed the inline code to this: href="javascript:state.history[0].variables['planet'] = 'Sun';"
To make use of this yourself, replace planet with the name of your variable (note that you leave off the $ sign) and then put your variable contents inside of the ' ' symbols where I wrote Sun.
3. Here is an Image Map that combines both of the previous effects.
:: Link and Variable Update Test
Click on a planet.
<html><img src="http://www.w3schools.com/html/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="javascript:state.history[0].variables['planet'] = 'Sun';state.display('sun', this);">
<area shape="circle" coords="90,58,3" alt="Mercury" href="javascript:state.history[0].variables['planet'] = 'Mercury';state.display('mercur', this);">
<area shape="circle" coords="124,58,8" alt="Venus" href="javascript:state.history[0].variables['planet'] = 'Venus';state.display('venus', this);">
</map></html>
The planet variable is currently set to: <<print $planet>>
:: sun
You clicked on the Sun. The planet variable is currently set to: <<print $planet>>
:: mercur
You clicked on Mercury. The planet variable is currently set to: <<print $planet>>
:: venus
You clicked on Venus. The planet variable is currently set to: <<print $planet>>
Here we can see an important part of inline javascript: each line of code ends with ; symbol. You can put as many javascript lines in there as you want, though this is most likely not best practice at all.
Message has been deleted
ElliotM
Mar 1, 2013, 9:04:27 PM3/1/13
to twee...@googlegroups.com
Major disappointment when I noticed, but from among the main browsers only Chrome handles this code gracefully without triggering a new page with that message. Though you can hit the back button and reach the correct passage, it is still a big hit on the player experience.
sandwich puissant
Mar 1, 2013, 9:06:54 PM3/1/13
to twee...@googlegroups.com
in fact, i've found a solution for this, here is the code:
<html>
<div style="text-align:center; width:798px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_7201303011704233" src="IMAGE.JPG" usemap="#Image-Maps_7201303011704233" border="0" width="798" height="591" alt="" />
<map id="_Image-Maps_7201303011704233" name="Image-Maps_7201303011704233">
<area shape="poly" coords="721,278,719,262,720,249,721,240,714,237,698,237,692,245,692,260,692,269,693,286,693,295,705,300,716,303,730,302,739,297,737,290,731,289,724,287," href="#" onclick="javascript:state.display('PASSAGE', this);return false;" />
<area shape="rect" coords="796,589,798,591" href="IMAGE.JPG" />
</map>
</div>
</html>
<html>
<div style="text-align:center; width:798px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_7201303011704233" src="IMAGE.JPG" usemap="#Image-Maps_7201303011704233" border="0" width="798" height="591" alt="" />
<map id="_Image-Maps_7201303011704233" name="Image-Maps_7201303011704233">
<area shape="poly" coords="721,278,719,262,720,249,721,240,714,237,698,237,692,245,692,260,692,269,693,286,693,295,705,300,716,303,730,302,739,297,737,290,731,289,724,287," href="#" onclick="javascript:state.display('PASSAGE', this);return false;" />
<area shape="rect" coords="796,589,798,591" href="IMAGE.JPG" />
</map>
</div>
</html>
ElliotM
Mar 1, 2013, 9:32:15 PM3/1/13
to twee...@googlegroups.com
Great stuff, this works in Chrome, Firefox, and IE now. With the href blank you can still get the mouse over link / hand cursor to show up and the code in onclick will do the rest once the user clicks on it. I tried running it without the "return false;" but it is necessary for Firefox and IE to get it right.
HarmlessTrouble
Mar 30, 2013, 5:02:53 PM3/30/13
to twee...@googlegroups.com
Sounds like the known problem with the standard story formats from the gimcrack'd release. Updated versions of the story formats in the "target" folder are available from stormrose's alpha.
Reply all
Reply to author
Forward
0 new messages