JavaScript DHTML/Ajax Layer/Image Rollover

Материал из Web эксперт
Перейти к: навигация, поиск

Image Rollover Demo

 
http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI - Image Rollover</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath("./dynapisrc/");
  dynapi.library.include("dynapi.functions.Image");
</script>
<script language="Javascript">
  var p =   {
      oversrc:"./dynapiexamples/images/eicon3.gif",
      downsrc:"./dynapiexamples/images/eicon2.gif"
    }
  var myImage = dynapi.functions.getImage("./dynapiexamples/images/eicon1.gif",32,32,p);
</script>
</head>
<body>
Press move your mouse over the image below and click on it<br><br>
<script>
  document.write(myImage.getHTML());
</script>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Image Rollover event

 
http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - HTML Rollover</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("HTMLRollover");
</script>
<script language="Javascript">
var off="./dynapiexamples/images/eicon1.gif";
var on="./dynapiexamples/images/eicon2.gif";
var dn="./dynapiexamples/images/eicon3.gif";
hro = new HTMLRollover(null,32,32,off,on,dn);
hro.setBorder(1);
hro.addEventListener({
  onclick:function(e){
    var o=e.getSource();
    alert("Hi, my name is Elco");
    o.cancelEvent(); // cancel event
  }
});
dynapi.document.addChild(hro);

</script>
</head>
<body>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Photo slide show

  
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript">
var index = 0;
var pics = new Array();
for (var i = 0; i < 5; i++) {
  pics[i] = new Image();
}
pics[0].src = "1.jpg";
pics[1].src = "2.jpg";
pics[2].src = "3.jpg";
pics[3].src = "4.jpg";
pics[4].src = "5.jpg";
function changePhoto(photo) {
   document.images[0].src = pics[photo].src;
}
function nextPic() {
  index++;
  if (index < pics.length) {
    changePhoto(index);
  }
}
function prevPic() {
  if (index > 0) {
    index--;
    changePhoto(index);
  }
}
</script>
</head>
<BODY>
<img src="1.jpg" />
<a href="" onclick="nextPic();return false">Next picture</a> 
<a href="" onclick="prevPic();return false">Previous picture</a>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Image_Rollover&oldid=1717»