Area-Bereiche die automatisch die Größe anpassen (Usemap)

DarWinger

Hallo zusammen,

da ich nun schon seit Tagen verzweifelt suche und nix finde (evtl. suche ich nach den falschen Themen bzw. ist es nicht möglich) , möchte ich euch jetzt mal fragen.
Ich habe mehrere Img-Datein übereinander gelegt und die oberste mit mehreren Area bereichen und den dementsprechenden Verlinkungen belegt. Nun habe ich über die % Angebe in width und heigth die Img's sich immer an den Browser anpassen lassen.
Nun die Frage gibt es eine Möglichkeit es hinzubekommen das die Areabereiche sich dieser anpassung an den Browser auch beugen ? Den bei mir behalten sie ihre größe, habe zuletzt versucht sie in ein div zu packen und es darüber zu machen jedoch wollte das nicht klappen jetzt hatte ich überlegt die coords und die screenabmessungen rauszuziehen dann über die orginal Abmessungen der Img's einen Maßstab zu berechnen und dann die Coords darüber neu zu berechnen ist das möglich ?

Würde mich über etwas Hilfe sehr freuen auch wenn es nur ein link ist über den ich mir das nötige Wissen anlesen kann

Grüße

DarWinger

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Netzlinienplan</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
.style1 {
    text-decoration: underline;
}
.style2 {
    text-align: center;
}
</style>
<script type="text/javascript">


function verst(img)
    {
    if (img.style.visibility == 'hidden'){
        img.style.visibility = 'visible';}
    else{
        img.style.visibility = 'hidden';
        }
    } 
</script>




</head>


<body>
<form method="post" action="">
<div class="style2" style="width: auto">
<h1 class="style1"><em>Bitte wählen sie ihr Linienbündel</em></h1>
    <strong>
    <input name="name" type="checkbox" value="li1" onchange='verst(l1)' checked="checked" /> 
                <a href="Linienbündel1.htm">Linienbündel 1</a>
    <input name="name" type="checkbox" value="li2" onchange='verst(l2)' checked="checked" /> 
                <a href="Linienbündel2.htm">Linienbündel 2</a>
    <input name="name" type="checkbox" value="li3" onchange='verst(l3)' checked="checked" /> 
                <a href="Linienbündel3.htm">Linienbündel 3    </a>
    <input name="name" type="checkbox" value="li4" onchange='verst(l4)' checked="checked" /> 
                <a href="Linienbündel4.htm">Linienbündel 4</a>
    <input name="name" type="checkbox" value="li5" onchange='verst(l5)' checked="checked" /> 
                <a href="Linienbündel5.htm">Linienbündel 5</a><br/>
    <input name="name" type="checkbox" value="li6" onchange='verst(l6)' checked="checked" /> 
                <a href="Linienbündel6.htm">Linienbündel 6</a>
    <input name="name" type="checkbox" value="li7" onchange='verst(l7)' checked="checked" /> 
                <a href="Linienbündel7.htm">Linienbündel 7    </a>
    <input name="name" type="checkbox" value="li8" onchange='verst(l8)' checked="checked" /> 
                <a href="Linienbündel8.htm">Linienbündel 8    </a>
    <input name="name" type="checkbox" value="li9" onchange='verst(l9)' checked="checked" /> 
                <a href="Linienbündel9.htm">Linienbündel 9</a>
    <input name="name" type="checkbox" value="Einz" onchange='verst(el)'checked="checked" /> 
                <a href="Einzellinien.htm">Einzellinien </a> </strong> <br/>
