Image Map Woes…

  • So I have an Image Map actively working fine on it’s own HTML page, but when I try to put it into a WordPress page, weird things are happening. First, of all, I don’t want to put it in a frame, so let’s not go down that road..

    What is happening is that on the WordPress page the following is happening:

    1) It is only displaying the image for the first image map
    2) It is stacking the 4 image maps on top of each other
    3) It is only showing the first tooltip of each image map

    So, when you move your mouse around, the top left boxes, mystery boxes appear, but those are actually the first tooltips from the 3 other image maps that seem to be stacked on top of the first one.

    What I’ve tried:

    1) I’ve tried disabling all plugins, no joy.
    2) I’ve tried removing the image dimensions from the image map background, no change.
    3) I’ve tried surrounding each image map in divs

    So seem to have two issues to resolve. First, how do I get all 4 image maps to show and secondly, why is it only showing the first box of each image map?

    Here is the full working page out of WordPress.

    Here is my work in progress page.

    I’ve also taken someone elses demo code and pasted it in three times to see what happens and you can see it is also acting really strange (show images in top image map when hovering over third image map), but does show all 3 image maps.

    Any suggestions or help would be greatly appreciated! If you need anymore info then please let me know. I’m hoping that there is not just some weird limitation of WordPress to only show one image map per page or something.

