Question

Firstly I hate IE but we all have to support it!

I have a map, on this map I have “hot spots” where the user hovers over and an image is displayed and some text is written.

<script src="jquery.js"></script>


<div style="width: 673px; position: relative" id="map">
    <div style="width: 45px; height: 45px; position: absolute; top: 550px; left: 295px;" id="meeting1"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 470px; left: 605px;" id="meeting2"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 155px; left: 438px;" id="meeting3"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 195px; left: 275px;" id="meeting4"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 217px; left: 230px;" id="meeting5"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 505px; left: 235px;" id="meeting6"></div>
    <img src="map-tour.png" width="673px" />

    <div style="width: 270px; height: 45px; border-style: solid; border-color: black; position: absolute; top: 600px; left: 370px;" id="display"></div>
</div>

<script>
$('#display').html('<p>--</p>');

$(document).ready(function () {
    $("#meeting1").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test1</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting2").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test2</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting3").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test3</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting4").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test4</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting5").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test5</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting6").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test6</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });
});
</script>

This works as expected within Chrome (in-fact jQuery.hover worked just fine) but does’t within IE. However, if I add border-style: solid; border-color: #0000; within the style on the #meeting1 divs it works fine!

Can anyone help!?

Thanks in advance.

Answer 1

Figured it out.

First I created a transparent image of 45px x 45px and then altered the HTML to include this image

<div style="width: 45px; height: 45px; position: absolute; top: 550px; left: 295px;" id="meeting1"><img src="t.png" /></div>

I then altered the javascript to read

$("#meeting1 img").on({
    mouseenter: function() {
        $(this).attr("src", "map-tour-hover-icon.png");
        $(this).attr("width", "75");
        $(this).attr("style", "position:absolute; top: -15px; left: -15px;");
        $("#display").html("<p>Text in there</p>");
    },
    mouseleave: function() {
        $(this).attr("src", "t.png");
        $('#display').html('<p>Replacement Text here</p>');
    }
});

So rather than updating the HTML within the div I update the image and its’ attributes.