&nbsp;</div>
</form>
            <div id="grund" style="position:absolute;z-index:1;  ">
                <img src="grund.gif" width="100%" height="100%" /></div>
            <div id="l1" style="position:absolute;z-index:2; ">
                <img src="l1.gif" width="100%" height="100%" /></div>
            <div id="l2" style="position:absolute;z-index:3; ">
                <img src="l2.gif" width="100%" height="100%"/></div>
            <div id="l3" style="position:absolute;z-index:4; ">
                <img src="l3.gif"width="100%" height="100%" /></div>
            <div id="l4" style="position:absolute;z-index:5; ">
                <img src="l4.gif" width="100%" height="100%"/></div>
            <div id="l5" style="position:absolute;z-index:6; ">
                <img src="l5.gif" width="100%" height="100%" /></div>
            <div id="l6" style="position:absolute;z-index:7; ">
                <img src="l6.gif" width="100%" height="100%" /></div>
            <div id="l7" style="position:absolute;z-index:8; ">
                <img src="l7.gif" width="100%" height="100%" /></div>
            <div id="l8" style="position:absolute;z-index:9; ">
                <img src="l8.gif" width="100%" height="100%" /></div>
            <div id="l9" style="position:absolute;z-index:10; ">
                <img src="l9.gif" width="100%" height="100%" /></div>
            <div id="el" style="position:absolute;z-index:11; ">
                <img src="el.gif" width="100%" height="100%"  /></div>
            <div id="bahn" style="position:absolute;z-index:12; ">
                <img src="bahn.gif" width="100%" height="100%" /></div>
            <div id="ci" style="position:absolute;z-index:13; ">
                <img src="ci.gif" width="100%" height="100%" /></div>
            <div id="sc" style="position:absolute;z-index:14; ">
                <img src="sc.gif" width="100%" height="100%" usemap = "#netz" />

            <map name="netz" >
                            <area shape="rect" coords="14, 415, 296, 552" href="Linienbündel2.htm" />
                            <area shape="rect" coords="15, 118, 296, 418" href="Linienbündel1.htm"/>
                            <area shape="rect" coords="13, 549, 294, 768" href="Linienbündel3.htm"/>
                            <area shape="rect" coords="13, 768, 295, 935" href="Linienbündel4.htm"/>
                            <area shape="rect" coords="12, 1526, 294, 1768" href="Linienbündel8.htm"/>
                            <area shape="rect" coords="13, 932, 295, 1149" href="Linienbündel5.htm"/>
                            <area shape="rect" coords="14, 1148, 296, 1365" href="Linienbündel6.htm"/>
                            <area shape="rect" coords="11, 1766, 294, 2090" href="Linienbündel9.htm"/>
                            <area shape="rect" coords="13, 1365, 294, 1528" href="Linienbündel7.htm"/>
                            <area shape="rect" coords="9, 2088, 294, 2256" href="Einzellinien.htm"/>
            </map>
        </div>
    </body>
</html>

Alles anzeigen

synaptic

also mal rein zur theorie: nein du kannst sowas nicht automatisch machen.

aber du kannst dir das attribut per javascript auslesen und die punkte mit einem faktor x und einem faktor y modifizieren.
eine konkrete formel hab ich leider nicht parat dafür.

da würde ich mir original und diverse auflösungen ansehen und dann schauen, ob ich aus den ergebnissen eine formel ableiten kann

DarWinger

schade hatte noch hoffnung aber egal, vielen vielen dank hätte mich sonst wohl noch ewig tot gesucht nach einer möglichkeit!

die frage wäre dann jetzt wie kann ich die coord ansteuern geht das auch eingfach mit punktnotation von der formel her würde ich den screen bzw. bildschrim einlesen und dann einfach die orginal größe dadurch dividieren und das selbe dann bei den coords machen.
müsste doch klappen oder ?

synaptic

