I have an svg object on my page, with mouseovers that call a function on the page itself (outside of the svg). This function shows/hides divs on the page by id: onmouseover="top.showit('option28')"

When the page is first loaded, the divs hide/show just as they're supposed to.

But I have separate navigation (#change_svgs) that changes the innerhtml of the div containing the svg file (#unit_rollovers), to bring up a different svg file. The file loads fine, but my div rollovers no longer work. Any suggestions?

Here's the html with the javascript on the page:

<script>
$(document).ready(function(){

$('#levels_23,#levels_45678,#levelscollection').click(function(){

        $('.feature_subnav').removeClass('features_selected'); // side nav
        var selected_li =  $(this).attr('id');
        $('.unit_details').css('opacity', '0');

        if ( selected_li == "levels_23"){

            $("#unit_rollovers").html('<object id="g01" style="overflow:hidden;position:relative;top:-44px;left:71px;height:377px; width:475px;display:block;" data="floorplan_rolls_1.svg" type="image/svg+xml" codebase="http://www.savarese.com/software/svgplugin/"></object>');  

        } 
        else if ( selected_li == "levels_45678"){

            $("#unit_rollovers").html('<object id="g02" style="overflow:hidden;position:relative;top:-44px;left:71px;height:377px; width:475px;display:block;" data="floorplan_rolls2.svg" type="image/svg+xml" codebase="http://www.savarese.com/software/svgplugin/"></object>');

            $.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
            if ($.browser.safari) {
                // $('#unit_rollovers').attr('left','10px').attr('top','8   0px');
                $("#g02").css({left:"29px"},100);
                $("#g02").css({top:"16px"},100);
                $("#g02").css({height:"450px"},100);
                $("#g02").css({width:"210px"},100);
            }

        } 

        else if ( selected_li == "levelscollection"){

            $("#unit_rollovers").html('<object id="g03" style="overflow:hidden;position:relative;top:-44px;left:71px;height:377px; width:475px;display:block;" data="floorplan_rolls3.svg" type="image/svg+xml" codebase="http://www.savarese.com/software/svgplugin/"></object>');

            $.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
            if ($.browser.safari) {
                // $('#unit_rollovers').attr('left','10px').attr('top','8   0px');


            }

        } 

        else {
            /* do nothing */ 
        }


    });
});


</script>

<ul id="change_svgs" style="line-height:2em;z-index:2;">
    <li><a style="color:#000;" class="feature_subnav features_selected" id='levels_23' href='#'>LEVELS 2/3</a></li>
    <li><a style="color:#000;" class="feature_subnav" id='levels_45678' href='#'>LEVELS 4/5/6/7/8</a></li>      
    <li style="line-height:.9em !important;"><a style="color:#000;" class="feature_subnav" id='penthouse_collection' href='#'>PENTHOUSE COLLECTION<BR />LEVELS 9/10/11</a></li>  
</ul>


<div id="unit_rollovers" style="height:0px;overflow:visible;z-index:100;">
    <object id="g01" style="overflow:hidden;position:relative;top:-44px;left:71px;height:377px; width:475px;display:block;" data="/floorplan_rolls1.svg" type="image/svg+xml" codebase="http://www.savarese.com/software/svgplugin/"></object> 
</div>

<script>

function showit(evt) {
 $('.unit_details').css('opacity', '0');
 document.getElementById(evt).style.opacity = '1';
}
</script>

And the SVG file, if needed:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
      width="550" height="250"  viewBox="0 0 650 350">

      <style type="text/css" media="screen">
     .overlay1 { opacity:0;}

    .overlay1:hover { opacity:.9; }


    </style>

     <g class="overlay1"
onmouseover="top.showit('option28')">

        <path d="M0,0   51,0   51,70   0,70" style="fill:#97aa2b;" />
        <text x="12" y="45" font-family="Verdana" font-size="17" fill="white" 
        > 04 </text>
      </g>



      <g class="overlay1"
onmouseover="top.showit('option29')">

        <path d="M52,0 97,0 97,70 52,70" style="fill:#97aa2b;" />
        <text x="52" y="45" font-family="Verdana" font-size="17" fill="white" 
        > 05 </text>
      </g>

<!-- several other links -->

</svg>

neeever mind.. I found a display:none; that wasn't supposed to be in there.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.