Interaktiver Raster mit PHP

**Melewo** · 22.04.2013, 15:59

Wenn Du mit PHP eine Grafik mit Raster erstellst, dann hast Du ein Bild erstellt, auf dem ein Raster zu sehen. Ein Bild ist ein Bild, ob mit Raster, untergehender Sonne am Horizont oder Blumen oder was es da noch so an malerischen Objekten gibt.

Verweissensitive Grafiken lassen sich mit HTML Image Map erstellen, doch das wird wohl nicht gerade das sein, was Du suchtest. Alles andere dürfte aufwendiger werden.

**unikar** · 22.04.2013, 22:52

Vielen Dank für deinen Beitrag etwas weitergeholfen hast du mir ja schon.

Aber du hast Recht ich suche etwas anderes.. Wie bereits beschrieben möchte ich das man mit der Maus beliebig viele Kästchen auswählen kann.

**Melewo** · 23.04.2013, 12:44

Dein Vorhaben ließe sich, denke ich zumindest, durch ein Zusammenspiel von HTML, CSS und JavaScript realisieren, bedingt jedoch, dass Du Dich damit bereits gut auskennst.

Dazu würde ich, als ersten Denkansatz, einen großen HTML-Bereich in viele kleinere HTML-Bereiche unterteilen. Ob sich da verschachtelte DIVs besser anbieten als Tabellen, müsste erst getestet werden. Jedenfalls würde ich die Bereiche mit entsprechenden CSS Angaben zur Position versehen werden. Dann die xy-Koordinaten der Maus abgreifen und auswerten. Bei welchen Koordinaten wurde eine Taste gedrückt, bei welchen Koordinaten wurde die Maus losgelassen, dann die Koordinaten mit den Bereichsangaben verrechnen.

Als Einsteiger solltest Du Dir, falls HTML- und CSS-Kenntnisse in ausreichendem Maße vorhanden und von JavaScript zumindest die Syntax bereits sitzt, dafür einige Wochen einplanen. Falls es auf allen 3 Gebieten noch hapert, lieber einige Monate.

**Guenni61** · 23.04.2013, 23:04

Hi unikar,

meintest du vielleicht etwas in der Art:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
div {
 heigth:200;width:20;
 border: "solid blue";
 border-width:1;
 background-color: "yellow";
} 
-->
</style>
<script type="text/javascript">
<!--
function auswahl(element){
 switch(element.style.backgroundColor){
  case "blue" : element.style.backgroundColor = "yellow";break;
  case "yellow" : element.style.backgroundColor = "blue";break;
  default : element.style.backgroundColor = "blue";
 }
}
// -->
</script>
</head>
<body>
<div onclick="auswahl(this)"></div><div onclick="auswahl(this)"></div>
<div onclick="auswahl(this)"></div><div onclick="auswahl(this)"></div>
</body>
</html>

Komischerweise enthält backgroundColor nach dem ersten Aufruf der Seite keinen Wert (oder mein Fehler). Deshalb der default-Zweig in der Funktion.
Nachdem ein Element einmal angeklickt wurde, kann man zwischen den beiden Farben hin und her switchen.

Um Div-Elemente vernünftig zu positionieren, siehe ==> SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

Gruß
Günni

**Melewo** · 24.04.2013, 10:59

Zitat von Guenni61 Beitrag anzeigen

Komischerweise enthält backgroundColor nach dem ersten Aufruf der Seite keinen Wert (oder mein Fehler).

Die Variable element ist bei Seitenaufruf noch undefiniert, bis element durch Aufruf der Funktion durch den ersten Klick einem Element zugeordnet wird. Lässt sich prüfen mit typeof.

HTML-Code:

<script type="text/javascript">

function auswahl(element){

    switch(element.style.backgroundColor){

        case "blue" : element.style.backgroundColor = "yellow";break;
        case "yellow" : element.style.backgroundColor = "blue";break;
        default : element.style.backgroundColor = "blue";
    }
    alert(typeof(element));
}
alert(typeof(element));

</script>

Bei jedem erneuten Klick ändert sich dann der Wert von element durch die Funktion und die Zuordnung durch this.

**Melewo** · 24.04.2013, 23:31

Habe mal ein einfaches Beispiel gefertigt, ist jedoch nur als Ansatz gedacht. Von Ähnlichkeiten wie beim Ziehen mit der Maus, um in einem Rechteck alle zu öffnenden oder zu löschenden Dateien zu markieren, ist es noch weit entfernt und das ginge nach meinen gegenwärtigen Vorstellungen auch nicht, ohne die Koordinaten zu verrechnen. Doch um eine Auswahl zu treffen, dafür sollte es als Ansatz genügen.

Mit einem Klick in ein Feld wird die Auswahl bei weiterbewegter Maus gestartet, durch einfaches Ziehen mit der Maus können weitere Felder ausgewählt werden, mit einem weiteren Klick wird die Auswahl beendet und mit dem Button kann die Auswahl aufgehoben werden. Für einen Anfang sollte das Beispiel genügen, auch wenn es noch nicht optimal ist.

HTML-Code:

<!DOCTYPE html>
<html>

<head>
<title>Auswahl</title>
<style type="text/css">
body {text-align:center}
.außen {width:328px; margin:auto}
.button{width:328px; margin:auto; clear:both; padding-top:10px}
.innen {text-align:center; float:left; line-height:80px; width:80px;
border:1px solid #ae9230; background-color:#dbcfa5}
</style>
</head>

<body>
<h1>Auswahl</h1>
<div id="außen" class="außen">
    <div id="A01" class="innen">01</div>
    <div id="A02" class="innen">02</div>
    <div id="A03" class="innen">03</div>
    <div id="A04" class="innen">04</div>
    <div id="A05" class="innen">05</div>
    <div id="A06" class="innen">06</div>
    <div id="A07" class="innen">07</div>
    <div id="A08" class="innen">08</div>
    <div id="A09" class="innen">09</div>
    <div id="A10" class="innen">10</div>
    <div id="A11" class="innen">11</div>
    <div id="A12" class="innen">12</div>
</div>
<div class="button">
<input type="button" onclick="hebeauf()" value="Auswahl aufheben">
</div>
<script type="text/javascript">
"use strict";
var start = 0;

document.getElementById("außen").onclick = function() {

    start++;

    if (start % 2 == 0) {

        document.onmousemove = null;
    }
    else {

        document.onmousemove = function(e) {

            if (window.event) {e = window.event;
            }
            if (e.target) {var auswahl = e.target;
            }
            else {auswahl = e.srcElement;
            }
            if (auswahl.id) {

            document.getElementById(auswahl.id).style.backgroundColor = "#40ff40";

            /*-------------------------------------------------------------------
             Hier könnten dann eventuell die restlichen Anweisungen folgen, die
             ausgeführt werden sollen bzw. der Aufruf weiterer Funktionen.
             --------------------------------------------------------------------
            */
            }
        }
    }
}

function hebeauf() {

    var anz = 12 +1;

    for (var i = 1; i < anz; i++) {

        var fid = ((i < 10) ? String("A0" + i) : String("A" + i));
        document.getElementById(fid).style.backgroundColor = "#dbcfa5";
    }
    document.onmousemove = null;
}

</script>
</body>
</html>

Interaktiver Raster mit PHP