JavaScript DHTML/SmartClient/Img
Содержание
Control image opacity
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT> isc.Img.create({
ID:"eyesImg", width:360, height:188, src:"http://www.wbex.ru/style/logo.png", showEdges:true
}) isc.Slider.create({
minValue:0, maxValue:100, showRange:false, showTitle:false, vertical:false, left:80, top:200, value:100, valueChanged: "eyesImg.setOpacity(value)"
}) </SCRIPT>
</BODY> </HTML>
</source>
Control Img
<source lang="html4strict">
isc.Img.create({
width:100, height:100, border:"1px solid gray", imageType: "normal", src: "other/star.gif"
}) isc.Img.create({
left:120, width:100, height:100, border:"1px solid gray", imageType: "center", src: "other/star.gif"
}) isc.Img.create({
left:240, width:100, height:100, border:"1px solid gray", imageType: "stretch", src: "other/star.gif"
})
isc.Img.create({
top:120, width:100, height:100, border:"1px solid gray", imageType: "stretch", src: "other/cpu.jpg"
}) isc.Img.create({
left:120, top:120, width:220, height:220, imageHeight:536, imageWidth:446, imageType: "normal", src: "other/cpu.jpg", border:"1px solid gray", overflow: "auto"
})
</source>
Create Image object and add to Canvas
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Canvas.create({
ID: "cubeBin", top:40, width:400, height:300, showEdges: true
})
isc.IButton.create({
title:"Create", icon:"http://www.wbex.ru/style/logo.png", mouseUp: function () { isc.Img.create({ left: isc.Math.random(340), top: isc.Math.random(240), width:48, height:48, parentElement: cubeBin, src: "http://www.wbex.ru/style/logo.png", click: "this.destroy()" }) }
})
</SCRIPT> </BODY> </HTML>
</source>
Image click event and destroy itself
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Canvas.create({
ID: "cubeBin", top:40, width:400, height:300, showEdges: true
})
isc.IButton.create({
title:"Create", icon:"http://www.wbex.ru/style/logo.png", mouseUp: function () { isc.Img.create({ left: isc.Math.random(340), top: isc.Math.random(240), width:48, height:48, parentElement: cubeBin, src: "http://www.wbex.ru/style/logo.png", click: "this.destroy()" }) }
})
</SCRIPT> </BODY> </HTML>
</source>
Image rollover action
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> Img.create({
left:75, top:100, width:200, height:200, src:"http://www.wbex.ru/style/logo.png", mouseOver:"this.setState("inverted")", mouseOut:"this.setState("")"
}); </SCRIPT> </BODY> </HTML>
</source>
Load image to Img control
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({
ID: "myImage", left:120, top:20, width:48, height:48, appImgDir: "pieces/48/", src: "star_grey.png"
}) isc.IButton.create({
left:10, top:100, width:80,
title: "Show",
iconOrientation: "right",
icon: "pieces/16/star_blue.png",
click: "myImage.setSrc("star_blue.png")"
}) isc.IButton.create({
left:100, top:100, width:80,
title: "Show",
iconOrientation: "right",
icon: "pieces/16/star_yellow.png",
click: "myImage.setSrc("star_yellow.png")"
}) isc.IButton.create({
left:190, top:100, width:80,
title: "Show",
iconOrientation: "right",
icon: "pieces/16/star_green.png",
click: "myImage.setSrc("star_green.png")"
})
</SCRIPT>
</BODY> </HTML>
</source>
