我确实与以下各点相联。
当陶瓷在FF/Chrome等地制造时,就点击了下台的图像,而后台状态则留待你再次点击。 在IE7中,图像在一种地方移动,而后 h状态则失败,而且没有重新出现。 我对我的网页的其他影响继续发挥作用。
我的笑话也许不是最好的,因此我对各位表示歉意。 除现存问题外,任何普通大陪审团都表示欢迎。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<title>GA - 2009 yee haw</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.dimensions.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<style type="text/css" media="all">
@import "/css/screen.css";
</style>
</head>
<body>
<script type="text/javascript">
<!--//
function DrawGalleryOptions(div) {
$( gallery ).css({width: 503px });
$(div).append( <div class="gallery-title"><p style="font-size:14px;">no title</p><div class="gallery-bg gallery-bg-small"></div></div> );
$(div).append( <div class="gallery-nav"></div> );
$( .gallery-nav ).append( <div class="gallery-bg"></div><div class="gallery-controls"><p class="gall-title"><a class="gallleft" href="#galleryleft" title="">Previous Image</a><a class="gallright" href="#galleryright" title="">Next Image</a></p></div> );
$( .gallery-title, .gallery-nav, .gallery-bg ).css({ position: absolute , left: 0px , height: 30px , width: 503px });
$( .gallery-nav ).css({ height: 60px , bottom: -60px });
$( .gallery-bg ).css({ backgroundColor: #5974c5 , opacity: 0.7, height: 60px , zIndex: 1000 });
$( .gallery-title ).css({ top: -30px });
$( .gallery-controls ).css({ position: absolute , zIndex: 1002 });
$( .gallery-bg-small ).css({height: 30px });
$( .gallery-title p ).css({zIndex: 1002, color: #ffffff , position: absolute , padding: 5px });
$( .gallery-controls p ).css({ posistion: absolute , zIndex: 1005, left: 0px , top: 0px });
$( a.gallleft ).css({ width: 82px , height: 45px , display: block , textIndent: 0 , backgroundImage: url(/image/galleryleft.gif) , backgroundPosition: left top , backgroundRepeat: no-repeat , fontSize: 11px , color: #ffffff , top: 15px , left: 15px , position: absolute , paddingTop: 25px });
$( a.gallright ).css({ width: 53px , height: 45px , display: block , textIndent: 0 , backgroundImage: url(/image/galleryright.gif) , backgroundPosition: right top , backgroundRepeat: no-repeat , fontSize: 11px , color: #ffffff , top: 15px , left: 430px , position: absolute , paddingTop: 25px });
}
function ShowGalleryOptions() {
jQuery.easing.def = "easeOutQuint";
$( .gallery-title ).animate({ top: 0px }, 800);
$( .gallery-nav ).animate({ bottom: 0px }, 800);
}
function HideGalleryOptions() {
$( .gallery-title ).animate({ top: -30px }, 800);
$( .gallery-nav ).animate({ bottom: -60px }, 800);
}
function StopAll() {
$( .gallery-title ).stop();
$( .gallery-nav ).stop();
}
function MoveGallery(pic) {
$( #test2 ).html( >> <br /> + pic[_GalleryCurrent].src + " " + pic[_GalleryCurrent].height + " " + pic[_GalleryCurrent].width + "<br />Current: " + _GalleryCurrent);
$( .gallery ).append( <img id="gallery-current" style="display:none;" src=" + pic[_GalleryCurrent].src + " width=" + pic[_GalleryCurrent].width + " height=" + pic[_GalleryCurrent].height + " alt=" + pic[_GalleryCurrent].alt + " /> );
$( #gallery-current ).css({ opacity: 0, display: block });
$( .gallery img ).css({ position: absolute , top: 0px , left: 0px });
//jQuery.easing.def = "easeOutElastic";
$( .gallery-title p ).html(pic[_GalleryCurrent].alt);
$( #gallery-current ).animate({ opacity: 1 }, 1200, function() {
$( #gallery-last ).remove();
$( #gallery-current ).attr( id , gallery-last );
});
}
$(function() {
var pic;
pic = $(".gallery").children("img");
_GalleryMax = pic.length - 1;
_GalleryCurrent = 0;
//$( #test2 ).html( >><br /> + pic[_].src + " " + pic[0].height + " " + pic[0].width + "<br />Current: " + _GalleryCurrent);
$( .gallery ).css({ height: 283, overflow: hidden , position: relative });
$( .gallery ).html( );
DrawGalleryOptions( .gallery );
$( .gallery ).append( <img id="gallery-last" src=" + pic[_GalleryCurrent].src + " width=" + pic[_GalleryCurrent].width + " height=" + pic[_GalleryCurrent].height + " alt=" + pic[_GalleryCurrent].alt + " /> );
$( .gallery-title p ).html(pic[_GalleryCurrent].alt);
$( .gallery ).hover(function() {
//alert( on );
StopAll();
ShowGalleryOptions();
},
function() {
//alert( off );
StopAll();
HideGalleryOptions();
});
$( a.gallright ).click(function() {
$( #gallery-current ).stop(false, true);
//alert( boota );
_GalleryCurrent = _GalleryCurrent + 1;
if (_GalleryCurrent > _GalleryMax) {
_GalleryCurrent = 0;
}
MoveGallery(pic);
});
$( a.gallleft ).click(function() {
$( #gallery-current ).stop(false, true);
//alert( boota );
_GalleryCurrent = _GalleryCurrent - 1;
if (_GalleryCurrent < 0) {
_GalleryCurrent = _GalleryMax;
}
MoveGallery(pic);
});
});
//-->
</script>
<div class="gallery">
<img class="gall-img" src="/image/gallery1.jpg" width="503" height="283" alt="Person on a lake" />
<img class="gall-img" src="/image/gallery2.jpg" width="503" height="283" alt="Building university" />
<img class="gall-img" src="/image/gallery3.jpg" width="503" height="283" alt="Random colours" />
<img class="gall-img" src="/image/gallery4.jpg" width="503" height="283" alt="Abstract - dark blue?" />
<img class="gall-img" src="/image/gallery5.jpg" width="503" height="283" alt="Random abstract" />
</div>
<div id="test2" style="font-size:18px;"></div>
</body>
</html>
any!
EDIT #1: Further to the above, I d read that IE7 has issues with the img selector, but I ve tried changing this to a generic classname etc to no avail. Any more clues?
EDIT #2: I m still struggling with this - I ve added a live example here: (too new to add links it seems, sorry!)