bin nich so der mathefreak^^ is jahre her, dass ich selber rechnen musste. programmieren hat für mich mehr mit sprachen zu tun^^
mit javascript kannst du das machen.
hast du jquery im projekt oder spräche was dagegen jquery einzusetzen? (bei den operationen mit window-sizes rate ich dir zu ner jquery-version unter 1.8.0, alles darüber hat nen bug und ermittelt die fenster-größe nicht richtig. wenn du doch neue neue version nimmst, musste halt drauf achten die fenstergröße mit plain javascript zu ermitteln

DarWinger

hey also jquery hab ich bisher noch nie genutzt müsste mich da glaube erstmal einlesen.
weißt du durch zufall wie ich über javascript auf die coordinaten der area bereiche zugreifen kann ?

lg und danke

synaptic

gib deiner map mal zusätzlich zum name noch ne id="netz". und dann probier das hier mal aus:

Code

<script type="text/javascript">
        var hook = document.getElementById('netz');
        var areas = hook.getElementsByTagName('area');
        var coords = new Array();
        for(var i=0; i<areas.length; i++){
            coords.push({
                "area_index" :i,
                "area_href" : areas[i].href,
                "coords" :areas[i].coords
            });
        }
        console.log(coords)
        </script>

Alles anzeigen

mach den firefox auf und schau mal in den firebug. genauer in die konsole vom firebug.
darin haste dann objekte mit index, link und coords.

also.. wenns klappt, der code is ungetestet

DarWinger

hey habs mal versucht jedoch bekomm ich im firebug
[TABLE='class: domTable']
[TR='class: memberRow userRow']
[TD='class: memberLabelCell']areas[/TD]
[TD='class: memberValueCell'] undefined[/TD]
[/TR]
[TR='class: memberRow userRow']
[TD='class: memberHeaderCell'][/TD]
[TD='class: memberLabelCell']coords[/TD]
[TD='class: memberValueCell']undefined[/TD]
[/TR]
[TR='class: memberRow userRow']
[TD='class: memberHeaderCell'][/TD]
[TD='class: memberLabelCell']hook[/TD]
[TD='class: memberValueCell']null[/TD]
[/TR]
[TR='class: memberRow userRow']
[TD='class: memberHeaderCell'][/TD]
[TD='class: memberLabelCell']i[/TD]
[TD='class: memberValueCell']undefined
[/TD]
[/TR]
[/TABLE]
meine idee war halt

Code

<script type="text/javascript">
function anpa (img , area)
{
    var sw = screen.width;
    var sh = screen.height;
    var i = img.width/3633;
    if (img.width != 3633)
    {

     alert (area.coords);
     for (var j = 0; j<area.coords.length;j++){
        area.coords[j]=area.coords[j]*i;
        alert(area.coords[j]; 
     }
    }
}
</script>

Alles anzeigen

jedoch bekomm ich da auch keine ergebniss. hatte halt gedacht das die area coords ja ansich schon ein array sein müssten und ich sie so ansteuern könnte und sie halt dann im selben verhältniss wie das bild verringere

gruß

also so gibt er mir halt jede ziffer einzeln aus, jedoch berechnet er es nichts

synaptic

hast du der map die id="netz" gegeben?
und woher nimmst du den wert hier: 3633 ??
deine formel dürfte nur variablen haben

und wie gehabt, ich würde den normalzustand nehmen, die coords von einer area auf nen papier schreiben, dann das ganze für ne größere und für ne kleinere auflösung und auch da die coords notieren.

aus den werten musste dann ne formel generieren und die als javascript umsetzen

DarWinger

ja, glaube das hattest du schon aus meinem quellcode von oben übernommen ;-).
ähm die 3633 ist die orginalweite der grafik. und wenn ich die angepasste bildgröße auslese und durch diese zahl dividieren lasse hab ich ja dann rein theoretisch den multiplikator um die coords im selben verhältniss zu ändern ..... das hab ich alles in den quellcode gepackt nur bekomm ich die coords jetzt nicht als werte zu greifen.
wenn ich das hätte also der zugriff auf die coords um sie zu multipilieren und dann zu überschreiben .... glaube ist bei mir ein sprachproblem

ansich ist mein grundproblem : ich habe die grafik und wenn man auf gewisse bereiche klickt soll dann eine weiterleitung erfolgen.
nun soll sich die grafik dem screen anpassen und dementsprechend sollen auch die
weiterleitungsbereiche angepasst werden. gibt es da evtl. auch noch eine andere möglichkeit außer die areas ?

- - - Aktualisiert - - -

hatte auch schon überlegt mehrere versionen der seite zu machen und onload eine abfrage zu machen und dann die version mit der am besten passenden grafik auf zu machen, aber muss doch auch auf einer seite zu lösen sein .....

synaptic

also deine map

HTML

<map name="netz" >

hat nur nen "name" und keine zusätzliche ID!

ich habs grad mal geprüft im firefox und hab coords bekommen mit meinem script
von daher wäre es kein problem und du kannst fortfahren

DarWinger

mmmhhh komisch bei mir kommt immer

Zitat

TypeError: hook is null

var areas = hook.getElementsByTagName('area');

ich weiß die frage ist jetzt etwas doof

HTML

coords.push({               
                                 "area_index" :i,                 
                                 "area_href" : areas[i].href,                 
                                 "coords" :areas[i].coords             });

aber könntest du mir kurz das codefragment kommentieren ?

synaptic

poste mal deinen kompletten code der seite..

erklärung des fragments:
coords ist das von mir definierte leere array die funktion "push" fügt elemente hinzu, die man als parameter übergibt.
der übergebene parameter ist ein javascript-objektliteral (quasi ein einfaches objekt)
dieses objekt hat drei eigenschaften
area_index (das ist die zahl der position)
area_href (der link vom area-tag)
coords (die gesammelten koordinaten des aktuellen area-tags)

der hook ist die map als einsprungpunkt, wenn du deiner map die richtige ID gibst (und hier nochmal: ID != NAME), wird die von dem document.getElementById() gefunden und dann kann ich die innenliegenden area-elemente finden und auslesen.
das geht über das getElementsByTagName. das ding liefert mir also nen array der html-elemente, was ich in der schleife durchlaufen kann.
ebenfalls in der schleife erzeuge ich objekte, in denen ich zum einen die information über die coords speichere und zum anderen infos, mit denen man auf die objekte selber wieder zugreifen kann

ganz einfach

DarWinger

und evtl. hast du je eine idee wenn ich die coords dann in einem arry drin hab wie bekomm ich die wieder raus ?
also wie bekommen ich die wieder in die coords zurück ?

Code

var um = (eb.width)/3633;
    var koord = new Array(33, 118, 640, 418)
    for(var i = 0 ; i < koord.length ; i++)
        {
        koord[i]=koord[i]*um;

        }
        document.getElementById('l1a').coords ='koord[0], koord[1] , koord[2] , koord[3]';

hab jetzt die coords einfach fest hinterlegt das bläht zwar den code auf das übelste auf da ich es dann für jede area machen muss, aber am ende zählt nur das ergebnis

- - - Aktualisiert - - -

ups hatte deins noch nicht gesehen, muss ich eben mal schauen da ich den code immer wieder verändert hab und das was nicht gefunzt hat wieder rausgehauen hab
aso und ja das mit name ungleich hatte ich schon gecheckt

- - - Aktualisiert - - -

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Netzlinienplan</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
.style1 {
    text-decoration: underline;
}
.style2 {
    text-align: center;
}
</style>
<script type="text/javascript">


        var hook = document.getElementById('netz');
        var areas = hook.getElementsBy('area');
        var coords = new Array();
        for(var i=0; i<areas.length; i++){
            coords.push({
                "area_index" :i,
                "area_href" : areas[i].href,
                "coords" :areas[i].coords
            });
        }
        console.log(coords)
        </script>
<script type="text/javascript">
function anpa(img , area) {
    var sw = screen.width;
    var sh = screen.height;
    var i = img.width/3633;
    if (img.width != 3633)
    {

     alert (area.coords);
     for (var j = 0; j<area.coords.length;j++){
        area.coords[j]=area.coords[j]*i;
        alert(area.coords[j]); 
     }
    }
}
</script>
<script type="text/javascript">
function verst(img)
    {
    if (img.style.visibility == 'hidden'){
        img.style.visibility = 'visible';}
    else{
        img.style.visibility = 'hidden';
        }
    } 
</script>




</head>


<body onload="anpa(l1i, l1a)">
<form method="post" action="">
<div class="style2" style="width: auto">
<h1 class="style1"><em>Bitte wählen sie ihr Linienbündel</em></h1>
    <strong>
    <input name="name" type="checkbox" value="li1" onchange='verst(l1)' checked="checked" /> 
                <a href="Linienbündel1.htm">Linienbündel 1</a>
    <input name="name" type="checkbox" value="li2" onchange='verst(l2)' checked="checked" /> 
                <a href="Linienbündel2.htm">Linienbündel 2</a>
    <input name="name" type="checkbox" value="li3" onchange='verst(l3)' checked="checked" /> 
                <a href="Linienbündel3.htm">Linienbündel 3    </a>
    <input name="name" type="checkbox" value="li4" onchange='verst(l4)' checked="checked" /> 
                <a href="Linienbündel4.htm">Linienbündel 4</a>
    <input name="name" type="checkbox" value="li5" onchange='verst(l5)' checked="checked" /> 
                <a href="Linienbündel5.htm">Linienbündel 5</a><br/>
    <input name="name" type="checkbox" value="li6" onchange='verst(l6)' checked="checked" /> 
                <a href="Linienbündel6.htm">Linienbündel 6</a>
    <input name="name" type="checkbox" value="li7" onchange='verst(l7)' checked="checked" /> 
                <a href="Linienbündel7.htm">Linienbündel 7    </a>
    <input name="name" type="checkbox" value="li8" onchange='verst(l' checked="checked" /> 
                <a href="Linienbündel8.htm">Linienbündel 8    </a>
    <input name="name" type="checkbox" value="li9" onchange='verst(l9)' checked="checked" /> 
                <a href="Linienbündel9.htm">Linienbündel 9</a>
    <input name="name" type="checkbox" value="Einz" onchange='verst(el)'checked="checked" /> 
                <a href="Einzellinien.htm">Einzellinien </a> </strong> <br/>
&nbsp;</div>
</form>
<div>
            <div id="grunde" style="position:absolute;z-index:1;  ">
                <img id="grundi" alt="Grundebene" src="grund.gif" width="100%" height="100%" /></div>
            <div id="l1e" style="position:absolute;z-index:2; ">
                <img id="l1i" alt="Linienbündel 1" src="l1.gif" width="100%" height="100%" /></div>
            <div id="l2e" style="position:absolute;z-index:3; ">
                <img id="l2i" alt="Linienbündel 2"src="l2.gif" width="100%" height="100%"/></div>
            <div id="l3e" style="position:absolute;z-index:4; ">
                <img id="l3i" alt="Linienbündel 3"src="l3.gif"width="100%" height="100%" /></div>
            <div id="l4e" style="position:absolute;z-index:5; ">
                <img id="l4i" alt="Linienbündel 4"src="l4.gif" width="100%" height="100%"/></div>
            <div id="l5e" style="position:absolute;z-index:6; ">
                <img id="l5i" alt="Linienbündel 5"src="l5.gif" width="100%" height="100%" /></div>
            <div id="l6e" style="position:absolute;z-index:7; ">
                <img id="l6i" alt="Linienbündel 7"src="l6.gif" width="100%" height="100%" /></div>
            <div id="l7e" style="position:absolute;z-index:8;">
                <img id="l7i" alt="Linienbündel 7"src="l7.gif" width="100%" height="100%" /></div>
            <div id="l8e" style="position:absolute;z-index:9; ">
                <img id="l8i" alt="Linienbündel 8"src="l8.gif" width="100%" height="100%" /></div>
            <div id="l9e" style="position:absolute;z-index:10; ">
                <img id="l9i" alt="Linienbündel 9"src="l9.gif" width="100%" height="100%" /></div>
            <div id="ele" style="position:absolute;z-index:11; ">
                <img id="eli" alt="Einzellinien"src="el.gif" width="100%" height="100%"  /></div>
            <div id="bahne" style="position:absolute;z-index:12; ">
                <img id="bahni" alt="Bahnlinien"src="bahn.gif" width="100%" height="100%" /></div>
            <div id="cie" style="position:absolute;z-index:13; ">
                <img id="cii" alt="Städte"src="ci.gif" width="100%" height="100%" /></div>
            <div id="sce" style="position:absolute;z-index:14; ">
                <img id="sci" alt="Service Center"src="sc.gif" width="100%" height="100%" usemap = "#netz" />

            <map name="netz" id="netz" >
                            <area id="l1a" shape="rect" coords="33, 118, 640, 418" href="Linienbündel1.htm"/>
                            <area id="l2a" shape="rect" coords="33, 415, 640, 552" href="Linienbündel2.htm" />
                            <area id="l3a" shape="rect" coords="33, 551, 640, 768" href="Linienbündel3.htm"/>
                            <area id="l4a" shape="rect" coords="33, 767, 640, 932" href="Linienbündel4.htm"/>
                            <area id="l5a" shape="rect" coords="33, 931, 640, 1148" href="Linienbündel5.htm"/>
                            <area id="l6a" shape="rect" coords="33, 1148, 640, 1365" href="Linienbündel6.htm"/>
                            <area id="l7a" shape="rect" coords="33, 1363, 640, 1528" href="Linienbündel7.htm"/>
                            <area id="l8a" shape="rect" coords="33, 1526, 640, 1768" href="Linienbündel8.htm"/>                            
                            <area id="l9a" shape="rect" coords="33, 1769, 640, 2089" href="Linienbündel9.htm"/>
                            <area id="ela" shape="rect" coords="33, 2090, 640, 2258" href="Einzellinien.htm"/>
            </map>
        </div>
        </div>
    </body>
</html>

Alles anzeigen

der ist zwar jetzt nicht der von heute morgen den wie gesagt den hab ich wieder zweschossen aber, müsste ungefähr der von gestern abend sein

synaptic

gib mir mal n bissi zeit bis heut abend und lad mal die datei wo hoch, ich schaus mir dann heute abend oder am wochenende mal genauer an

edit: ich seh grad du hast das script im head..
mein script müsste natürlich unter die map platziert werden, weil ja sonst die html-elemente noch nicht vorhanden sind, auf die du zugreifst.

wenn du die scripte im head haben willst, müsstest du die in ein window.onload() stopfen

explanator

Scripte sollten immer ans Ende der Seite.

synaptic

darwinger, hau mal nen quelltext hier rinn, der die bilder verfügbar macht, also mit absoluten pfaden.
dann brauch ich mir hier nix ausdenken.. und schrieb mal welche auflösung oder fenstergröße die optimale ist, mit der du den kram bisher fabriziert hast.

DarWinger

hey danke erstmal für die Antworten werds beherzigen mit den scripten und sry hab mir übers we mal eine auszeit von dem thema gegönnt
ähm kannst mir das mit den absoluten pfaden kurz mal erläutern sry ist das erstmal das ich jetzt so über ein forum hilfe suche da hab ich nicht so den durchblick wie scheinbar auch im html
ähm die grafiken sind aktuell in der größe 3633x2544 naja und auf die größe sind auch die areas angepasst.
die auflösung meines lapis ist 1366x768 (wobei ich mir relativ sicher bin das es nicht das ist was du meinst )
wollte mich jetzt mal mit jQuery beschäftigen weil du ja schon sagtest das es damit wohl geht .... denke mal lieber in ein framework einarbeiten als ewig nicht weiter zu kommen

gruß

DarWinger

was mir jetzt jedoch schon extrem helfen würde wäre wenn, wenn du evtl. siehst wo ich hier den fehler drin hab um die coords zu überschreiben

Code

<script type="text/javascript">        
        function ber (eb){

    var um = (eb.width)/3633;
    var koord = new Array(33, 118, 640, 418)
    for(var i = 0 ; i < koord.length ; i++)
        {
        koord[i]=Math.round(koord[i]*um);
        }
        document.getElementById('l1a').coords = koord[0], koord[1], koord[2], koord[3]; 
        }






</script>

Alles anzeigen

das ist die dazugehörige fehlermeldung

Zitat

Das "coords"-Attribut des <area shape="rect">-Tags ist nicht im Format "links,oben,rechts,unten".

coords="12"

synaptic

mach mal nen string draus..

Code

document.getElementById('l1a').coords = koord[0] +', '+ koord[1] +', '+ koord[2] +', '+ koord[3];

und vergiss nicht, du manipulierst da grad nur die area l1a
es is echt am einfachsten wenn du mit document.getElementByTagName('area') die elemente als array holst, das durchläufst und darin die operationen machst.

nen absoluter pfad ist immer mit domain und ordnern vorneweg
also http://bla.de/meinOrdner/meinUnterOrdner/bild.jpg

lad dein bild für die map mal hoch, damit ich sehe, wie es da aussieht.

und doch doch das is schon die info mit der auflösung die ich meine, aber es geht am ende des tages um den viewport und nicht um die bildschirmauflösung, aber damit kann ich ja dann auch leben und weiß was los is

DarWinger

puuuhh super danke dir, das lustige ist kurz bevor ich wieder rein geschaut hab dachte ich mir noch so eingentlich musst es ja irgendwie verbinden ist ja im java auch so aber manchmal ist man auch wie vernagelt.
naja wenn ich das in ein array mache müsste es ja, um es richtig anzusteuern zu können und es dann an die richtige stelle zu bekommen, ein zwei dimensionales array sein oder liege ich da falsch ?

https://dl.dropboxusercontent.com/u/59723230/hex3.jpg

will halt die areas an der seite über die kästchen haben und dann noch das eine oder andere auf dem img
aber wie gesagt mit der formel funzt es jetzt es bläht halt nur den code ohne ende auf

- - - Aktualisiert - - -

aso das ist das ausgangs bild aus dem ich wegen der hidde and show funtkion mehrere herausgezogen habe