punkte per klick mit einer Linie verbinden

Zuletzt bearbeitet:
@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 (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 :)
 
ja habe es gerade gefunden :D ... 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
 
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)

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

HTML:
<!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>
 
Zurück