Howdy, Stranger!

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

Imagemap clarification questions (Sugarcube)

edited February 2015 in Help! with 1.x
I've already read the threads on image maps, and I thought at the time that the examples were pretty clear, but I'm still running into problems.

HTML image format with (part of) the image map:
<img id="image" src="bookshelf.jpg" usemap="#books" />
<map name="books" id="books1">
<area shape="rect" coords="131,76,168,275" data-passage="Book 1" title="Book 1 Title" /></map>

I thought I had the map itself set up just like the examples, but once I got the image to load (I had trouble with some overly-specific image paths in the examples I found), there were still no clickable areas on it - and I'm actually defining six areas, not just one! Do I have a syntax error somewhere? Edit: Nevermind, the links work. There's just no visible way to tell that there are any clickable areas, other than the title appearing on mouse hover. I suppose I need to put a note at the top saying "Click a book to read it." or something then. I would normally assume the mouse icon would change just the same as any other link, but it isn't doing that. Is there a way to force this behavior, I wonder?

Second, will using image maps be a problem when it comes time to distribute the finished html file? The Twine wiki says it's not possible to use the original HTML image format with imported image assets. I thought the point of importing assets was to keep everything in one file for ease of distribution. Will I have to zip it together with this one image (or however many images use image maps)?

Third (and maybe this answers the second question), how does using an image passage to replace the src work? Should that be an imported image name, or should it be a regular passage that contains a normal img statement?

Thanks!

Comments

  • External vs Embedded Images:
    As explained in this post the Twine 1.x application is unable to create your story HTML file if the total MB's of embedded images becomes too large, so if you are planing to use a lot of images then the suggestion is to store them externally.

    SugarCube's HTML Attributes documentation explains how to reference an image passage when using a HTML <img> tag:

    <img data-passage="ImagePassageTitle">
    It is common to store all external images (or other assets) within a sub-directory / sub-folder directly below the one containing your story's HTML file.
    When creating the ZIP file to ship your story, remember to include both the HTML file as well as the sub-directory / sub-folder within the ZIP file.
  • telyni wrote:

    I would normally assume the mouse icon would change just the same as any other link, but it isn't doing that. Is there a way to force this behavior, I wonder?


    I don't believe that has ever been the default behavior for imagemaps.  However, yes, you can enable that behavior.  The following CSS should do what you want:

    area:hover {
    cursor: pointer;
    }

    telyni wrote:

    Second, will using image maps be a problem when it comes time to distribute the finished html file?


    Not unless you plan to embed many megabytes worth of images, no.  If that is your plan, then greyelf has already covered why that could be problematic.


    telyni wrote:

    The Twine wiki says it's not possible to use the original HTML image format with imported image assets.


    The wiki is incorrect there (that's long out of date and should be corrected).  As pointed out by greyelf and SugarCube's docs, the you'd use the data-passage attribute in place of the src attribute to specify the image passage.  This is true for both SugarCube and the vanilla story formats (like Sugarcane).
  • Thanks for the help. I don't think I'll get anywhere near the memory limit - I'm somewhere around halfway through the project so far, and it's at 6 MB (although with image maps, I may add a few more graphical touches to the interface).

    I honestly don't understand why you wouldn't want the cursor to change by default over a clickable image, especially if only part of the image is clickable. How else is the user supposed to know where it's clickable (other than visible borders on the areas, which might be rather ugly, depending on the image)? The example over at W3Schools changes the cursor in exactly this way: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap. And there's nothing in the code there that specifies the cursor changing, so it has to be a default of some kind. I do have a custom cursor specified in this project; maybe that's interfering somehow? I used the example and replaced "pointer" with my custom cursor definition and now it works just fine, so that's okay. I'll have to remember to define the cursor for any future projects though too.

    After reading these messages, it still isn't clear to me what an Image Passage actually means. But the other thread about memory limits says, "The drag-n-drop image, the Story > Import Image > ... menu item, and answering YES to the "Do you want to import the image" question when closing the Passage Editor all do the same thing, they add an Image Passage to your story with the contents of the image file contained inside that passage." So an imported image IS an Image Passage. That was not clear in any other documentation I read. So I have to use a data-passage attribute to specify an image name and then overlay an image map which itself contains data-passage attributes to determine which regular text passage to display as a result of the click. Got it. (It all works great now!)
  • telyni wrote:

    I honestly don't understand why you wouldn't want the cursor to change by default over a clickable image, especially if only part of the image is clickable. How else is the user supposed to know where it's clickable (other than visible borders on the areas, which might be rather ugly, depending on the image)? The example over at W3Schools changes the cursor in exactly this way: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap. And there's nothing in the code there that specifies the cursor changing, so it has to be a default of some kind. I do have a custom cursor specified in this project; maybe that's interfering somehow? I used the example and replaced "pointer" with my custom cursor definition and now it works just fine, so that's okay. I'll have to remember to define the cursor for any future projects though too.


    You're conflating the behavior of an <area> tag, in general, and one with an href attribute (which the w3schools examples have).  Even anchors (<a> tags) do not have a default cursor behavior, the pointer cursor everyone is used to is applied because of the href attribute (which is why when they don't have an href, like most <a> links in Twine story formats, the cursor has to be specified manually).
  • TheMadExile wrote:

    You're conflating the behavior of an <area> tag, in general, and one with an href attribute (which the w3schools examples have).  Even anchors (<a> tags) do not have a default cursor behavior, the pointer cursor everyone is used to is applied because of the href attribute (which is why when they don't have an href, like most <a> links in Twine story formats, the cursor has to be specified manually).


    Oh, huh. That makes sense. (HTML isn't my strong suit, clearly. CSS makes me want to break things. But anyway.) So Twine imagemap areas don't use the href tag, so the default link cursor isn't applied. Interesting. I knew there had to be a rational explanation. Thanks again!
  • telyni wrote:
    So Twine imagemap areas don't use the href tag, so the default link cursor isn't applied.

    The image map area HTML tags are yours so if you want to add href properties to them you can, it has nothing to do with the Twine 1.x story formats.

    Based on your example, added href="#" to end of area tag which causes the cursor to change shape on hover / mouse-over

    HTML image format with (part of) the image map:
    <img id="image" src="bookshelf.jpg" usemap="#books" />
    <map name="books" id="books1">
    <area shape="rect" coords="131,76,168,275" data-passage="Book 1" title="Book 1 Title" href="#" />
    </map>
  • greyelf wrote:

    Based on your example, added href="#" to end of area tag which causes the cursor to change shape on hover / mouse-over


    Please, no one should do what greyelf just suggested.  Adding nonfunctional href attributes (e.g. href=&quot;#&quot; or href=&quot;javascript:void(0)&quot;) just to receive the pointer cursor is cagro cult programming nonsense.  The correct way to get the pointer cursor is to use CSS similar to what I outlined above.

    Technically, support for the pointer cursor on data-passage bearing &lt;area&gt; tags should be included within the story formats (and I've just added it to SugarCube's repo), so you don't have to worry about it (as is done with other link types).  The only excuse for the current situation is that imagemaps are fairly rare now a days, so they often don't get thought of when plumbing things out.
  • Haha, I just came back to this thread and saw the last exchange, which made me seriously LOL. My first reaction to the hack was, "What does href = "#" even mean? Why would I ever think to write that?"

    Yeah, I imagine imagemaps aren't the first thing people think of when they think about writing a text-based story in Twine, but given that I'm converting a printed gamebook with images of rooms with numbered doors and bookshelves with numbered books, it totally makes sense to use them in my project.
Sign In or Register to comment.