Viewing 15 replies - 1 through 15 (of 15 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Look at the HTML of the wordpress page https://snag.gy/0Zxxd.jpg

    Are you sure you’re using valid HTML? I think WordPress will try to close ‘unclosed’ tags and that might be causing this

    Thread Starter slowreflex

    (@slowreflex)

    HTML is fine as far as I know. Here’s one of the image maps:

    <img src="wp-includes/images/Research/AL_Research_Security.png" width="690" height="235" border="0" usemap="#ALmap2" />
<map name="ALmap2">
    <area shape="poly" coords="184,8,184,42,227,42,232,38,233,9" href="#" tooltip="<img src='wp-includes/images/Research/AL_Hangar_Defense.png' width='278' height=215 />" />
    <area shape="poly" coords="248,54,249,88,291,88,296,84,296,55" href="#" tooltip="<img src='wp-includes/images/Research/AL_Skilled_Hangar_Anima.png' width='278' height=253 />" />
    <area shape="poly" coords="248,146,248,180,291,181,296,177,296,146" href="#" tooltip="<img src='wp-includes/images/Research/AL_Homing_Mines_Design.png' width='278' height=233 />" />
    <area shape="poly" coords="312,8,313,42,355,42,360,38,360,9" href="#" tooltip="<img src='wp-includes/images/Research/AL_Shield_Bestowal.png' width='278' height=233 />" />
    <area shape="poly" coords="312,54,312,88,355,88,360,84,361,55" href="#" tooltip="<img src='wp-includes/images/Research/AL_Enduring_Devotion.png' width='278' height=269 />" />
    <area shape="poly" coords="312,146,312,180,355,181,360,176,360,147" href="#" tooltip="<img src='wp-includes/images/Research/AL_Savior_Design.png' width='278' height=215 />" />
    <area shape="poly" coords="312,192,312,226,355,227,360,221,360,193" href="#" tooltip="<img src='wp-includes/images/Research/AL_Evangelization_Nodes.png' width='278' height=251 />" />
    <area shape="poly" coords="376,9,377,42,419,42,424,38,424,9" href="#" tooltip="<img src='wp-includes/images/Research/AL_Synergy.png' width='278' height=233 />" />
    <area shape="poly" coords="376,54,376,88,419,88,424,83,425,54" href="#" tooltip="<img src='wp-includes/images/Research/AL_Merchant_Docks.png' width='278' height=215 />" />
    <area shape="poly" coords="376,100,377,134,418,134,424,129,425,100" href="#" tooltip="<img src='wp-includes/images/Research/AL_Mass_Disorientation.png' width='278' height=215 />" />
    <area shape="poly" coords="376,192,376,226,419,226,424,221,424,192" href="#" tooltip="<img src='wp-includes/images/Research/AL_Induced_Reverence.png' width='278' height=251 />" />
    <area shape="poly" coords="440,8,440,42,483,42,488,37,489,9" href="#" tooltip="<img src='wp-includes/images/Research/AL_Hardened_Cities.png' width='278' height=243 />" />
    <area shape="poly" coords="439,191,439,226,484,227,489,221,489,191" href="#" tooltip="<img src='wp-includes/images/Research/AL_Cowards_Submission.png' width='278' height=261 />" />
    <area shape="poly" coords="504,100,505,134,547,134,552,129,552,100" href="#" tooltip="<img src='wp-includes/images/Research/AL_Immaculate_Defense.png' width='278' height=271 />" />
    <area shape="poly" coords="504,146,504,180,546,180,551,175,552,146" href="#" tooltip="<img src='wp-includes/images/Research/AL_Meteoroid_Control.png' width='278' height=233 />" />
    <area shape="poly" coords="568,54,568,88,611,88,617,83,617,54" href="#" tooltip="<img src='wp-includes/images/Research/AL_Amplified_Punishment.png' width='278' height=307 />" />
</map>
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Where are you putting this HTML?

    Thread Starter slowreflex

    (@slowreflex)

    In the page text.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the Visual editor?

    Thread Starter slowreflex

    (@slowreflex)

    No, in the Text editor.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Does the issue persist when you insert this in the Text editor on a brand new page?

    Thread Starter slowreflex

    (@slowreflex)

    Yes, no difference making a new page.

    Thanks for your help btw. Hopefully we will get there eventually. ??

    Thread Starter slowreflex

    (@slowreflex)

    I made a page with just one of the image maps here and I still have the problem of it only wanting to display the first tooltip. So that issue seems un-related to the issue of not being able to display multiple image maps on the same page. Or atleast, it’s an issue in itself. It may be the cause of not being able to display multiple image maps as well.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Wait a minute, is there some JavaScript that comes with this HTML?

    Thread Starter slowreflex

    (@slowreflex)

    I have the following in the header.php

    <script src="https://code.jquery.com/jquery-1.11.2.js"></script>

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
        $(function() {
            $( document ).tooltip({track: true},{
                items: "[tooltip]",
                content: function() {
                    var element = $( this );
                    if ( element.is( "[tooltip]" ) ) {
                        return element.attr( "tooltip" );
                    }
                }
            });
        });
</script>

    And this in the CSS

    .ui-tooltip {
            border: none;
            padding: 0px;
            position: absolute;
            background: transparent;
            z-index: 9999;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

    I’ve been testing some other things and I can get more than one tooltip to show up if I don’t use the image tooltips, but just simple text. For example:

    <area shape="poly" coords="183,390,184,426,229,426,233,421,233,391" href="#" tooltip="<img src='wp-includes/images/Research/AL_Acolyte_Corvette.png' width='278' height=233" />

    That above will only show the first tooltip.

    <area shape="poly" coords="184,299,184,333,228,333,233,328,232,299" href="#" tooltip="Test" />

    That above will show all tooltips.

    I don’t understand why though. Again, this works fine on it’s own webpage (not WordPress).

    Thread Starter slowreflex

    (@slowreflex)

    Anyone else have any ideas? I’m completely stuck on this one.

    “https://soase.com/?page_id=2&#8221; has stopped working.

    Before that, the console was showing some required png file not found, and maybe this error is causing the JavaScript to exit early.

    The jQuery versions are not the same. Consider using the same versions on the test as on the WordPress site.

    Consider trying to get the page to validate fully. OK, this is probably not the problem but if you are looking for an error, then full validation would be one less possible cause.
    https://validator.w3.org/

    Was this ever resolved? I’m trying for the same effect with an image map and I can’t get anything to work.

    @jgold723
    Please post a link to the relevant page.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Image Map Woes…’ is closed to new replies.

Tags