Howto include JSXGraph into web pages: Difference between revisions
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
== Including JSXGraph into HTML == | == Including JSXGraph into HTML == | ||
For including JSXGraph into HTML, | For including JSXGraph into HTML, two files are necessary: | ||
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js] | * jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js] | ||
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css] | * jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css] | ||
| Line 12: | Line 11: | ||
<head> | <head> | ||
<link rel="stylesheet" type="text/css" href="jsxgraph.css" /> | <link rel="stylesheet" type="text/css" href="jsxgraph.css" /> | ||
<script type="text/javascript" src="jsxgraphcore.js"></script> | <script type="text/javascript" src="jsxgraphcore.js"></script> | ||
</head> | </head> | ||
| Line 22: | Line 20: | ||
<head> | <head> | ||
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | ||
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | ||
</head> | </head> | ||
| Line 44: | Line 41: | ||
<html> | <html> | ||
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | ||
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | ||
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div> | <div id="box" class="jxgbox" style="width:500px; height:500px;"></div> | ||
Revision as of 14:28, 29 October 2009
Including JSXGraph into HTML
For including JSXGraph into HTML, two files are necessary:
- jsxgraphcore.js from http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js
- jsxgraph.css from http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css
You can either download these three files and use the local copy or you can use the online version.
Usage of a local copy
If you want to include a local copy of JSXGraph in your HTML file then you have to write the following lines into the document head:
<head>
<link rel="stylesheet" type="text/css" href="jsxgraph.css" />
<script type="text/javascript" src="jsxgraphcore.js"></script>
</head>
Usage of the online copy
If you want to include the online of JSXGraph in your HTML file then you have to write the following lines into the document head:
<head>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</head>
Include a drawing panel into the HTML
The geometric construction which is displayed by JSXGraph resides in an HTML element. Usually, a div-element is taken. This division needs an ID. Using this ID, we declare this element to be a drawing panel of JSXGraph.
The following code has to be placed into the body part of an HTML file:
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50, axis:true});
</script>
We can use as many different drawing panels as we like in one HTML file. The class jxgbox sets "position:relative" which seems to be mandatory for the Internet Explorer 7.
The result
