topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-graphic-svg-mouse-over-effects.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html><head>
  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="imagetoolbar" content="no">
    <link rel="icon" href="http://www.carto.net/srv/img/favicon.gif" type="image/gif">
  
  <!--additional header info goes here-->
    <meta name="keywords" content="cartography, kartographie, cartographie, map, karte, carte, svg, scalable vector graphics">
    <meta name="description" content="links on cartography by carto:net">
    <style type="text/css">
  body {background-image:url('http://www.carto.net/srv/img/backmap.gif'); background-repeat:no-repeat; background-color:#ffef95; font-family:Arial,Helvetica,Geneva,sans-serif;color:#B42D25; }
  
  /*B42D25 ~ rgb(180,44,37) bordeauxrot*/
  /*161682 ~ rgb(23,23,130) dklblau */
  /*168C16 ~ rgb(23,140,23) dklgruen */
  /*ffef95 ~ rgb(255,239,149) bg-gelb */
  
  a {text-decoration:underline; color:#168C16; background: transparent}
  
  h2 a {text-decoration:none;}
  
  .inpage { color:#168C16;}
  .expage { color:#161682;}
  
  a:visited {text-decoration:none;}
  
  /*
  a.inpage:visited {color:#6C6F12; background: transparent}
  a.expage:visited {color:#6C125D; background: transparent}
  */
  
  @media screen {  /* hide from IE3 */
  a[href]:hover { background: #ffa }
  }
  
  .lde {background-image:url('http://www.carto.net/srv/img/back_l_de.gif'); }
  .lfr {background-image:url('http://www.carto.net/srv/img/back_l_fr.gif'); }
  .len {background-image:url('http://www.carto.net/srv/img/back_l_en.gif'); }
  .les {background-image:url('http://www.carto.net/srv/img/back_l_es.gif'); }
  
  .higher { font-weight:bold; } /*TO BE REMOVED*/
  .bigger { font-weight:bold; }
  .smaller { font-size:small;}
  
  .chrihelptd { background-color:#FFEF95; } /*tabellen hintergrund in christans hilfen sollet allgem hintergrund entsprechen*/
  
  .newspostit { background-color:#f6ffd8;}
  
  p,h1,h2,h3,h4,ul,ol,li,div,td,th,address,blockquote,b,i,.keepnormfontcolor { font-family:Arial,Helvetica,Geneva,sans-serif; color:#B42D25 }
  tt,pre { font-family:"Courier New",Courier,monospace; color:#B42D25; }
  
  .info { border:1px solid; background-color:#eeeeee; padding:40px; margin:0px; }
  .info tt, .info pre { font-family:"Courier New",Courier,monospace; color:blue; }
  
    </style>
    <title>carto:net - 
  
    Example for use of mouseover effects
  </title>
  </head><body><a name="top"></a>
  
  <table width="100%">
          <tbody><tr>
                  <td align="left">
                          <img src="mouse_over_effects_files/navig.gif" alt="" usemap="#navig" border="0" height="111" width="600">
                  </td>
          </tr>
  </tbody></table>
  <!-- ONLY navig.gif IMG NEEDED NORMALLY -->
  <map name="navig">
    <area shape="rect" coords="226,14,585,66" href="http://www.carto.net/" target="_top" alt="main page - page initiale - hauptseite - página principal">
    <area shape="rect" coords="272,77,433,106" href="http://www.carto.net/projects/" alt="projects - projets - projekte - proyectos">
    <area shape="rect" coords="454,77,598,106" href="http://www.carto.net/authors/" alt="authors - auteurs - autoren - autores">
    <area shape="rect" coords="130,77,253,106" href="http://www.carto.net/papers/" alt="papers - exposés - berichte - papeles">
    <area shape="rect" coords="25,77,109,106" href="http://www.carto.net/help/" alt="help - aide - hilfe - ayuda">
  </map>
  
  <div id="adBarContainer" style="border: 0px solid red; margin-left: 13px; float: right; right: 8px; width: 160px; height: 600px;">
  <script type="text/javascript"><!--
  google_ad_client = "pub-6049981187637171";
          /* 160x600, Carto.net Standard */
          google_ad_slot = "4746507232";
          google_ad_width = 160;
          google_ad_height = 600;
  //-->
  </script>
  <script type="text/javascript" src="mouse_over_effects_files/show_ads.js"></script><script src="mouse_over_effects_files/expansion_embed.js"></script><script src="mouse_over_effects_files/test_domain.js"></script><script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 600px; position: relative; visibility: visible; width: 160px;"><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 600px; position: relative; visibility: visible; width: 160px;"><iframe allowtransparency="true" hspace="0" id="google_ads_frame1" marginheight="0" marginwidth="0" name="google_ads_frame" src="mouse_over_effects_files/ads.htm" style="left: 0pt; position: absolute; top: 0pt;" vspace="0" frameborder="0" height="600" scrolling="no" width="160"></iframe></ins></ins>
  </div>
  
    <h2 class="sitemap"><a href="http://www.carto.net/">carto</a><span class="expage">:</span><a href="http://www.carto.net/papers/">papers</a><span class="expage">:</span><a href="http://www.carto.net/papers/svg/">svg</a><span class="expage">:</span><a href="http://www.carto.net/papers/svg/samples/">examples</a><span class="expage">:</span><a href="http://www.carto.net/papers/svg/samples/#iact">interactivity</a><span class="expage">:</span>mouseover</h2>
  
  <h2>Example for use of mouseover effects</h2>
  
        <table border="0" cellpadding="8" cellspacing="0">
          <tbody><tr>
            <td align="left" valign="top">
              <embed src="lib-present-graphic-svg-mouse_over_effects_files/mouse_over_effects.svg" name="svgmap" type="image/svg+xml" height="325" width="450">
              <br>
             </td>
            <td valign="top">
              <p>This example shows the use of <tt>mouseover</tt> and <tt>click</tt> events. Move the cursor above city-symbols to get their names, click on them to get a message.</p>
      <p>On the <a href="http://www.carto.net/papers/svg/samples/symbol.shtml">symbols</a> we attached the event handler attributes <tt>onmouseover</tt>, <tt>onmouseout</tt> and <tt>onclick</tt>.
  Events can trigger functions or objects that act according to the
  javascript code provided in the event handler. See also our tutorial on
  <a href="http://www.carto.net/papers/svg/eventhandling" class="inpage">Event Handling in SVG Applications</a>.</p>
            </td>
          </tr>
         </tbody></table>
  
        <div class="info">
          <h4>Files used</h4>
            <p>Right-click, save ...</p>
  <ul>
                <li><tt><a href="http://www.carto.net/papers/svg/samples/mouse_over_effects.shtml">mouse_over_effects.shtml</a></tt></li>
                <li><tt><a href="http://www.carto.net/papers/svg/samples/mouse_over_effects.svg">mouse_over_effects.svg</a></tt></li>
                <li><tt><a href="http://www.carto.net/papers/svg/samples/mouse_over_effects.js">mouse_over_effects.js</a></tt></li>
             </ul>
  
           <h3>Technical Details</h3>
              <p>The combination of SVG, DOM (Document Object Model), ECMAScript and events enables the creation of highly interactive web-maps.</p>
           <h4>Use of Javascript in combination with SVG</h4>
            <p>Javascript
  can be embedded in SVG or referenced in several ways: Short javascript
  constructs may be written directly within the event handler attribute
  of an SVG element (e.g. <tt>onload="some_js_code"</tt>), more complex
  constructs may be written in the header of the SVG or HTML file.
  However, in most cases it is recommended to use an external ECMAScript
  (javascript) (".js") file and set a reference in the header-section of
  the HTML or SVG file. The following code shows how to do this in an
  SVG-File (the last line is relevant for referencing external .js-files).</p>
              
  <pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"&gt;
  &lt;svg xml:space="preserve" width="450" height="325" viewBox="480000 0 360000 260000"
    onload="init(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  
  &lt;script xlink:href="mouse_over_effects.js" type="text/ecmascript"/&gt;
  </pre>
  <p>Our small project uses 3 files: a HTML-File for the initial layout, an external javascript-file and a separate SVG-File.</p>
  
  <h4>Event-Handler</h4>
  <p>In order to trigger the execution of javascripts one can use event
  handler attributes. These event handler attributes are compatible with
  HTML. Following are some of the more important SVG-event-handler: (For
  a complete list see: <a href="http://www.w3.org/TR/SVG11/interact.html#SVGEvents">W3C-SPEC</a>)</p>
  <ul>
          <li><tt>onmouseover:</tt> executed when the cursor moves above an object<li><tt>onmouseout:</tt> executed when the cursor leaves an object<li><tt>onmousemove:</tt> executed when the cursor moves over an object<li><tt>onclick:</tt> executed when the user clicks on an object<li><tt>onload:</tt> triggered after a SVG-File was loaded</li>
          <li><tt>onzoom:</tt> triggered after the user changes zoom-factor</li>
          <li><tt>onscroll:</tt> triggered after the user scrolls within a svg-graphics</li>
          <li><tt>onresize:</tt> triggered when a document-view was resized</li>
  </ul>
  
  <p>Note that there are more events available, but some are not yet
  supported in every browser/plugin (e.g. mutation events)! Also some
  events are restricted to specific elements.</p>
  
  <pre>&lt;use id="Genf" x="499500" y="181000" xlink:href="#symbolRect" 
                   onmouseover="showCity('Geneva')" onmouseout="emptyCity()" #+
                   onclick="cityClick('Birthplace of the WWW ...')" /&gt;
  </pre>
  
  <p>The above SVG-code shows how to use mouseover and click-events. The
  event handler (javascript-functions) are stored in an external <a href="http://www.carto.net/papers/svg/samples/mouse_over_effects.js" class="inpage">javascript-file</a>.</p>
  
  <h4>Simple Javascript-functions to change SVG-elements</h4>
  <p>In order to change SVG-elements per javascript one needs to first
  reference them. This is done using the DOM-tree and DOM methods like <tt>document.getElementById()</tt>. If references are used more than once, one can store them in global variables, typically initialized by an <tt>onload</tt> event.</p>
  
  <pre>//global variables
  //global variables
  var svgCityText;
  
  function init(evt) {
          //get reference to child (content) of the city text-Element
          svgCityText = document.getElementById("varCity").firstChild;
  }</pre>
  
  <p>The global variable <tt>svgCityText</tt> is used as a reference to
  the first child of the text-object that we want to change. Because the
  same object is used in more functions we use it in a global context.
  The function <tt>init()</tt> is executed after the webpage is loaded
  and is initializizing this reference. The text-object we want to change
  has the ID "varCity" and is referenced by the method <tt>.getElementById()</tt>. In order to access the text-string itself we have to use the property <tt>.firstChild</tt>.</p>
  
  <pre>function showCity(city) {
          //change text-Value
          svgCityText.nodeValue = city;
  }</pre>
  
  <p>This function changes the text-value itself using the property <tt>nodeValue</tt>. This function is triggered by the <tt>mouseover</tt> event.</p>
  
  <pre>function emptyCity() {
          //empty text-String
          svgCityText.nodeValue = " ";
  }
  </pre>
  
  <p>The function <tt>emptyCity()</tt>, triggered by the <tt>mouseout</tt> event, resets the content of the text-element, when the user leaves the SVG graphics element.</p>
  
  <pre>function cityClick(text) {
          //show an alert message
          alert(text);
  }
  </pre>
  
  <p>The above function is triggered by a mouse-click event and sends a
  javascript-alert message with the message-text given by the functions
  parameter.</p>
        </div>
  <br><br>

  <table width="100%">
  <tbody><tr>
  <td align="left">Last modified: 
  
  Monday, 17-Jul-2006 15:07:47 CEST
  <br>© <a href="http://www.carto.net/#en_w3">carto<span class="expage">:</span>net</a> (<a href="http://www.carto.net/neumann/">andreas neumann</a> &amp; <a href="http://www.carto.net/andre.mw/">andré m. winter</a>)
  
  <br>original URL for reference: http://www.carto.net/papers/svg/samples/mouse_over_effects.shtml>
  <td align="right" valign="top"><a class="expage" href="javascript:location.href='http://del.icio.us/post?v=3&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)"><img src="mouse_over_effects_files/delicious.gif" alt="del.icio.us" align="bottom" height="16" width="16">&nbsp;Add this page to del.icio.us</a></td>
  </tr></tbody></table>
  </body></html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.