JavaScript ImageSlider don't work
Hello :) Why do this JavaScript not work in the FF 3.6 but in the IE7/8 this Script works good?
You can see the Problem on this Site: http://www.conventioncologne.de/en/social-program/city-tours/adventure-tours/tutanchamun-late-walk-allein-mit-dem-pharao.html
imgslider.js
Array.prototype.search = function(value, strict )
{
if( typeof value == "undefined" ) {
return false;
}
var retVal = false;
if( strict ) {
for( key in this ) {
if( this[key] === value ) {
retVal = key;
break;
}
}
} else {
for( key in this ) {
if( this[key] == value ) {
retVal = key;
break;
}
}
}
return retVal;
}
var smallimg = new Array();
var bigimg = new Array();
window.addEvent('load', function(){
var list = $$('div.smalldiv');
list.each(function(element) {
var imageset = parseInt(element.getAttribute('imageset'));
var layertop = $('layertop'+imageset);
var layerbottom = $('layerbottom'+imageset);
var fx = new Fx.Styles(layertop, {duration:500, transition: Fx.Transitions.linear});
element.addEvent('mouseenter', function(){
var newfilename = element.getStyle('background-image');
newfilename = newfilename.replace(/^url\(/,"");
newfilename = newfilename.replace(/\)$/,"");
var posnewfilename = smallimg[imageset].search(newfilename);
var newbackground = 'url('+bigimg[imageset][posnewfilename]+')';
var oldbackground = layerbottom.getStyle('background-image');
old = oldbackground.replace(/^url\(/,"");
old = old.replace(/\)$/,"");
var posoldfilename = bigimg[imageset].search(old);
var smallbackground = 'url('+smallimg[imageset][posoldfilename]+')';
element.setStyle('background-image',smallbackground);
layertop.setStyle('opacity','1');
layertop.setStyle('background-image',oldbackground);
layerbottom.setStyle('background-image',newbackground);
fx.start({
'opacity': '0.0'
});
});
element.addEvent('mouseleave', function(){
});
});
});
And this is the HTML Script:
<script type="text/javascript">
bigimg['23853'] = new Array();
smallimg['23853'] = new Array();
bigimg['23853'][2]="typo3temp/pics/fee2d2a895.jpg";bigimg['23853'][1]="typo3temp/pics/e6921d3e9b.jpg";bigimg['23853'][0]="typo3temp/pics/88b5582780.jpg";
smallimg['23853'][2]="typo3temp/pics/c39223197f.jpg";smallimg['23853'][1]="typo3temp/pics/1bec8c0545.jpg";smallimg['23853'][0]="typo3temp/pics/6b8d3cdc74.jpg";
</script>
And the DIV's for the Slider:
<div>
<div style="position: relative; display: block; float: left;">
<div style="display: block; float: left; width: 235px; height: 133px;">
<div id="layerbottom23853" style="position: absolute; top:0px; left: 0px; width: 235px; height: 133px; background: url(typo3temp/pics/88b5582780.jpg)">&l开发者_如何转开发t;/div>
<div id="layertop23853" style="position: absolute; top:0px; left: 0px; width: 235px; height: 133px;"></div>
</div>
</div>
</div>
<div id="small" style="display: block; float: left; clear: left; margin: 10px 0 0 0;">
<div id="small_img1" class="smalldiv" imageset="23853" style="margin: 0 10px 0 0; display: block; float: left; width: 112px; height: 64px; background: url(typo3temp/pics/1bec8c0545.jpg)"></div>
<div id="small_img2" class="smalldiv" imageset="23853" style="margin: 0 10px 0 0; display: block; float: left; width: 112px; height: 64px; background: url(typo3temp/pics/c39223197f.jpg)"></div>
</div>
I have found the Problem. Here is the Fix:
newfilename = newfilename.replace(/^url\(\"/,"");
newfilename = newfilename.replace(/\"\)$/,"");
and
old = oldbackground.replace(/^url\(\"/,"");
old = old.replace(/\"\)$/,"");
精彩评论