added CSS classes for easier styling
authorschepers
Sun, 13 Sep 2009 09:53:10 +0900
changeset 191 12dc0406a5a8
parent 190 bef76c03d7fb
child 192 a958ab8aafbc
added CSS classes for easier styling
html/images/event-inheritance.svg
--- a/html/images/event-inheritance.svg	Sun Sep 13 06:27:59 2009 +0900
+++ b/html/images/event-inheritance.svg	Sun Sep 13 09:53:10 2009 +0900
@@ -17,100 +17,143 @@
       <path d="M-15,-5 L-5,-5 C0,-5 0,5 -5,5 L-15,5" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black"/>
     </marker>
   </defs>
+  <style type="text/css"><![CDATA[
+    .basic {
+      fill: black;
+      stroke: gray;
+    }
+
+    .basic text {
+      fill: white;
+      stroke: none;
+    }
+    
+    .order1 {
+      fill: gainsboro;
+      stroke: black;
+    }
+
+    .order1 text {
+      fill: black;
+      stroke: none;
+    }
+    
+    .order2 {
+      fill: gainsboro;
+      stroke: blue;
+    }
+
+    .order2 text {
+      fill: blue;
+      stroke: none;
+    }
+
+    .order3 {
+      fill: gainsboro;
+      stroke: green;
+    }
+
+    .order3 text {
+      fill: green;
+      stroke: none;
+    }
+
+  ]]></style>
+  
   
   
   <text id="caption" x="480" y="30" font-size="25" fill="black" text-anchor="middle" font-family="Verdana, sans-serif" font-weight="bold" >DOM3 Events Interface Inheritance</text>
   
   
-  <a id="Event" transform="translate(20, 50)" xlink:href="../DOM3-Events.html#interface-Event" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="black" stroke="gray" stroke-width="2"/>
-    <text x="100" y="16" font-size="18" fill="white" text-anchor="middle" font-family="Verdana, sans-serif">Event</text>     
+  <a id="Event" class="basic" transform="translate(20, 50)" xlink:href="../DOM3-Events.html#interface-Event" target="_parent">
+    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
+    <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">Event</text>     
   </a>
   
   <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
      d="M225,60 H255"/>
-  <a id="UIEvent" transform="translate(260, 50)" xlink:href="../DOM3-Events.html#events-Events-UIEvent" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="black" stroke-width="2"/>
+  <a id="UIEvent"  class="order1" transform="translate(260, 50)" xlink:href="../DOM3-Events.html#events-Events-UIEvent" target="_parent">
+    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
     <text x="100" y="16" font-size="18" fill="black" text-anchor="middle" font-family="Verdana, sans-serif">UIEvent</text>     
   </a>
   
     <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
       d="M465,60 H495"/>
-      <a id="MouseEvent" transform="translate(500, 50)" xlink:href="../DOM3-Events.html#events-Events-MouseEvent" target="_parent">
-        <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="blue" stroke-width="2"/>
-        <text x="100" y="16" font-size="18" fill="blue" text-anchor="middle" font-family="Verdana, sans-serif">MouseEvent</text>     
-      </a>
+    <a id="MouseEvent"  class="order2" transform="translate(500, 50)" xlink:href="../DOM3-Events.html#events-Events-MouseEvent" target="_parent">
+      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
+      <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">MouseEvent</text>     
+    </a>
 
         <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
           d="M705,60 H735"/>
-        <a id="MouseWheelEvent" transform="translate(740, 50)" xlink:href="../DOM3-Events.html#events-Events-MouseWheelEvent" target="_parent">
-          <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="blue" stroke-width="2"/>
-          <text x="100" y="16" font-size="18" fill="blue" text-anchor="middle" font-family="Verdana, sans-serif">MouseWheelEvent</text>     
+        <a id="MouseWheelEvent"  class="order3" transform="translate(740, 50)" xlink:href="../DOM3-Events.html#events-Events-MouseWheelEvent" target="_parent">
+          <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
+          <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">MouseWheelEvent</text>     
         </a>
 
         <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
           d="M705,60 H710 Q715,60 715,65 V85 Q715,90 725,90 H735"/>
-        <a id="WheelEvent" transform="translate(740, 80)" xlink:href="../DOM3-Events.html#events-Events-WheelEvent" target="_parent">
-          <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="blue" stroke-width="2"/>
-          <text x="100" y="16" font-size="18" fill="blue" text-anchor="middle" font-family="Verdana, sans-serif">WheelEvent</text>     
+        <a id="WheelEvent"  class="order3" transform="translate(740, 80)" xlink:href="../DOM3-Events.html#events-Events-WheelEvent" target="_parent">
+          <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
+          <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">WheelEvent</text>     
         </a>
   
     <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
       d="M465,60 H470 Q475,60 475,65 V85 Q475,90 480,90 H495"/>
-    <a id="TextEvent" transform="translate(500, 80)" xlink:href="../DOM3-Events.html#events-Events-TextEvent" target="_parent">
-      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="blue" stroke-width="2"/>
-      <text x="100" y="16" font-size="18" fill="blue" text-anchor="middle" font-family="Verdana, sans-serif">TextEvent</text>     
+    <a id="TextEvent"  class="order2" transform="translate(500, 80)" xlink:href="../DOM3-Events.html#events-Events-TextEvent" target="_parent">
+      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
+      <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">TextEvent</text>     
     </a>
   
     <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
       d="M465,60 H470 Q475,60 475,65 V115 Q475,120 480,120 H495"/>
