yosoyhendrix
/
vesta


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery.iviewer test</title>
        <script type="text/javascript" src="jquery.js" ></script>
        <script type="text/javascript" src="jqueryui.js" ></script>
        <script type="text/javascript" src="jquery.mousewheel.min.js" ></script>
        <script type="text/javascript" src="../jquery.iviewer.js" ></script>
        <script type="text/javascript">
            jQuery(function($){

                var viewer;

                function isInCircle(x, y) {
                    var relative_x = x - this.x;
                    var relative_y = y - this.y;
                    return Math.sqrt(relative_x*relative_x + relative_y*relative_y) <= this.r;
                }
                
                function isInRectangle(x, y) {
                    return (this.x1 <= x && x <= this.x2) && (this.y1 <= y && y<= this.y2);
                }
                
                function getCircleCenter() { return {x: this.x, y: this.y}; }
                
                function getRectangleCenter() { return {x: (this.x2+this.x1)/2, y: (this.y2+this.y1)/2}; }
            
                var objects = [
                    {x: 100, y: 100, r: 50, isInObject: isInCircle, title: 'big circle', getCenter: getCircleCenter },
                    {x: 150, y: 250, r: 35, isInObject: isInCircle, title: 'middle circle', getCenter: getCircleCenter },
                    {x: 500, y: 300, r: 10, isInObject: isInCircle, title: 'small circle', getCenter: getCircleCenter },
                    {x1: 200, y1: 400, x2: 300, y2: 500, isInObject: isInRectangle, title: 'rectangle', getCenter: getRectangleCenter }
                ]
                
                function whereIam(x, y) {
                    for (var i=0; i<objects.length; i++) {
                        var obj = objects[i];
                        if (obj.isInObject(x, y))
                            return obj;
                    }
                        
                    return null;
                }
                
                function showMe(ev, a) {
                    $.each(objects, function(i, object) {
                        if (object.title == $(a).html()) {
                            var center = object.getCenter();
                            var offset = viewer.iviewer('imageToContainer', center.x, center.y);
                            var containerOffset = viewer.iviewer('getContainerOffset');
                            var pointer = $('#pointer');
                            offset.x += containerOffset.left - 20;
                            offset.y += containerOffset.top - 40;
                            pointer.css('display', 'block');
                            pointer.css('left', offset.x+'px');
                            pointer.css('top', offset.y+'px');
                        }                    
                    });

                    ev.preventDefault();
                }

                window.showMe = showMe;
        
                viewer = $("#viewer1").iviewer({
                    src: "test_active_with_objects.GIF",

                    onClick: function(ev, coords) {
                        var object = whereIam(coords.x, coords.y);
                        
                        if (object) 
                            alert('Clicked at ('+coords.x+', '+coords.y+'). This is '+object.title);
                    },

                    onMouseMove: function(ev, coords) {
                        var object = whereIam(coords.x, coords.y);
                        
                        if (object) {
                            $('#status').html('You are in ('+coords.x.toFixed(1)+', '+coords.y.toFixed(1)+'). This is '+object.title);
                            this.container.css('cursor', 'crosshair');
                        } else {
                            $('#status').html('You are in ('+coords.x.toFixed(1)+', '+coords.y.toFixed(1)+'). This is empty space');
                            this.container.css('cursor', null);
                        }                            
                    },
                    
                    onBeforeDrag: function(ev, coords) {
                        // remove pointer if image is getting moving
                        // because it's not actual anymore
                        $('#pointer').css('display', 'none');
                        // forbid dragging when cursor is whithin the object
                        return whereIam(coords.x, coords.y) ? false : true;     
                    },
                    
                    onZoom: function(ev) {
                        // remove pointer if image is resizing
                        // because it's not actual anymore
                        $('#pointer').css('display', 'none');
                    },
                    
                    initCallback: function(ev) {
                        this.container.context.iviewer = this;
                    }
                });
            });
        </script>
        <link rel="stylesheet" href="../jquery.iviewer.css" />
        <style>
            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
            }
        
            .viewer
            {
                height: 100%;
                position: relative;
                background-color: lightgreen;
            }
            
            .wrapper
            {
                border: 1px solid black;

                position: absolute;
                top: 5em;
                left: 1em;
                bottom: 1em;
                right: 1em;

                overflow: hidden; /*for opera*/
            }
            
            .toolbar
            {
                border: 1px solid black;

                position: absolute;
                top: 1em;
                left: 1em;
                right: 1em;
                height: 3em;
            }
            
            #pointer
            {
                background-image: url('arrow.png');
                width: 40px;
                height: 40px;
                position: absolute;
                display: none;
            }
            
        </style>
    </head>
    <body>
        <div class="toolbar">
            <span id="status"></span>|Show me:
            <a href="#" onclick="showMe(event, this)">big circle</a>, 
            <a href="#" onclick="showMe(event, this)">middle circle</a>,
            <a href="#" onclick="showMe(event, this)">small circle</a>,
            <a href="#" onclick="showMe(event, this)">rectangle</a>
        </div>
            
        <div class="wrapper">
            <div id="viewer1" class="viewer"></div>
        </div>
        
        <div id="pointer"></div>             
    </body>
</html>