Difference between revisions of "Adapt highlighting of objects"

From JSXGraph Wiki
Jump to: navigation, search
Line 3: Line 3:
 
     style="
 
     style="
 
         z-Index:99;
 
         z-Index:99;
         display:block;
+
         display:none;
 
         position:absolute;  
 
         position:absolute;  
 
         top:0px;
 
         top:0px;
Line 17: Line 17:
 
</html>
 
</html>
 
<jsxgraph width="600" height="600">
 
<jsxgraph width="600" height="600">
 +
// A simple construction, consisting of three points , two lines, one circle.
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});
 
var p1 = brd.create('point',[3,0]);
 
var p1 = brd.create('point',[3,0]);
Line 26: Line 27:
 
var c = brd.create('circle',[p2,p3]);
 
var c = brd.create('circle',[p2,p3]);
  
 +
// First, we overwrite the highling method for ALL lines
 
var infobox = document.getElementById('myinfobox');
 
var infobox = document.getElementById('myinfobox');
 
JXG.Line.prototype.highlight = function(){
 
JXG.Line.prototype.highlight = function(){
Line 36: Line 38:
 
     infobox.style.display = 'none';
 
     infobox.style.display = 'none';
 
}
 
}
 +
 +
//Second, we overwrite the highlighting method just for the circle c.
 
c.highlight = function(){
 
c.highlight = function(){
 
     infobox.innerHTML = this.board.mousePosRel.toString();
 
     infobox.innerHTML = this.board.mousePosRel.toString();
Line 49: Line 53:
  
 
===The JavaScript code===
 
===The JavaScript code===
 +
Create an invisible divsion:
 +
<source lang="html4strict">
 +
<div id="myinfobox"
 +
    style="
 +
        z-Index:99;
 +
        display:none;
 +
        position:absolute;
 +
        top:0px;
 +
        left:0px;
 +
        background-color:#ffff88;
 +
        padding:10px;
 +
        /* Cross-browser opacity:*/
 +
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
 +
        filter: alpha(opacity=50);
 +
        opacity:.5;
 +
    "
 +
></div>
 +
</source>
 
<source lang="javascript">
 
<source lang="javascript">
 +
// A simple construction, consisting of three points , two lines, one circle.
 +
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});
 +
var p1 = brd.create('point',[3,0]);
 +
var p2 = brd.create('point',[-1,0]);
 +
var p3 = brd.create('point',[0,4]);
 +
var l1 = brd.create('line',[p1,p2]);
 +
var l2 = brd.create('line',[p1,p3]);
 +
 +
var c = brd.create('circle',[p2,p3]);
 +
 +
// First, we overwrite the highling method for ALL lines
 +
var infobox = document.getElementById('myinfobox');
 +
JXG.Line.prototype.highlight = function(){
 +
    infobox.innerHTML = this.board.mousePosRel.toString();
 +
    infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
 +
    infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
 +
    infobox.style.display = 'block';
 +
}
 +
JXG.Line.prototype.noHighlight = function(){
 +
    infobox.style.display = 'none';
 +
}
 +
 +
//Second, we overwrite the highlighting method just for the circle c.
 +
c.highlight = function(){
 +
    infobox.innerHTML = this.board.mousePosRel.toString();
 +
    infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
 +
    infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
 +
    infobox.style.display = 'block';
 +
}
 +
c.noHighlight = function(){
 +
    infobox.style.display = 'none';
 +
}
  
 
</source>
 
</source>
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 17:49, 18 December 2009

The JavaScript code

Create an invisible divsion:

<div id="myinfobox" 
    style="
        z-Index:99;
        display:none;
        position:absolute; 
        top:0px;
        left:0px;
        background-color:#ffff88;
        padding:10px;
        /* Cross-browser opacity:*/
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; 
        filter: alpha(opacity=50);
        opacity:.5;
    "
></div>
// A simple construction, consisting of three points , two lines, one circle.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});
var p1 = brd.create('point',[3,0]);
var p2 = brd.create('point',[-1,0]);
var p3 = brd.create('point',[0,4]);
var l1 = brd.create('line',[p1,p2]);
var l2 = brd.create('line',[p1,p3]);

var c = brd.create('circle',[p2,p3]);

// First, we overwrite the highling method for ALL lines
var infobox = document.getElementById('myinfobox');
JXG.Line.prototype.highlight = function(){
    infobox.innerHTML = this.board.mousePosRel.toString();
    infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
    infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
    infobox.style.display = 'block';
}
JXG.Line.prototype.noHighlight = function(){
    infobox.style.display = 'none';
}

//Second, we overwrite the highlighting method just for the circle c.
c.highlight = function(){
    infobox.innerHTML = this.board.mousePosRel.toString();
    infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
    infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
    infobox.style.display = 'block';
}
c.noHighlight = function(){
    infobox.style.display = 'none';
}