Seite 1 von 4 1234 LetzteLetzte
Ergebnis 1 bis 10 von 33

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

  1. #1
    Teeny
    Registriert seit
    09.09.2013
    Beiträge
    20
    Danke
    3
    Bekam 1 mal "Danke" in 1 Posting

    Standard 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

    HTML-Code:
    <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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. Folgende User finden die Antwort von synaptic gut:


  4. #3
    Teeny
    Themenstarter

    Registriert seit
    09.09.2013
    Beiträge
    20
    Danke
    3
    Bekam 1 mal "Danke" in 1 Posting

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

    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 ?

  5. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #5
    Teeny
    Themenstarter

    Registriert seit
    09.09.2013
    Beiträge
    20
    Danke
    3
    Bekam 1 mal "Danke" in 1 Posting

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

    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

  7. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    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>
    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. Folgende User finden die Antwort von synaptic gut:


  9. #7
    Teeny
    Themenstarter

    Registriert seit
    09.09.2013
    Beiträge
    20
    Danke
    3
    Bekam 1 mal "Danke" in 1 Posting

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

    hey habs mal versucht jedoch bekomm ich im firebug
    areas undefined
    coords undefined
    hook null
    i undefined
    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>
    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
    Geändert von DarWinger (12.09.2013 um 09:45 Uhr)

  10. #8
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  11. #9
    Teeny
    Themenstarter

    Registriert seit
    09.09.2013
    Beiträge
    20
    Danke
    3
    Bekam 1 mal "Danke" in 1 Posting

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

    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 .....
    Geändert von DarWinger (12.09.2013 um 11:55 Uhr)

  12. #10
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    also deine map
    HTML-Code:
     <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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Header Größe anpassen!
    Von Reward im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 21.09.2012, 21:45
  2. Textfeld dynamisch der Größe anpassen
    Von Teron Gerofied im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 11
    Letzter Beitrag: 08.01.2011, 13:33
  3. Bilder mit php der größe anpassen
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 27
    Letzter Beitrag: 29.03.2010, 11:01
  4. Popup größe automatisch anpassen
    Von Patrick Weinberg im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 30.12.2007, 09:51
  5. Hintergrundbild/größe anpassen
    Von Maxy im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 25.10.2005, 15:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •