# punkte per klick mit einer Linie verbinden



## grillfleisch (17. Februar 2012)

Hallo,

ich habe hier eine Karte mit Punkten und würde gerne durch anklicken der einzelnen Punkte diese miteinander verbinden. 
Weiß jemand wie man das mit JS umsetzen kann, bzw kennt  jemand ein paar Quellen wo man dies nachlesen kann. 

Google spukt mir nur Zeichenprogramme oder riese Frameworks aus.


----------



## timestamp (17. Februar 2012)

Schau mal nach Javascript und Canvas.


----------



## grillfleisch (17. Februar 2012)

Hallo,

Canvas ist doch HTML5,oder?  nicht alle Browser unterstützen das. Ist glaub ich nicht ganz das was mir hilft.


----------



## timestamp (17. Februar 2012)

http://de.wikipedia.org/wiki/Canvas_(HTML-Element)#Unterst.C3.BCtzung

Ansonsten fällt mir nur noch ein, über Ajax einen Request an ein PHP Script zuschicken, was ein dynamisches Bild der Linie generiert und dieses zurückliefert... ist allerdings eher unschön.
Canvas wird eigentlich von allem gängigen (selbst dem IE) unterstützt, siehe den Link oben


----------



## Parantatatam (17. Februar 2012)

Du kannst es noch viel ekelhafter lösen, in dem du dazwischen DIV-Boxen mit einer Größe von 1x1 Pixel platzierst die dann zusammengesetzt eine Linie ergeben..


----------



## chmee (18. Februar 2012)

HTML5 und canvas haben inzwischen Einzug gehalten - Andersrum - Browser, die das nicht unterstützen sind gnadenlos veraltet, stellen ein Sicherheitsproblem dar und sollten schleunigst aktualisiert werden.

mfg chmee


----------



## CPoly (18. Februar 2012)

Ich hab da mal eine Klasse für geschrieben. Leider ist IE 6/7 support buggy und ich habe mich nicht mehr dran gesetzt (weil die Browser mir absolut egal sind). Du kannst das gerne beheben ;-)

https://github.com/Prinzhorn/draw-line

Beispiel:
http://jsfiddle.net/FYShY/


----------



## grillfleisch (18. Februar 2012)

Danke CPoly,

deine Lösung ist sehr viel schlanker als meine , zumal deine auch noch  super funktioniert xD.


Kann man das auch so machen, das man nur die bereiche anklicken kann, wo sich ein Punkt befindet?


----------



## grillfleisch (18. Februar 2012)

timestamp hat gesagt.:


> http://de.wikipedia.org/wiki/Canvas_(HTML-Element)#Unterst.C3.BCtzung
> 
> Ansonsten fällt mir nur noch ein, über Ajax einen Request an ein PHP Script zuschicken, was ein dynamisches Bild der Linie generiert und dieses zurückliefert... ist allerdings eher unschön.
> Canvas wird eigentlich von allem gängigen (selbst dem IE) unterstützt, siehe den Link oben



aber unter windows XP, was noch sehr verbreitet ist, gibt es keinen IE9 , erst bei windows7. Trotzdem danke dir für deine Bemühung


----------



## grillfleisch (18. Februar 2012)

chmee hat gesagt.:


> HTML5 und canvas haben inzwischen Einzug gehalten - Andersrum - Browser, die das nicht unterstützen sind gnadenlos veraltet, stellen ein Sicherheitsproblem dar und sollten schleunigst aktualisiert werden.
> 
> mfg chmee



Wie gesagt, wird der IE( und älter) leider noch immer gern benutzt. 
Ich habe meinen Blog von unserer Tochter auf HTML5 geschrieben.  Ich wollte mich mit den neuen Tags auseinanders setzen und es konnten sich viele nur ein schön zerschossenes Layout anschauen, weil sie nicht bereit waren Mozilla, Opera oder Chrom zu installieren und immer noch IE7 oder IE8 benutzen. Somit musste ich wieder zwei verschiedene Systeme schreiben, dass wollte ich bei dieser Sache vermeiden. 

Du hast auch recht mit den Sicherheitslücken, ich selber benutze IE8 nicht, nur für Layout tests, aber nur um IE9 zu besitzen kaufe ich mir kein Win7, zumal mein Pc dies glaub ich nicht mehr schafft und ich mir auch keinen neuen PC kaufen möchte, solange meiner noch sehr gut läuft


----------



## CPoly (18. Februar 2012)

grillfleisch hat gesagt.:


> Kann man das auch so machen, das man nur die bereiche anklicken kann, wo sich ein Punkt befindet?



Das solltest du auch selbst hinbekommen: http://jsfiddle.net/FYShY/1/


Ansonsten bin ich aber auch ein Fan von canvas: http://excanvas.sourceforge.net/


Edit: Du musst meinen Code noch IE freundlich machen (Stichwort window.event und event.srcElement)


----------



## grillfleisch (18. Februar 2012)

