Javascript + SVG

Dieses Thema im Forum "Programmieren" wurde erstellt von Vampirella666, 2. April 2004.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Vampirella666

    Vampirella666 ROM

    Registriert seit:
    2. April 2004
    Beiträge:
    1
    Hi leute,
    hoffe ihr könnt mir weiter helfen. ist echt wichtig und selbst find ich den fehler leider nicht.

    hoffe es ist okay, wenn ich den quellcode zum teil hier reinsetzte und dann die kurze erklärung von mir.
    PHP:
    <script type="text/javascript">
     

          function 
    followMouse(evt) {
            var 
    doc=getSVGDoc(evt.getTarget()); 
            var 
    temp=doc.getElementById("hint");
            
    temp.setAttribute("transform","translate("+(evt.getClientX()+15)+","+(evt.getClientY()+30)+")");  
          }
          function 
    switchhint(evt,aimId,vis) {
            var 
    doc=getSVGDoc(evt.getTarget()); 
            var 
    temp=doc.getElementById(aimId);
            
    temp.setAttribute("visibility",vis);  
            
    temp=doc.getElementById("hint");
            
    temp.setAttribute("visibility",vis);  
           
          }
          function 
    getSVGDoc(node) { 
            if(
    node.getNodeType()==9)
              return 
    node;
            else
              return 
    node.getOwnerDocument();
          }
          
          function 
    changeVisibility(evt,targetID){
              var 
    doc=getSVGDoc(evt.getTarget());
              if (
    doc.getElementById(targetID).getAttribute('visibility')=='visible'){
                
    doc.getElementById(targetID).setAttribute('visibility','invisible');
              } else {
                
    doc.getElementById(targetID).setAttribute('visibility','visible');
              };
            }
     </
    script>    

      <
    g>
       <
    text style="font-size:16px; fill:black;">
         <
    tspan id="Raum22Text" x="200" y="52" style="font- weight:bold; fill:black;"22 
         
    </tspan>
       </
    text

      <
    g id="Raum22" transform="translate(1)" class="metalVert"
          
    onmousemove="switchhint(evt,'hintText','visible')" 
          
    onmouseout="switchhint(evt,'hintText','hidden')">
            <
    rect id="Raum22" x="191" y="15" height="60" width="40" opacity=".6" style="fill:#ffffff; stroke:#0b0ec3; stroke-width:1px;">
            <
    animate id="Raum22" attributeName="fill" attributeType="svg" begin="mouseover" dur="mouseover" from="#fbc877" to="#ffffff" fill="freeze"/>
            <
    animate id="Raum22" attributeName="fill" attributeType="svg" begin="mouseout"dur="mouseout" from="#ffffff" to="#fbc877" fill="freeze"/>
           </
    rect>
      </
    g>
    <!--  
    Text im Kasten --> 
      <
    g id="hint" visibility="hidden" style="fontfamily:helvetica;fill:darkblue;font-size:16;stroke:none;font-weight:bold">
        <
    text text-anchor="middle" visibility="visible">
            <
    tspan id="hintText" x="70" y="265" visibility="hidden" tyle="fill:black;">
                   
    Test Text
           
    </tspan>
         </
    text>     
       </
    g>

    <!-- 
      <use 
    xlink:href="#Raum22" onclick="changeVisibility(evt,'hintText');"/>  
    -->




    So hoffe es ist noch einigermaßen übersichtlich.
    der script bewirkt im brinzipt das bei dem Raumplan der Raum22 die Farbe wechselt, wenn ich mit der mouse drüber fahre und der Test Text (id="hintText") dargestellt wird. sobald ich mit der mouse den raum verlasse verschwindet der text auch wieder und die ursprüngliche farbe erscheint.
    jetzt möchte ich zudem, wenn ich auf den Raum einmal auf den Raum klicke,das dann bei mouseoute, der text (id="hintText") erhalten bleibt, und erst beim zweiten klicken auf den Raum der text wieder verschwindet.

    mit: <use xlink:href="#Raum22" onclick="changeVisibility(evt,'hintText');"/>
    funktioniert es zwar aber immer nur ein effekt. d.h. entweder mouseover-mouseout effekt, oder die click funktion!!!
    es funzt mit dem klick aber nur, wenn das use-elemten am ende des ganzen steht. (siehe oben, als kommentar)

    könnt ihr mir weiter helfen???BITTE
     
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen