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

synaptic

du liegst falsch da is nix zweidimensional - bzw muss nix zweidimensional sein
du hast ein array mit den areatags drin (das is des aus meinem script-teil)
das gehste durch, liest die coords aus, manipulierst se und stopfst se manipuliert wieder rein.
alles in einem eindimensionalen array.
du kannst das auch so machen dass du eine schleife durchläufst und in der schleife ne funktion aufrufst, die selber auch nur eine schleife hat.

wo du aufpassen musst, ist eine verschachtelte schleife, weil du ja in der äußeren über die areas iterierst und in der inneren die coords ausliest und verwurstest (das wäre der part, den man prima in eine funktion auslagern kann).

da helfen aber zählvariablen i und j

DarWinger

ppuuhhh ok naja ich versuch mich mal dran ... aber jetzt mal eine blöde frage ansich müsste ich doch jetzt mit coords.coords auf die gespeicherten coords zu zu greifen da es ja in dem array coords unter coords abgespeichert ist .... langsam glaub ich echt ich bin zu doof dafür ...

- - - Aktualisiert - - -

frage hat sich erledigt, da lag ich wohl falsch

synaptic

zip des ding mal und lads mir komplett hoch, hab gesehen du hast ja noch etliche bilder mehr verwurstet^^

und das zauberwort ist hier fast immer "schleife"

wenn du das coords-array nimmst sind da ja objekte drin.

das kannste durchlaufen mit ner for-in-schleife

Code

for(e in coords){
 alert(coords[e].coords);
}

DarWinger

also habs gelöst aber wenn du siehst wie ...... naja sagen wir mal so jeder Programmierer zeigt mir einen vogel ....
ähm das mit den hochladen wird glaube ehr problematisch, aber das wichtigste ist doch ansich der code also was da nun für ein bild dahinter liegt ist doch nicht wichtig die usemap liegt ja eh nur auf dem oberen also ist nicht so das eine areas jede auf einer ebene liegt die ganze einzelbilder hängen mit der anderen funktion im head zusammen.

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]; 
    var koord = new Array(33, 415, 640, 552);
    for(var i = 0 ; i < koord.length ; i++)
        {koord[i]=Math.round(koord[i]*um);}
        document.getElementById('l2a').coords = koord[0]+ ',' + koord[1] +',' + koord[2]+ ',' + koord[3]; 
    var koord = new Array(33, 551, 640, 768);
    for(var i = 0 ; i < koord.length ; i++)
        {koord[i]=Math.round(koord[i]*um);}
        document.getElementById('l3a').coords = koord[0]+ ',' + koord[1] +',' + koord[2]+ ',' + koord[3]; 
    var koord = new Array(33, 767, 640, 932);
    for(var i = 0 ; i < koord.length ; i++)
        {koord[i]=Math.round(koord[i]*um);}
        document.getElementById('l4a').coords = koord[0]+ ',' + koord[1] +',' + koord[2]+ ',' + koord[3]; 
    var koord = new Array(33, 931, 640, 1148);
.
.
.
.
.

Alles anzeigen

und das geht halt noch bis zum area bereich 18 so weiter ... naja der code ist zwar jetzt aufgeblasen wir verrückt aber das was ich erreichen wollte funzt

synaptic

naja zum richtigen debuggen ist es immer hilfreich alles zu haben, weil man so eventuelle wechselwirkungen sehen kann.
und nein, der code alleine ist dabei nicht ausreichend
und mir scheint du hast da jetzt die coords händisch in dein script kopiert.. JA!!! das is unfug
ok es funktioniert, aber toll isses nicht, wenn du jetzt einen fehler im algorithmus hast, musst du für jede area den code ändern
entweder du baust ne funktion und übergibst die coords oder ggf auch das area-element oder aber du probierst mal das hier...

HTML

<script type="text/javascript">
var um = (eb.width)/3633; // eb musste halt noch daher holen wo du es jetzt auch schon her holst, denn den wert kenn ich ja nich, weils nen parameter in deiner funktion ist
var areas = document.getElementsByTagName('area');
for(var i=0; i< areas.length; i++){
    var coords = areas[i].coords;
    var areaCoords = new Array();
    for(var j=0; j<coords.length; j++){
        areaCoords[j]=Math.round(coords[j]*um);
    }
    areas[i].coords = areaCoords.join(',');
}
</script>

Alles anzeigen

und ich vermute dass es noch nicht ganz klappt, weil die koordinaten ja durch einen top- und einen left-wert gebildet werden, relativ zum bild.
also reicht die normale bildbreite nicht aus, um damit beide koordinatenpunkte zu berechnen. du musst rausfinden welcher wert der koordinate top ist und welcher left und den entsprechend durch die höhen- bzw. durch die breiten-verhältnisse modifizieren.

und wenn ich mit dieser annahme recht habe musst du jetzt bei deinem Code ALLES wieder verändern, für jede area einzeln

DarWinger

