JavaScript DHTML/Ajax Layer/Image Rollover

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

Image Rollover Demo

   <source lang="html4strict">

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

<script> 

 document.write(myImage.getHTML());

</script> </body> </html> 


 </source>

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


Image Rollover event

   <source lang="html4strict">

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> 


 </source>

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


Photo slide show

   <source lang="html4strict">

<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> 


 </source>
Источник — «http://www.wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Image_Rollover&oldid=1717»