Adapt highlighting of objects

From JSXGraph Wiki
Revision as of 15:05, 24 February 2015 by A WASSERMANN (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

The JavaScript code

Create an invisible divsion:

<div id="myinfobox" 
    style="
        z-Index:99;
        display:none;
        position:absolute; 
        left:0px;
        top:0px;
        width:50px;
        background-color:#ffff88;
        padding:5px;
        text-align:center;
        /* Cross-browser opacity:*/
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; 
        filter: alpha(opacity=70);
        opacity:.7;
    "
></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()+'<hr noshade>'+this.name;
    infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
    infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
    infobox.style.display = 'block';
    this.board.renderer.highlight(this); // highlight the line

}
JXG.Line.prototype.noHighlight = function(){
    infobox.style.display = 'none';
    this.board.renderer.noHighlight(this); // dehighlight the line
}

//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';
}