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>