mit mouseover eine linie zeichnen?
bender1912
- javascript
0 mbr0 Steffen Bruchmann0 bender19120 mbr
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?
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
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
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 ????
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 documentjg.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>
Klasse. Herzlichen Dank.
Hat geklappt