dickes danke erstmal so ähnlich hatte ich es auch mein problem ist nur immer das einlesen in ein array und das zurückgeben ..... das verhältnis bzw. der umrechnungsfaktor ist bei höhe und weite immer der selbe also dürfte das eigentlich nicht das problem sein .... hoffe ich
ich kanns aber im mom noch nicht sagen da ich im mom von dem firebug noch ein problem berichtet bekomme

Zitat

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

coords="1,1,NaN,0,0,0,3,NaN,0,2,1,0,NaN,0,1,0,3"

schätze mal hängt sich noch irgendwie an der übergabe der werte auf.

und kanns nicht oft genug sagen dickes danke !

synaptic

bei deiner fehlermeldung scheinst du zu viele punkte zu haben für ein rechteck...

generell:
wenn etwas NaN wird...
also des heisst Not A Number und der fehler tritt meistens auf, wenn man etwas was nicht automatisch zu ner zahl gemacht werden kann in eine berechnung wirft.
du könntest mal das hier:

HTML

areaCoords[j]=Math.round(coords[j]*um);

zu dem hier machen

HTML

areaCoords[j]=Math.round(parseInt(coords[j])*um);

aber da wären wir wieder beim thema ganzen code mit allem pipapo bereitstellen zum richtigen debugging

und bei deinem shape-problem wird das wohl auch keine abhilfe schaffen.. du hast schlichtweg zu viele koordinaten in deinem einen objekt

DarWinger

also wenn ich das gerade richtig sehe und verstehe im firebug liegt das problem hier:

Code

[B] areaCoords[j][/B]=(Math.round(parseInt([B]coords[j][/B])*um));

den die werte werden ziffernweiße übergeben, in dem array coords sind sie aber noch richtig hinterlegt ... denn auch wenn ich die berechnung in der zeile weg lasse werden die werte nur ziffer für ziffer bzw. zeichen für zeichen übergeben.

naja der quellcode hat sich nicht groß verändert ...

synaptic

ach vergiss es..^^ ich weiß wo mein fehler liegt
konnte ja hier im büro grad nich testen.
also testen kann ich noch immer nicht...
aber probier mal das hier

HTML

<script type="text/javascript">
var um = (eb.width)/3633; // eb musste halt noch daher holen wo du es jetzt auch schon her holst, denn den wert kenn ich ja nich, weils nen parameter in deiner funktion ist
var areas = document.getElementsByTagName('area');
for(var i=0; i< areas.length; i++){
    var coords = areas[i].coords;
    coords = coords.split(','); //wir haben vorher die coords als string geholt und müssen den noch zu nem array machen, indem wir die kommas rauswerfen und jeden wert einzeln speichern
    var areaCoords = new Array();
    for(var j=0; j<coords.length; j++){
        areaCoords[j]=Math.round(coords[j]*um);
    }
    areas[i].coords = areaCoords.join(',');
}
</script>

Alles anzeigen

der fehler kam auf weil die forschleife jedes einzelne zeichen genommen hat und so bekommste bei nem komma des NaN.
jap der geistige horizont eines entwicklers ist immer nur der abstand von seiner brille bis zum brett vorm kopf..^^

DarWinger

:groesste:groesste:groesste

jetzt funzt .... die idee mit dem split hatte ich auch nur das ich es an die falsche stelle gepackt hab .... muss echt den satzbau üben
kann dir garnicht genug danken hab dich ja ganzschön beschäftigt damit ! aber jetzt hat euer forum wenigstens etwas das ich sonst nirgens gefunden hab !

hier mal noch der entgültig bei mir funzende code

Code

<script type="text/javascript">        
    var um = (document.getElementById("sci").width)/3633; 
    var areas = document.getElementsByTagName('area');
 for(var i=0; i< areas.length; i++){
    var coords = areas[i].coords;
    coords = coords.split(','); 
     var areaCoords = new Array();
    for(var j=0; j<coords.length; j++){
        areaCoords[j]=Math.round(coords[j]*um);
    }
    areas[i].coords = areaCoords.join(',');}

    </script>

Alles anzeigen

aber wie gesagt nochmal ein riesen gigantisches dankeschön !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

haja aber ich hab auch schon einen großen stapel bretter jetzt neben mir liegen

synaptic

freut mich, dass es jetzt klappt
aber wie gehabt, prüf nochmal nach, ob die lösung wirklich zu 100% funktioniert oder ob du die jeweils topwerte anders berechnen musst
die eigentliche arbeit hier kam ja von dir, ich musste dich lediglich in die richtige richtung stupsen und deinen code minimieren

DarWinger

Versuch mich jetzt schon einige Zeit daran aber funzt weiterhin spitze ! Jetzt hab ich aber schon wieder das nächste Problem :-P. Aber mach dazu einen extra FRED auf wenn ich es net hinbekomme

synaptic

bedank dich mal nicht zu oft..^^ sonst verlierts an gewicht

wenn du nich weiter wissen solltest, kennste ja die vorgehensweise

Tags

Benutzer online in diesem Thema