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

  • 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


  • 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 :)

  • schade hatte noch hoffnung :-P 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 ?

  • 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 :)

  • 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

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


    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 ;)

  • 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


    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

  • 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 :)

  • 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 :oops:



    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 .....

  • 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
    1. coords.push({
    2. "area_index" :i,
    3. "area_href" : areas[i].href,
    4. "coords" :areas[i].coords });


    aber könntest du mir kurz das codefragment kommentieren ?

  • 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 ;)

  • 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
    1. var um = (eb.width)/3633;
    2. var koord = new Array(33, 118, 640, 418)
    3. for(var i = 0 ; i < koord.length ; i++)
    4. {
    5. koord[i]=koord[i]*um;
    6. }
    7. 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 :-D


    - - - 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 :-P
    aso und ja das mit name ungleich hatte ich schon gecheckt ;-)


    - - - Aktualisiert - - -



    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 :-P

  • 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 :)

  • 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.

  • 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 :oops: 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 :-P
    ä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 :-P


    gruß

  • 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 ;-)


    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"
  • mach mal nen string draus..

    Code
    1. 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 ;)

  • 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 :-P 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 :-P


    - - - Aktualisiert - - -


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