Howdy, Stranger!

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

[Twine 2.0.11] [Sugarcube 1.0.34] Yet Another Image Map Question

I've seen quite a few old threads on using image maps, and while my coding abilities are out of date and never were too advanced to begin with, I DID manage to get what I was doing with it all figured out... (here it comes...)
...but it just. Won't. Work.
I'm using a local image, and a testing project file to figure it out sans screwing up the main project, but ARGH.
this is for testing purposes.

<html><map name="testporch">
<area shape="rect" coords=10,0,75,60" data-passage="windowsit">
<area shape="rect" coords=100,0,180,60" data-passage="farntdoors">
<area shape="rect" coords=360,10,400,90" data-passage="ilikeplants">
</map>
<img usemap="#testporch" src="images/mansporch.gif"></html>

The other passages exist, the file is there, and I've also tried the code with the data-passages starting with hashtags.
The image shows up just fine.
The mouse goes to the link mode over the right places on the image.
Clicking on the area locations does...... nothing. If I have the #'s, it alters the location path in the browser to show "#windowsit" or the like, but does not move me to another passage.

What the flaming chicken mcnuggets am I doing wrong? XD
(the image is a low-detail placeholder for the eventual map image) (yes, i know any size changes will change the coordinates)
html
html
testing.html
1K
mansporch.gif
407 x 116 - 4K

Best Answer

  • Answer ✓
    Fix the coords attributes. Each is missing their opening quote.

Answers

  • Please use the code tag—it's C on the editor bar—when posting code or markup.


    You should not be using the <html>…</html> passthrough markup here—only very rarely is it required and this isn't one of those times. As it's name suggests, it bypasses SugarCube's normal HTML markup processing, thus the data-passage attributes are not being handled as they should.

    In other words, do something like the following:
    <map name="testporch">
    <area shape="rect" coords=10,0,75,60" data-passage="windowsit">
    <area shape="rect" coords=100,0,180,60" data-passage="farntdoors">
    <area shape="rect" coords=360,10,400,90" data-passage="ilikeplants">
    </map>\
    <img usemap="#testporch" src="images/mansporch.gif">
    
  • Alright, I can understand that, but when I use it like that, it does not run the <area> lines. It prints them out on screen in both the test mode, and published file.
  • Well, okay now. Now that I feel kind of unbelievably stupid for not spotting the missing quotation marks, it's working perfectly!

    Thank you, Exile. Sorry for having to bother you again with that.
    ...and for screwing up on the quotation marks...
    ...and for not realizing there was a specific button for code references...

    ...I'm going to go hide under a pillow now, but THANK YOU!!
  • @Niekitty: Making mistakes is never an issue because they are a part of learning, unless you keep making the same mistakes again and again. *smile*
  • Niekitty wrote: »
    ...and for screwing up on the quotation marks...
    No sweat. I didn't think to look for other issues initially either.
Sign In or Register to comment.