1. #1
    Nachrichtendienst
    Avatar von Baumstumpf
    Registriert seit
    04.12.2011
    Beiträge
    138
    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: 84
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
    Projektleitung
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    4.083
    Thanked 8.509 Times in 2.541 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: 81
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
    U-Labs Routinier
    Avatar von TheRaven
    Registriert seit
    15.03.2014
    Beiträge
    340
    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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191