michaelsinterface.de

swap.image

  • Dieses Javascript-Experiment demonstriert den Grafiktausch beim Anklicken der Vorschaubilder ("Thumbnails").
  • load pic 01
  • load pic 02
  • load pic 03
  • load pic 04
  • load pic 05
  • load pic 06
  • load pic 07
Quellcode  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: swap.image :::</title>

<script type="text/javascript">
<!--
// Image-Preloader
var arrImg = new Array();
arrImg[0] = new Image();
arrImg[0].src = "img/pic01.jpg";
arrImg[1] = new Image();
arrImg[1].src = "img/pic02.jpg";
arrImg[2] = new Image();
arrImg[2].src = "img/pic03.jpg";
arrImg[3] = new Image();
arrImg[3].src = "img/pic04.jpg";
arrImg[4] = new Image();
arrImg[4].src = "img/pic05.jpg";
arrImg[5] = new Image();
arrImg[5].src = "img/pic06.jpg";
arrImg[6] = new Image();
arrImg[6].src = "img/pic07.jpg";

// swapImage
function swapImage(imgName,swapImg) {
document.images[imgName].src=swapImg;

return false;
}
//-->
</script>

<style type="text/css">
<!--
div.demoWrapBox {
position:relative;
margin:50px auto;
width:500px;
height:370px;
}
div.demoWrapBox ul {
width:457px;
padding:8px 0 0 43px;
margin:8px 0 0 0;
border:1px solid #cfcfcf;
}
div.demoWrapBox li {
display:inline;
margin:3px 5px 0 0;
}
div.demoWrapBox a img {
border:0;
}
div#imageBox {
width:500px;
height:296px;
border:1px solid #cfcfcf;
}
div#imageBox img {
display:block;
margin:20px auto 0 auto;
}
-->
</style>

</head>
<body>

<div class="demoWrapBox">
 <div id="imageBox">
      <img src="img/pic00.jpg" alt="" id="start">
 </div>

 <ul>
     <li><a href="#" onclick="return swapImage('start','img/pic01.jpg')">
            <img src="img/pic01_th.jpg" alt="load pic 01">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImage('start','img/pic02.jpg')">
            <img src="img/pic02_th.jpg" alt="load pic 02">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImage('start','img/pic03.jpg')">
            <img src="img/pic03_th.jpg" alt="load pic 03">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImage('start','img/pic04.jpg')">
            <img src="img/pic04_th.jpg" alt="load pic 04">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImage('start','img/pic05.jpg')">
            <img src="img/pic05_th.jpg" alt="load pic 05">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImage('start','img/pic06.jpg')">
            <img src="img/pic06_th.jpg" alt="load pic 06">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImage('start','img/pic07.jpg')">
            <img src="img/pic07_th.jpg" alt="load pic 07">
         </a>
     </li>
 </ul>
</div>

</body>
</html>