michaelsinterface.de

swap.imageComment

  • Dieses Javascript-Experiment ist eine Ausbaustufe meines ersten Experiments swap.image, in der zur jeweiligen Grafik ein Kommentar definiert wird, der beim Aufruf der Grafik mitausgegeben wird.
here follows the comment...
  • 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.imageComment :::</title>

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

// swapImageComment
function swapImageComment(imgName, intImg){
document.getElementById(imgName+"_imgID").src = arrImg[intImg].src;
document.getElementById(imgName+"_commentID").innerHTML = arrImg[intImg].txt;

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

<style type="text/css">
<!--
div.demoWrapBox {
position:relative;
margin:50px auto;
width:500px;
}
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;
border:1px solid #cfcfcf;
}
div#imageBox img {
display:block;
margin:20px auto 0 auto;
}
div#imageBox div#start_commentID {
width:254px;
margin:10px auto 20px auto;
border:1px solid #cfcfcf;
}
-->
</style>

</head>
<body>

<div class="demoWrapBox">
 <div id="imageBox">
      <img src="img/pic00.jpg" alt="" id="start_imgID">
      <div id="start_commentID">here follows the comment...</div>
 </div>

 <ul>
     <li><a href="#" onclick="return swapImageComment('start', 0)">
            <img src="img/pic01_th.jpg" alt="load pic 01">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImageComment('start', 1)">
            <img src="img/pic02_th.jpg" alt="load pic 02">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImageComment('start', 2)">
            <img src="img/pic03_th.jpg" alt="load pic 03">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImageComment('start', 3)">
            <img src="img/pic04_th.jpg" alt="load pic 04">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImageComment('start', 4)">
            <img src="img/pic05_th.jpg" alt="load pic 05">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImageComment('start', 5)">
            <img src="img/pic06_th.jpg" alt="load pic 06">
         </a>
     </li>
     <li>
         <a href="#" onclick="return swapImageComment('start', 6)">
            <img src="img/pic07_th.jpg" alt="load pic 07">
         </a>
     </li>
 </ul>
</div>

</body>
</html>