brauch ich ja net viel zu sagen...
hab mal zwei dummy-pics mehrfach eingebaut, damit man sieht wie es funzt..
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>query_gallery_scratchFile</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
bilder = new Array();
bilder[0] = new Image();
bilder[0].src = "http://forenpics.kaninchenrettung.de/230509/image042.jpg";
bilder[1] = new Image();
bilder[1].src = "http://forenpics.kaninchenrettung.de/230509/image016.jpg";
bilder[2] = new Image();
bilder[2].src = "http://forenpics.kaninchenrettung.de/230509/image042.jpg";
bilder[3] = new Image();
bilder[3].src = "http://forenpics.kaninchenrettung.de/230509/image016.jpg";
bilder[4] = new Image();
bilder[4].src = "http://forenpics.kaninchenrettung.de/230509/image042.jpg";
bilder[5] = new Image();
bilder[5].src = "http://forenpics.kaninchenrettung.de/230509/image016.jpg";
//scriptcode für bildergalerie - Mouseover für Thumbnails
$("#wrapperdiv").ready(function(){
$("img.normalthumb").mouseover(function(){
var picSource = $("#anzeigePic").attr("src");
var thumbId = $(this).attr("id");
$("#anzeigePic").attr("src", bilder[thumbId.substr(5, thumbId.length)].src);
$(this).removeClass("normalthumb");
$(this).addClass("hoverthumb");
});
$("img.normalthumb").mouseout(function(){
$(this).removeClass("hoverthumb");
$(this).addClass("normalthumb");
});
$("#anzeigePic").attr("src", bilder[0].src);
});
/* ]]> */
</script>
<style type="text/css">
.hoverthumb {
opacity:0.5;
-moz-opacity:0.5; /* ff>3 */
filter:Alpha(opacity=50, finishopacity=50); /* ie */
height:60px;
width:60px;
margin-right:12px;
margin-top:12px;
float:left;
}
.normalthumb{
height:60px;
width:60px;
margin-right:12px;
margin-top:12px;
float:left;
}
</style>
</head>
<body>
<!-- WrapperDIV für Bildergalerie -->
<div id="wrapperdiv"><noscript>
<strong>
<big>Aktivieren sie bitte JAVASCRIPT für volle Funktionalität der Bildergalerie</big>
</strong>
</noscript>
<!-- DIV für große Anzeige -->
<div id="showdiv">
<img src="" id="anzeigePic" style="width:420px;" />
</div>
<!-- DIV für Thumbnails -->
<div id="prevdiv">
<img id="thumb0" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image042.jpg" />
<img id="thumb1" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image016.jpg" />
<img id="thumb2" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image042.jpg" />
<img id="thumb3" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image016.jpg" />
<img id="thumb4" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image042.jpg" />
<img id="thumb5" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image016.jpg" />
<br />
</div> <!-- Ende DIV für Thumbnails -->
</div> <!-- Ende vom WrapperDIV der Galerie -->
</body>
</html>