bender1912: mit mouseover eine linie zeichnen?

hi,

ich versuch gerade auf einer weltkarte eine reiseroute einzutragen (besser gesagt drei).
habe gesehen, dass man mit:
http://www.walterzorn.de/jsgraphics/jsgraphics.htm

so ungefähr sieht mal das erste testscript aus:
<script type="text/javascript">
<!--
function myDrawFunction()
{
  jg_doc.setColor("#00ff00");
  jg_doc.drawPolyline(new Array(421,422,280,263,338,243,350,348,286,284,339,308,365,422),
   new Array(206,207,288,258,187,2,2,26,27,41,41,64,115,207));
  jg_doc.paint(); //
}

var jg_doc = new jsGraphics();

myDrawFunction();

//-->
</script>

bisschen zeichnen kann.
ich würd dies jedoch gern mit einem mousover machen, d.h. man geht über "reise 1" in der navigation und die reiseroute 1 erscheint in der weltkarte.

so wie ich aber das beispiel verstanden habe, ich hab nicht grad erfahrung mit diesen dingen, ist die erstellung der linie jedoch nicht abrufbar (mit mouseover, onclick oder wie auch immer) sondern von vornherein fest auf der seite.

stimmt das? oder kann man dies irgendwie mit ner funktion abrufbar machen?

  1. Hallo Bender 1912

    <script type="text/javascript">
    <!--
    function myDrawFunction()
    {
      jg_doc.setColor("#00ff00");
      jg_doc.drawPolyline(new Array(421,422,280,263,338,243,350,348,286,284,339,308,365,422),
       new Array(206,207,288,258,187,2,2,26,27,41,41,64,115,207));
      jg_doc.paint(); //
    }

    var jg_doc = new jsGraphics();

    myDrawFunction();

    //-->
    </script>

    so wie ich aber das beispiel verstanden habe, ich hab nicht grad erfahrung mit diesen dingen, ist die erstellung der linie jedoch nicht abrufbar (mit mouseover, onclick oder wie auch immer) sondern von vornherein fest auf der seite.

    stimmt das? oder kann man dies irgendwie mit ner funktion abrufbar machen?

    Ist kein Problem: einfach den Skript Bereich (alles was zwischen <script> und </script> steht in den Header des Dokumentes (also irgendwo zwischen <head> und </head> schreiben und dann den Aufruf myDrawFunction(); rausnehmen und zum Beispiel in einen onclick handler packen:

      
    <a href="#" onclick="myDrawFunction();return false;">Route zeichnen</a>  
    
    

    anstelle der Raute(#) könntest du noch zusätzlich einen Verweis angeben, welche Seite angezeigt werden soll, falls deine Besucher Javascript deaktiviert haben. Zum Beispiel könnte dort dann stehen, warum die Seite mit aktiviertem JS viel schöner und interaktiver ist ;-)

    Viel Erfolg und liebe Grüße mbr

    1. Hallo mbr und Bender1912,

      Ist kein Problem: einfach den Skript Bereich (alles was zwischen <script> und </script> steht in den Header des Dokumentes (also irgendwo zwischen <head> und </head> schreiben

      Was spricht dagegen, das Script auszulagern? Man speichert einfach den Inhalt des Scripts in einer Datei (foo.js) und bindet diese mittels

        
      <script type="text/javascript" src="pfad/zur/foo.js"></script>  
      
      

      in den Kopfbereich des HTML-Dokuments (<head>[...]</head>) ein.

      und dann den Aufruf myDrawFunction(); rausnehmen und zum Beispiel in einen onclick handler packen:
      <a href="#" onclick="myDrawFunction();return false;">Route zeichnen</a>

      Was spricht dagegen, den Funktionsaufruf auch ins Script zu verlagern? Dann würde es vielleicht auch eine Lösung für Bender1912's Problem geben. Nehmen wir mal an, seine Karte sieht im HTML-Dokument folgendermaßen aus:

        
      <img src="pfad/zur/karte.jpg" alt="Eine Karte zur Routenbeschreibung" width="500" height="500" name="map" />  
      
      

      Dann bräuchte man im Script nur noch den eigentlichen Aufruf von myDrawFunction durch

        
      // Führe die Funktion nach dem Laden der Seite aus, damit das Script auf alle Elemente zugegrefen kann  
      window.onload = function ()  
      {  
         // Fügt der Karte ein 'onmouseover'-Handler hinzu, mit Referenz auf myDrawFunktion  
         document.images['map'].onmouseover = myDrawFunction;  
      }  
      
      

      anstelle der Raute(#) könntest du noch zusätzlich einen Verweis angeben, welche Seite angezeigt werden soll, falls deine Besucher Javascript deaktiviert haben. Zum Beispiel könnte dort dann stehen, warum die Seite mit aktiviertem JS viel schöner und interaktiver ist ;-)

      Ach ja, Javascript kann ja auch Missbraucht werden, hatte ich ganz vergessen. Nein, im Ernst: Es geht nicht nur darum, Besuchern mit deaktiviertem Javascript Inhalte anzubieten. Man muss auch an Besucher denken, die eingeschränktes bzw. kein Javasript _haben_. Das wären z.B. Screenreader, PDAs, Mobiltelefone etc.

      Ich hoffe, das ich euch beiden ein bisschen helfen konnte.

      Mit freundlichen Grüßen,
      Steffen Bruchmann

      --
      Mein Selfcode: ie:{ fl:( br:> va:) ls:& fo:| rl:( n4:& ss:| de:> js:| ch:{ mo:} zu:}
    2. Hallo Bender 1912

      <script type="text/javascript">
      <!--
      function myDrawFunction()
      {
        jg_doc.setColor("#00ff00");
        jg_doc.drawPolyline(new Array(421,422,280,263,338,243,350,348,286,284,339,308,365,422),
         new Array(206,207,288,258,187,2,2,26,27,41,41,64,115,207));
        jg_doc.paint(); //
      }

      var jg_doc = new jsGraphics();

      myDrawFunction();

      //-->
      </script>

      so wie ich aber das beispiel verstanden habe, ich hab nicht grad erfahrung mit diesen dingen, ist die erstellung der linie jedoch nicht abrufbar (mit mouseover, onclick oder wie auch immer) sondern von vornherein fest auf der seite.

      stimmt das? oder kann man dies irgendwie mit ner funktion abrufbar machen?

      Ist kein Problem: einfach den Skript Bereich (alles was zwischen <script> und </script> steht in den Header des Dokumentes (also irgendwo zwischen <head> und </head> schreiben und dann den Aufruf myDrawFunction(); rausnehmen und zum Beispiel in einen onclick handler packen:

      <a href="#" onclick="myDrawFunction();return false;">Route zeichnen</a>

      
      >   
      > anstelle der Raute(#) könntest du noch zusätzlich einen Verweis angeben, welche Seite angezeigt werden soll, falls deine Besucher Javascript deaktiviert haben. Zum Beispiel könnte dort dann stehen, warum die Seite mit aktiviertem JS viel schöner und interaktiver ist ;-)  
      >   
      > Viel Erfolg und liebe Grüße mbr  
      >   
        
      ich glaub ich bin echt zu blöd für dieses skript. es läuft und läuft einfach nicht. vielleicht ist es einfach noch zu früh am morgen und ich seh den wald vor lauter bäumen nicht....  
      ich kopier einfach mal das skript:  
        
      <html>  
      <head>  
      <title></title>  
      <meta name="author" content="Fry">  
      <script type="text/javascript" src="wz\_jsgraphics.js">  
      </script>  
        
      <  
        
      <script type="text/javascript">  
      <!--  
        
      var jg\_doc = new jsGraphics();  
        
      //-->  
      </script>  
        
      <script type="text/javascript">  
      <!--  
      function myDrawFunction()  
      {  
        jg\_doc.setColor("#00ff00"); // grün  
        jg\_doc.fillEllipse(100, 200, 100, 180); // Koordinaten auf document bezogen  
        jg\_doc.setColor("maroon");  
        jg\_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));  
        jg\_doc.paint(); // zeichnet in diesem Fall direkt in's document  
        
        jg.setColor("#ff0000"); // rot  
        jg.drawLine(10, 113, 220, 55); // Koordinaten auf Zeichenfläche bezogen  
        jg.setColor("#0000ff"); // blau  
        jg.fillRect(110, 120, 30, 60);  
        jg.paint();  
        
        jg2.setColor("#0000ff"); // blau  
        jg2.drawEllipse(10, 50, 30, 100);  
        jg2.drawRect(400, 10, 100, 50);  
        jg2.paint();  
      }  
        
      var jg\_doc = new jsGraphics(); // direkt in's document zeichnen  
        
      //-->  
      </script>  
      </head>  
        
      <a href="#" onclick="myDrawFunction();return false;">Route zeichnen</a>  
        
        
      </body>  
      </html>  
        
      irgendwie läuft es einfach nicht. kann mir jemand auf die sprünge helfen, wo der fehler sich versteckt hat ????  
        
       
      
      1. Nochmal Hallo,

        ich kopier einfach mal das skript:

        <html>
        <head>
        <title></title>
        <meta name="author" content="Fry">
        <script type="text/javascript" src="wz_jsgraphics.js">
        </script>

        Dann wollen wir mal ;-)

        <

        hier ist das erste Problem. Weiß nicht, ob das "<" evtl. ein Copy + paste Fehler ist, aber auf jeden Fall gehört es da nicht hin.

        <script type="text/javascript">
        <!--

        var jg_doc = new jsGraphics();

        Hier den Scriptbereich zu beenden

        //-->
        </script>

        um dann einen neuen aufzumachen ist zwar nicht falsch in dem Sinne; Aber warum sich zusätzliche Arbeit machen und mehr Code produzieren, als nötig?

        <script type="text/javascript">
        <!--

        function myDrawFunction()
        {
          jg_doc.setColor("#00ff00"); // grün
          jg_doc.fillEllipse(100, 200, 100, 180); // Koordinaten auf document bezogen
          jg_doc.setColor("maroon");
          jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
          jg_doc.paint(); // zeichnet in diesem Fall direkt in's document

        jg.setColor("#ff0000"); // rot
          jg.drawLine(10, 113, 220, 55); // Koordinaten auf Zeichenfläche bezogen
          jg.setColor("#0000ff"); // blau
          jg.fillRect(110, 120, 30, 60);
          jg.paint();

        jg2.setColor("#0000ff"); // blau
          jg2.drawEllipse(10, 50, 30, 100);
          jg2.drawRect(400, 10, 100, 50);
          jg2.paint();
        }

        var jg_doc = new jsGraphics(); // direkt in's document zeichnen

        //-->
        </script>
        </head>

        Und hier fehlt jetzt eindeutig der <body>

        <a href="#" onclick="myDrawFunction();return false;">Route zeichnen</a>

        </body>
        </html>

        irgendwie läuft es einfach nicht. kann mir jemand auf die sprünge helfen, wo der fehler sich versteckt hat ????

        Die drei "Probleme" sind mir jetzt so auf die Schnelle aufgefallen; Vielleicht habe ich noch etwas übersehen...

        Liebe Grüße mbr

        ok,ok, ganz so einfach ist es doch nicht. Ich habe das Script jetzt bei mir zum Laufen gebracht. Und es sieht so aus, als ob der Tip, den ich dir zuerst gegeben habe (Script in den head Bereich) kontraproduktiv ist. Tut mir echt leid. Also: so sieht mein Script jetzt aus: (und bei mir lokal funktioniert es...)

          
        <html>  
         <head>  
         <title></title>  
         <meta name="author" content="Fry">  
         <script type="text/javascript" src="wz_jsgraphics.js"></script>  
          
         </head>  
         <body>  
          
         <div id="canvas"></div>  
          
        <script type="text/javascript">  
          
         var jg_doc = new jsGraphics("canvas");  
          
         function myDrawFunction()  
         {  
           jg_doc.setColor("#00ff00"); // gruen  
           jg_doc.fillEllipse(100, 200, 100, 180); // Koordinaten auf document bezogen  
           jg_doc.setColor("maroon");  
           jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));  
           jg_doc.paint(); // zeichnet in diesem Fall direkt in's document  
          
          
           jg_doc.setColor("#ff0000"); // rot  
           jg_doc.drawLine(10, 113, 220, 55); // Koordinaten auf Zeichenfläche bezogen  
           jg_doc.setColor("#0000ff"); // blau  
           jg_doc.fillRect(110, 120, 30, 60);  
           jg_doc.paint();  
          
           jg_doc.setColor("#0000ff"); // blau  
           jg_doc.drawEllipse(10, 50, 30, 100);  
           jg_doc.drawRect(400, 10, 100, 50);  
           jg_doc.paint();  
          
         }  
         //-->  
         </script>  
          
         <a href="#" onclick="myDrawFunction();return false;">Route zeichnen</a>  
          
         </body>  
        </html>  
        
        
        1. Klasse. Herzlichen Dank.
          Hat geklappt