CPoly hat gesagt.:


> Das solltest du auch selbst hinbekommen: http://jsfiddle.net/FYShY/1/
> 
> 
> Ansonsten bin ich aber auch ein Fan von canvas: http://excanvas.sourceforge.net/
> ...



ja ich werde dies angehen, sobald ich auf meiner testseite das ergebniss sehe, welches bei jsFiddle zu sehen ist.


----------



## chmee (18. Februar 2012)

@grillfleisch (offtopic)
Aber ist dann nicht die logische Konsequenz, einen alternativen (und besseren) Browser zu installieren? Alles ist besser und sicherer als IE8 

mfg chmee


----------



## grillfleisch (18. Februar 2012)

chmee hat gesagt.:


> @grillfleisch (offtopic)
> Aber ist dann nicht die logische Konsequenz, einen alternativen (und besseren) Browser zu installieren? Alles ist besser und sicherer als IE8
> 
> mfg chmee



ja klar, ich gebe dir 100% recht, ich selber benutze ausschließlich Mozilla und Chrome. Selten Safarie, da er bei mir etwas langsam ist, Opera war mal besser, und IE nur zu testzwecken  . Und sonst gibt es glaub ich keine nennenswerten für Ottonormalverbraucher


----------



## grillfleisch (18. Februar 2012)

Wieso funktioniert das Script nicht? Testseite

Ich find es nicht...


----------



## CPoly (18. Februar 2012)

Dein Firefox hat auch eine Fehlerkonsole ;-)

Ich tippe auf ein Steuerzeichen


----------



## grillfleisch (18. Februar 2012)

ja habe es gerade gefunden  ... Am Laptop hat er es im Editor nicht angezeigt, aber am Pc meiner Freundin. Da stand nach dem }; noch irgendwelche vierecke. die einfach gelöscht und das kleiner script nach dem HTML code gesetzt und nun funktioniert es. Danke


----------



## grillfleisch (19. Februar 2012)

CPoly hat gesagt.:


> Das solltest du auch selbst hinbekommen: http://jsfiddle.net/FYShY/1/
> 
> 
> Ansonsten bin ich aber auch ein Fan von canvas: http://excanvas.sourceforge.net/
> ...



Habe es für meine Verhältnisse und das man im IE was sieht angepasst. Dein Script komplett IE tauglich machen hebe ich mir für eine spätere Stunde auf. 
Man sieht ja wenigstens erstmal den Weg grob  -> klickl

Danke nochmal für deine Hilfe


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="lay.css" />
  </head>
  <body>
  <script type="txte/javascript">
  </script> 
    <script type="text/javascript" src="map4.js"></script>
    
    <div id="map">
      <div style="position: absolute; top: 105px; left: 126px;"></div>
      <div style="position: absolute; top: 46px; left: 286px;"> </div>
      <div style="position: absolute; top: 67px; left: 294px;"> </div>
      <div style="position: absolute; top: 132px; left: 611px;"> </div>
      <div style="position: absolute; top: 84px; left: 530px;"> </div>
      <div style="position: absolute; top: 158px; left: 142px;"> </div>
      <div style="position: absolute; top: 150px; left: 352px;"> </div>
      <div style="position: absolute; top: 143px; left: 539px;"> </div>
      <div style="position: absolute; top: 241px; left: 261px;"> </div>
      <div style="position: absolute; top: 189px; left: 477px;"> </div>
      <div style="position: absolute; top: 187px; left: 359px;"> </div>
      <img src="weltkarte_solo.jpg" width="767" height="335" />
    </div>
    <script type="text/javascript">
    
    var IE = document.all?true:false // naja 
    // If NS -- that is, !IE -- then set up for mouse capture 
    if (!IE) window.captureEvents(Event.CLICK)
       
    //Rote Linie mit einer Dicke von 2 Pixel
    var drawing = new LineDrawing({
        color: '#f00',
        size: 2
    });
    
    drawing.enable();
    
    document.getElementById('map').onclick = function(e) {
    
    var tempX = 0 
    var tempY = 0
    
    
    if (IE) { // nimm x-y pos.wenn browser = IE 
      tempX = event.offsetX //window.event.clientX
      tempY = event.offsetY
       
      if(event.srcElement.tagName === 'DIV' && event.srcElement.className != 'active') {
            event.srcElement.className = 'active';
            drawing.requestDraw(tempX, tempY, true);
            
        }
        
    } 
    else { // nimm x-y pos. wenn browser = NS
     
      tempX = e.pageX 
      tempY = e.pageY 
      
      if(e.target.tagName === 'DIV' && e.target.className != 'active') {
            e.target.className = 'active';
            drawing.requestDraw(tempX, tempY, true);
            
        }
    }
    
        
    };
    </script>
  </body>
</html>
```


----------



## CPoly (19. Februar 2012)

Hier eventuell für den IE: https://github.com/pbakaus/transformie


----------

