Question

HI
In my project I have a Popup image .
When the user clicks on the left part of the image it will redirect the user
to page1.aspx. When the user clicks on the right part of the image
it will redirect the user to page2.aspx. I used JQuery for this and it works
fine in Fire fox. But it doesn’t work in IE.
What could be the reason,. Any help will be appreciated.

Thanks

Here is the code

<script type="text/javascript">
swfobject.registerObject("inhalerVideo", "9.0.0", "expressInstall.swf");
/* jQuery Nonsense */
$(document).ready(function()
{
    //!\: Slider nav thingy.
    $("#link_one").click(function()
    {
        var aWidth = $(this).width();
        if($(this).hasClass("closed"))
        {
            $(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
            if($("#link_two").hasClass("open"))
            {
                var bWidth = $("#link_two").width();
                $("#link_two").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
                $("#link_two a").hide();
            }
            $("a", this).show();
        }
        else
        {
            $("a", this).hide();
            $(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
        }
    });
    $("#link_two").click(function()
    {
        var aWidth = $(this).width();
        if($(this).hasClass("closed"))
        {
            $(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
            if($("#link_one").hasClass("open"))
            {
                var bWidth = $("#link_one").width();
                $("#link_one").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
                $("#link_one a").hide();
            }
            $("a", this).show();
        }
        else
        {
            $("a", this).hide();
            $(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
        }
    });
    //!\: This could all be achieved with CSS.
    $(".subnavonfirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
    $(".subnavon").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
    $(".subnavonlast").prev(".subnavoff").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
    $(".subnavonlast").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
});
</script>

<!-- Main Content Container -->
    <div id="mainContentContainer">

        <!-- Top Link Slider -->
        <div id="headerContainer" class="printHide">
            <div id="headerLinkContainer">
              <div id="banner_container">
                <div id="link_one" class="sub closed">
            <img class="major" src="images/patient_info.gif" border="0" />
            <img class="minor" src="images/sub_nav.gif" border="0" />
            <a href="http://www.mysite.com/files/products/uspi_nicotrol_inhaler.pdf" class="inhaler" rel="external" target="_blank"><!-- --></a>
            <a href="http://www.mysite.com/files/products/uspi_nicotrol.pdf" class="ns" rel="external" target="_blank"><!-- --></a>
        </div>
                <div id="link_two" class="sub closed">
            <img class="major" src="images/prescribe_info.gif" border="0" />
            <img class="minor" src="images/sub_nav.gif" border="0" />
            <a href="http://www.mysite.com/files/products/uspi_nicotrol_inhaler.pdf" class="inhaler" rel="external" target="_blank"><!-- --></a>
            <a href="http://www.mysite.com/files/products/uspi_nicotrol.pdf" class="ns" rel="external" target="_blank"><!-- --></a>
        </div>
                <div id="link_three" class="open"><a href="#ISIContainer"><img src="images/isi.gif" border="0" /></a></div>
              </div>            
            </div>

        </div>

Answer 1

Have you tried using an imagemap? That way it’s supported by almost all browsers, including IE.

You can also capture the click() event of the <area> tag if you wish.

EDIT: Upon looking at your site, perhaps you could bind the expanding div functionality to the image .major rather than to the .sub div.

It looks like the .sub div is intercepting the click event on IE, but standards-compliant browsers understand that the .minor picture should be rendered ‘above’ the .sub div.