-    <a id="KeyboardEvent" transform="translate(500, 110)" xlink:href="../DOM3-Events.html#events-Events-KeyboardEvent" target="_parent">
-      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="blue" stroke-width="2"/>
-      <text x="100" y="16" font-size="18" fill="blue" text-anchor="middle" font-family="Verdana, sans-serif">KeyboardEvent</text>     
+    <a id="KeyboardEvent"  class="order2" transform="translate(500, 110)" xlink:href="../DOM3-Events.html#events-Events-KeyboardEvent" target="_parent">
+      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
+      <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">KeyboardEvent</text>     
     </a>
   
     
 
   <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
     d="M465,60 H470 Q475,60 475,65 V145 Q475,150 480,150 H495"/>
-  <a id="CompositionEvent" transform="translate(500, 140)" xlink:href="../DOM3-Events.html#events-Events-CompositionEvent" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="blue" stroke-width="2"/>
-    <text x="100" y="16" font-size="18" fill="blue" text-anchor="middle" font-family="Verdana, sans-serif">CompositionEvent</text>     
+  <a id="CompositionEvent"  class="order2" transform="translate(500, 140)" xlink:href="../DOM3-Events.html#events-Events-CompositionEvent" target="_parent">
+    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
+    <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">CompositionEvent</text>     
   </a>
 
   <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
     d="M225,60 H230 Q235,60 235,65 V175 Q235,180 240,180 H255"/>
-  <a id="CustomEvent" transform="translate(260, 170)" xlink:href="../DOM3-Events.html#interface-CustomEvent" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="black" stroke-width="2"/>
+  <a id="CustomEvent"  class="order1" transform="translate(260, 170)" xlink:href="../DOM3-Events.html#interface-CustomEvent" target="_parent">
+    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
     <text x="100" y="16" font-size="18" fill="black" text-anchor="middle" font-family="Verdana, sans-serif">CustomEvent</text>     
   </a>
 
   <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
     d="M225,60 H230 Q235,60 235,65 V205 Q235,210 240,210 H255"/>
-  <a id="MutationEvent" transform="translate(260, 200)" xlink:href="../DOM3-Events.html#events-Events-MutationEvent" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="black" stroke-width="2"/>
+  <a id="MutationEvent"  class="order1" transform="translate(260, 200)" xlink:href="../DOM3-Events.html#events-Events-MutationEvent" target="_parent">
+    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
     <text x="100" y="16" font-size="18" fill="black" text-anchor="middle" font-family="Verdana, sans-serif">MutationEvent</text>     
   </a>
 
     <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
       d="M465,210 H495"/>
-    <a id="MutationNameEvent" transform="translate(500, 200)" xlink:href="../DOM3-Events.html#events-Events-MutationNameEvent" target="_parent">
-      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="gainsboro" stroke="blue" stroke-width="2"/>
-      <text x="100" y="16" font-size="18" fill="blue" text-anchor="middle" font-family="Verdana, sans-serif">MutationNameEvent</text>     
+    <a id="MutationNameEvent"  class="order2" transform="translate(500, 200)" xlink:href="../DOM3-Events.html#events-Events-MutationNameEvent" target="_parent">
+      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
+      <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">MutationNameEvent</text>     
     </a>
 
 
-  <a id="EventTarget" transform="translate(20, 80)" xlink:href="../DOM3-Events.html#events-Events-EventTarget" target="_parent">
+  <a id="EventTarget"  class="basic" transform="translate(20, 80)" xlink:href="../DOM3-Events.html#events-Events-EventTarget" target="_parent">
     <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="black" stroke="gray" stroke-width="2"/>
     <text x="100" y="16" font-size="18" fill="white" text-anchor="middle" font-family="Verdana, sans-serif">EventTarget</text>     
   </a>
 
-  <a id="EventListener" transform="translate(20, 110)" xlink:href="../DOM3-Events.html#events-Events-EventListener" target="_parent">
+  <a id="EventListener"  class="basic" transform="translate(20, 110)" xlink:href="../DOM3-Events.html#events-Events-EventListener" target="_parent">
     <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="black" stroke="gray" stroke-width="2"/>
     <text x="100" y="16" font-size="18" fill="white" text-anchor="middle" font-family="Verdana, sans-serif">EventListener</text>     
   </a>
 
-  <a id="DocumentEvent" transform="translate(20, 140)" xlink:href="../DOM3-Events.html#events-Events-DocumentEvent" target="_parent">
+  <a id="DocumentEvent"  class="basic" transform="translate(20, 140)" xlink:href="../DOM3-Events.html#events-Events-DocumentEvent" target="_parent">
     <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="black" stroke="gray" stroke-width="2"/>
     <text x="100" y="16" font-size="18" fill="white" text-anchor="middle" font-family="Verdana, sans-serif">DocumentEvent</text>     
   </a>