Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

need help getting imgmap working

using [[braces]] breaks the html and stops the imgmap from working. And not using braces doesn't work either, it tries to send me to an invalid page... i dont know what else i can do to link passages together.

Comments

  • Which story format are you using?

    Are you just trying to display a grid of images, each one sending the reader to a different passage when clicked on?

    If not, could you include an example of what your tying to do?
    (Don't try and insert the [[link]], just place the passage title the area should send the reader to within the href)
    eg.

    <map name="a">
    <area shape="rect" coords="25,25,75,75" href="#fail">
    </map>
    <img usemap="#a" src="image.png">
  • greyelf wrote:

    Which story format are you using?

    Are you just trying to display a grid of images, each one sending the reader to a different passage when clicked on?

    If not, could you include an example of what your tying to do?
    (Don't try and insert the [[link]], just place the passage title the area should send the reader to within the href)
    eg.

    <map name="a">
    <area shape="rect" coords="25,25,75,75" href="#fail">
    </map>
    <img usemap="#a" src="image.png">


    No, i'm not using a grid. I chose image maps because I wanted to use abstract shapes.

    I tried using the hashtag but it brought up an error message. It said Error: script error.

    i'm using SugarCube 1.0.13
  • Try using SugarCube's  <History>.display(passageTitle) API function within the Area tag's onclick event.

    <map name="face">
    <area shape="rect" coords="25,25,75,75" onclick='SugarCube.state.display("Next Passage")'>
    </map>
    <img usemap="#face" src="images/smilyface.png" width="200px">
  • Use the data-passage attribute on your &lt;area&gt; tags.  For example:

    <area shape="rect" coords="25,25,75,75" data-passage="Some Passage Title">
  • greyelf wrote:

    <area shape="rect" coords="25,25,75,75" onclick='SugarCube.state.display("Next Passage")'>


    Please, do not advise people to use the SugarCube global object like that.  It exists for debugging inspection only and may be folded, spindled, and mutilated without warning.
  • TheMadExile wrote:

    Please, do not advise people to use the SugarCube global object like that.  It exists for debugging inspection only and may be folded, spindled, and mutilated without warning.

    As I could not find the documentation on how to use element properties to achieve his desired result I was left with giving the advice I did. I will try to remember the property's name in the future.
  • That is an unfortunate hole in the docs, which I really need to rectify soon.

    Synopsis:
    In pretty much any HTML tag where you would use the href attribute as a link source, the data-passage attribute may be used instead to create a passage link.  Additionally, HTML tags which are links may also use the data-setter attribute, which replicates the setter component of wiki links.

    The &lt;img&gt; tag also supports the data-passage attribute, which is used in place of the src attribute to reference an image passage.
  • it worked! Thanks for the help, TheMadExile  :)
  • Hey Marysue - could you provide an example? Sorry, just can't get it... thank you!
Sign In or Register to comment.