Image Mapping

  • Resolved aikorei

    (@aikorei)


    12 years, 7 months ago

    Site: https://www.crowdfundable.com/startuphangout/

    I’m trying to follow directions from this thread to create an image map on a landing page. I’ve tried using standard image mapping, but my editor doesn’t want to allow more than one area on the image to use as a link.

    In short, I’ve copied the following code and pasted it into my html editor on my WP page, but to no effect:

    <div>
<img class="alignnone  wp-image-397" title="SHLandingPage" src="https://www.crowdfundable.com/startuphangout/wp-content/uploads/2012/08/SHLandingPage.png" alt="" width="960" height="1351" usename="#signup" />

<map name="#signup" id="signup"> 

<area shape="rect" coords="575,330,385,395" href="https://www.crowdfundable.com/startuphangout/signup/" alt="Signup!" />

<area shape="rect" coords="575,785,385,845" href="https://www.crowdfundable.com/startuphangout/signup/" alt="Signup!" />

<area shape="rect" coords="575,1220,385,1285" href="https://www.crowdfundable.com/startuphangout/signup/" alt="Signup!" />

<area shape="rect" coords="950,820,890,880" href="#top" alt="Top" />

<area shape="rect" coords="950,1225,890,1280" href="#top" alt="Top" />

</map>
</div>

    Can anyone tell me why this isn’t working? I’m starting to think WP hates me. ??

    Any help is much appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter aikorei

    (@aikorei)

    No suggestions for this? Rather frustrating that only one link at a time works.

    i’ve successfully done this before, as seen here: https://www.tsamonterey.com/christmas/

    Using this actually: https://www.image-maps.com/

    I’ve never done the image mapping manually, but the code from their site has worked well for me in several instances.

    Thread Starter aikorei

    (@aikorei)

    Actually, I realized just now that I had syntax errors. The following code worked:

    <a name="top"></a>

<div>
  <img class="aligncenter  wp-image-449" title="Texture-Wide" src="https://www.crowdfundable.com/startuphangout/wp-content/uploads/2012/08/Texture-Wide.png" alt="Texture-Wide" width="1000" height="51" />
</div>

<div>
  <img class="aligncenter  wp-image-449" title="Texture-Wide" src="https://www.crowdfundable.com/startuphangout/wp-content/uploads/2012/08/Texture-Wide.png" alt="Texture-Wide" width="1000" height="51" />
</div>

<div>
  <img class="wp-image-397 aligncenter" title="StartUp Hangouts" src="https://www.crowdfundable.com/startuphangout/wp-content/uploads/2012/08/SHLandingPage.png" alt="Sign up for Startup Hangouts at https://www.crowdfundable.com/startuphangout/signup/" width="1000" height="1420" usemap="#signup"/>
  <map id="signup" name="signup">
    <area shape="rect" coords="595,340,395,410" href="https://www.crowdfundable.com/startuphangout/signup/" alt="Signup!" />
    <area shape="rect" coords="595,810,395,880" href="https://www.crowdfundable.com/startuphangout/signup/" alt="Signup!" />
    <area shape="rect" coords="595,1265,395,1335" href="https://www.crowdfundable.com/startuphangout/signup/" alt="Signup!" />
    <area shape="rect" coords="960,825,900,885" href="#top" alt="Top" />
    <area shape="rect" coords="985,1280,925,1335" href="#top" alt="Top" />
  </map>
</div>

    (Pasted in the HTML editor for my pages)

    Thanks for the help anyway, melfelk.

    Yeah, that will do it! Glad you got it fixed regardless.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Image Mapping’ is closed to new replies.