Images: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 23: | Line 23: | ||
</source> | </source> | ||
==Dynamic image== | ==Dynamic image I== | ||
<jsxgraph with="500" height="500" box="box2"> | <jsxgraph with="500" height="500" box="box2"> | ||
(function(){ | (function(){ | ||
| Line 33: | Line 33: | ||
</jsxgraph> | </jsxgraph> | ||
===The JavaScript code=== | |||
The parameters | |||
* ''urlImage'' | |||
* ''[x,y]'' | |||
* ''[w,h]'' | |||
can be given by functions. Here is an example where the position of the image depends on the position of the point "A". | |||
<source lang="javascript"> | |||
var brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5],axis:true}); | |||
var p = brd.create('point',[-1,-1], {size:10, opacity:0.3}); | |||
var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg"; | |||
var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [3,3] ]); | |||
</source> | |||
==Dynamic image II== | |||
<jsxgraph with="500" height="500" box="box3"> | |||
(function(){ | |||
var brd = JXG.JSXGraph.initBoard('box3', {boundingbox:[-5,5,5,-5],axis:true}); | |||
var p = brd.create('point',[-1,-1], {size:10, opacity:0.3}); | |||
var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/fagiolo.jpg"; | |||
var urlImg2 = "http://jsxgraph.uni-bayreuth.de/distrib/images/perched_birds.jpg"; | |||
var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [2*1.61,2] ]); | |||
})(); | |||
</jsxgraph> | |||
===The JavaScript code=== | |||
The parameters | |||
* ''urlImage'' | |||
* ''[x,y]'' | |||
* ''[w,h]'' | |||
can be given by functions. Here is an example where the position of the image depends on the position of the point "A". | |||
<source lang="javascript"> | |||
var brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5],axis:true}); | |||
var p = brd.create('point',[-1,-1], {size:10, opacity:0.3}); | |||
var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg"; | |||
var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [3,3] ]); | |||
</source> | |||
[[Category:Examples]] | [[Category:Examples]] | ||
Revision as of 20:57, 1 January 2011
Static image
The JavaScript code
Images can be included with the command
var im = brd.create('image',[urlImg, [-1,-1], [2*2.67181,2] ]);
It has the parameters:
- urlImage: URL of the image. Data URLs are possible, but will not beshown in the Internet Explorer <8 and are restricted to max. 32kByte in the Internet Explorer 8.
- [x,y]: position of the lower left corner of the image.
- [w,h]: width and height of the image.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5],axis:true});
var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
var im = brd.create('image',[urlImg, [-1,-1], [3,3] ]);
Dynamic image I
The JavaScript code
The parameters
- urlImage
- [x,y]
- [w,h]
can be given by functions. Here is an example where the position of the image depends on the position of the point "A".
var brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5],axis:true});
var p = brd.create('point',[-1,-1], {size:10, opacity:0.3});
var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [3,3] ]);
Dynamic image II
The JavaScript code
The parameters
- urlImage
- [x,y]
- [w,h]
can be given by functions. Here is an example where the position of the image depends on the position of the point "A".
var brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5],axis:true});
var p = brd.create('point',[-1,-1], {size:10, opacity:0.3});
var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [3,3] ]);
