How do I create a hotspot in my background image?

  • I want to outline a rectangular hotspot link within the background PNG image in the body of my website. (The PNG is not part of a post or a page.) Is it possible? How? Where do I place the code?

    As far as I can see, the PNG image is referenced only within my style.css {body} section, not in the index.php where I have all of my non-post and non-page HTML. Does this mean I cannot define hotspots within it? I tried by adding the standard map-area shape-coords-href HTML code within the body section of my index.php, but it didn’t work.

    Any suggestions?

Viewing 6 replies - 1 through 6 (of 6 total)

  • What you’re looking for is an image map.

    But… That doesn’t work with background images, so if you need it on the background image you’ll have to do it in a different way.

    For background images, you can create something like this that will position an area over the background element:

    HTML code:

    <div class="with_background">
    <a href="https://www.link" id="my_link">My Link</a>
</div>

    CSS Code:

    .with_background {
    position: relative;
}
#my_link {
    position: absolute;
    top: 100;
    left: 100;
    display: block;
    width: 100px;
    height: 100px;
}

    Of course you’ll need ot do your own styling and positioning, but that’s the basics of it.

    Thread Starter Mickey Bo

    (@mickey-bo)

    I followed your instructions, but no joy! My cursor doesn’t turn into a pointing finger. It would seem logical to place a <div> right squarely over the portion of the body I want to be an image map hotspot, but it doesn’t work.

    Perhaps I should tell you that I’m using a custom theme designed by someone else. Maybe this makes a difference.

    Thank you very much for weighing in.

    No… if you have anything covering the link are, then that will… cover it. Custom theme or not doesn’t make a difference.

    But… As custom themes aren’t supported by these forums, you should ask your designer/developer for more assistance.

    Thread Starter Mickey Bo

    (@mickey-bo)

    The link area was clear, but still no go. My designer is no longer available, which is why I’m mastering this site myself. The hotspot is not a huge issue, just something I wanted to do. Maybe I’ll figure something out someday.

    Cheers and thanks again.

    https://www.image-maps.com/

    Check that link, I used it to create an image map recently and it worked out very well.

    Thread Starter Mickey Bo

    (@mickey-bo)

    To Catacaustic:

    I have a brand new problem relating to the HTML/CSS code you listed above. When the code did not work, I removed it, but for some strange reason, the HTML text I used between the “a href” links still lingers on my page! I have cleared the cache of every browser I have, to no avail. Then I cleared the cache of the plugin WP Super Cache and I even deactivated WP Super Cache. Still, no joy. After reactivating WP Super Cache, the text yet remains!

    To Evan Herman:

    Thanks for the link. I’ll look into that program.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How do I create a hotspot in my background image?’ is closed to new replies.

Tags