Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mouseonover - Informationbox

    Hi,
    i'm a javascript newbie but I have to programm a plant layout for university, using SVG, CSS and javascript.
    When the mouse moves over the individual rooms there should be information about their individual! function provided. (It has to be js)
    I tried this, but nothing is happening at all, maybe someone can help me:

    Code:
    <script type="text/javascript">
    <![CDATA[
    function info( msg){
    	document.getElementById('box').style.display='block';
    	document.getElementById('text').innertext=msg;
    }
    
    function out(){
    	document.getElementById('box').style.display = 'none';
    }
    }]]></script>
    </defs>
    Code:
    <rect id="box" x="186" y="300" width="167" height="60" style="fill:none; stroke:grey; stroke-width:1; display:none; "/>
    <text id="text" x="200" y="315" style="font-family:Verdana; font-size:10px; fill:#0000000;"></text>

    <rect id="2044" class="Praktikum" x="399" y="222" width="42" height="44" onmouseover="info('lalala')"/>



  • #2
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I found some Code on the internet and it's working, but unfortunately it's very ugly, because I had to define the infobox for each room separately :-( but .innerhtml... didn't work.

    Code:
    function show(evt, node)
    {
            var test = evt.target.ownerDocument;
            var obj = test.getElementById(node);
            obj.setAttribute("visibility", "visible");
    }
    
    function hide(evt, node)
    {
            var test = evt.target.ownerDocument;
            var obj = test.getElementById(node);
            obj.setAttribute("visibility" , "hidden");
    }

    Can somebody explain what 'evt' and 'evt.target.ownerDocument;' stands for?

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    0
    Thanked 1 Time in 1 Post
    The onload="startup(evt);" statement activates a JavaScript function when the SVG document loads that find the crucial document elements. The statement "var svgDocument;" declares a global variable name so that we may traverse the SVG DOM.

    svgDocument = evt.target.ownerDocument;

    is a somewhat convoluted way of referring to the document itself.

  • Users who have thanked chitrarajan for this post:

    Pantoffel (05-28-2013)

  • #4
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mouseover + setIntervall-flashing

    Thank you for your answer! I am starting to understand JS a little but I am still very confused about ist

    Maybe someone can help me with ne next problem, too. At mouseover of the legend the rooms shall blink two times. Yesterday it didn't stop blinking and now it just blinks once.
    It doesn't matter what I initialize i with and wich interval I want...

    Code:
    var aktiv = window.setInterval("flash(id)", 1000);
    var i = 0, status = 1;
    
    function flash(id)
    {	
    
    		if (status == 1) 
    		{
    			document.getElementById(id).style.opacity="0.2";
    			status = 2;
    
    	     	}
    		else 
    		{
    		        document.getElementById(id).style.opacity="1";
    			status = 1;
    
    		}
    		i = i + 1;
    		if (i>=10){window.clearInterval(aktiv);}
    		
    }
    <text class="LPrak" x="25" y="245" style="font-family:Verdana; font-size:10px; fill:#37652A;" onmouseover="flash('2044')" onmouseout="flashout('2044')"> - Praktikum </text>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •