1. #1
    Avatar von Baumstumpf
    Registriert seit
    04.12.2011
    Beiträge
    139
    Thanked 110 Times in 32 Posts

    Standard HTML: Bilder anordnen mit Links?

    Hi,

    eigentlich dachte ich, ich könnte das, jedoch bin ich momentan am verzweifeln an den Basis-Sachen

    Mein Problem ist (ich weiß, es ist noch nicht 100% richtig angeordnet),
    ich habe einen div-bereich mit nem hintergrund und positioniere dadrauf mit padding und einer fixed-position bilder.
    Diese Bilder sollen einen Link haben.

    Auf zwei der Bilder kann ich klicken, auf die restlichen jedoch nicht...
    Was mache ich falsch?

    HTML-Code:
    <div style="width:379px; height:586px; background-image: url('images/Person.png'); border: 2px solid;">
        <div style="position:fixed; padding-top:45px; padding-left:142px;"><a href="unequip/head"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Head"></a></div>
        <div style="position:fixed; padding-top:180px; padding-left:142px;"><a href="unequip/torso"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Torso"></a></div>
        <div style="position:fixed; padding-top:220px;"><a href="unequip/rightHand"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Right Hand"></a></div>
        <div style="position:fixed; padding-top:220px; padding-left:290px;"><a href="unequip/leftHand"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Left Hand"></a></div>
        <div style="position:fixed; padding-top:480px; padding-left:142px;"><a href="unequip/feet"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Feet"></a></div>
    </div>
    Name:  Person.png
Hits: 278
Größe:  91,1 KB

    Live-Demo: http://web541.asphosting.co.at/Person/

    Liebe Grüße
    Baumstumpf
    Geändert von Baumstumpf (24.03.2015 um 21:11 Uhr)

  2. #2
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    6.080
    Thanked 9.118 Times in 2.995 Posts
    Blog Entries
    5

    Standard AW: HTML: Bilder anordnen mit Links?

    Bitte zukünftig Quellcode immer direkt hier zusammen mit Screenshots einfügen und eigene Seiten maximal als zusätzliche Live-Demo verwenden. Sonst ist der Thread nutzlos sobald die Seite in einigen Tagen oder spätestens Wochen von dem Space gelöscht wird oder dieser aus anderen Gründen nicht mehr erreichbar ist. Ich habe deinen Beitrag daher entsprechend überarbeitet. Des weiteren ist es grundsätzlich immer empfehlenswert ein korrektes HTML-Grundgerüst zu verwenden, da es ohne zu abenteuerlichen Fehlern kommen kann (besonders im IE).

    Dein Problem liegen aber woanders: Erst mal legst du mehrere Elemente übereinander, d.H. technisch werden deine Münzen vom Hintergrund verdeckt und sind daher nicht klickbar. Mittels z-index kannst du die Elemente "nach vorne holen", dann können sie auch angeklickt werden.

    Auch wenn es grundsätzlich funktioniert solltest du dich aber an ein paar Grundsätze halten, sonst wird dein Code spätestens mit zunehmendem Volumen ein totales Chaos und komplett unwartbar werden: Erst mal sind Redundanzen zu vermeiden, da sie den Code unnötig aufblähen und bei nachträglichen Änderungen einen erheblichen Mehraufwand verursachen. Das style-Attribut von HTML-Elementen ist daher böse, und sollte nur in Ausnahmefällen genutzt werden wenn es wirklich Sinn macht. Zum Beispiel wenn ein einzigartiges Element dynamisch generiert wird und es sich nur um sehr wenig CSS handelt wie etwa eine Höhenangabe. Auch die Width- und Height HTML-Attribute von Bildern sollten möglichst in CSS ausgelagert werden. Um das zu erreichen arbeitet man mit CSS-Klassen/Ids.

    Unterzieht man deinen Code mit diesen Kriterien einem Refactoring, könnte das ganze so aussehen:
    HTML-Code:
    <div class="coin-person">
        <a class="coin coin-head" href="unequip/head">
            <img src="http://web541.asphosting.co.at/Person/images/figure-empty.png" alt="Head">
        </a>
        <a class="coin coin-body" href="unequip/torso">
            <img src="http://web541.asphosting.co.at/Person/images/figure-empty.png" alt="Torso">
        </a>
        ...
    </div>
    CSS (Zur Einbindung in dein HTML siehe hier: http://www.webmasterpro.de/coding/ar...nzubinden.html)

    .coin-person {
    width: 379px;
    height: 586px;
    background-image: url('http://web541.asphosting.co.at/Person/images/Person.png');
    border: 2px solid;
    }
    .coin-person .coin {
    position: fixed;
    z-index: 9999;
    }
    .coin-person .coin img {
    width: 90px;
    height: 90px;
    border: 0;
    }
    .coin-person .coin.coin-head {
    margin-top: 45px;
    margin-left: 142px;
    }
    .coin-person .coin.coin-body {
    margin-top: 180px;
    margin-left: 142px;
    }

    Der unnötige Div-Container um jede Münze ist wie man sieht weggefallen. Generell sollten unnötige Wrapper vermieden werden, da sie unnötiges HTML erzeugen und dadurch auch die Übersicht verschlechtern. An meinem Beispiel sieht man auch sehr schön, warum man die korrekten Abstandstypen verwenden sollte. Du hattest zur Positionierung den Innenabstand (padding) verwendet. Bewirkt optisch erst mal dasselbe wie der Außenabstand (margin), allerdings gehört der Innenabstand ebenfalls zum Element. Ohne den Wrapper wie in meinem Beispiel würde daher nicht nur die Münze sondern die gesamte Fläche anklickbar werden, wenn padding statt margin verwendet wird:

    Name:  head-coin.png
Hits: 273
Größe:  63,5 KB


  3. The Following 4 Users Say Thank You to DMW007 For This Useful Post:

    Baumstumpf (24.03.2015), Gameboy9 (25.03.2015), Open Thought (26.03.2015), TheRaven (26.03.2015)

  4. #3
    Avatar von TheRaven
    Registriert seit
    15.03.2014
    Beiträge
    341
    Thanked 206 Times in 126 Posts

    Standard AW: HTML: Bilder anordnen mit Links?

    Sehr gute Erklärung, ich wusste das auch nicht genau.

Ähnliche Themen

  1. [HTML Tutorial] #4 - Links & Bilder
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 18.07.2012, 18:26
  2. SEO Links
    Von Gelöschter Benutzer im Forum Webentwicklung
    Antworten: 2
    Letzter Beitrag: 14.07.2012, 18:16
  3. [Sammelthread] Ref Links
    Von Visorx im Forum OffTopic
    Antworten: 87
    Letzter Beitrag: 06.05.2012, 09:39
  4. Youtube Links
    Von Bushido RH im Forum Fragen & Probleme
    Antworten: 1
    Letzter Beitrag: 07.12.2011, 17:21
  5. Windows 7 Icons oben anordnen ?
    Von Y zu dem K im Forum Windows
    Antworten: 4
    Letzter Beitrag: 21.11.2011, 20:36
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.