Milliondollarhomepage - Pixelkästchen

  • geschlossen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Moin moin.

    Was du suchst sind wahrscheinlich "Image Maps" ("Verweis-sensitive Grafiken").

    SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

    Verweis-sensitive Grafiken sind Grafiken, in denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt. Auf diese Weise kann der Anwender in einigen Fällen wesentlich intuitiver und schneller zu Information gelangen als durch lange verbale Verweislisten.


    Gruß,
    Commander Keen
    Ich habe das Wort "Europa" immer im Munde derjenigen Politiker
    gefunden, die von anderen Mächten etwas verlangten, was sie im
    eigenen Namen nicht zu fordern wagten. [SIZE="1"](Nov. 1876)[/SIZE]
    [SIZE="1"]Otto von Bismarck[/SIZE]
  • @CommanderKeen,so wie die HP,die GUARDIAN gepostet hat solls sein,dass kommt mit deinem Link leider nicht ganz hin,es sei denn du hast da noch nen besseren Vorschlag :confused:

    @GUARDIAN

    GENAU SO solls sein,aber ganz mir auch erzählen,wie der Quellcode ist?
    Habe ihn kopiert um mal zu sehen,wie es läuft,aber leider steige ich da nicht durch :(
  • Ja das ist mit besagten Image Maps gemacht worden.
    Ich hab aber noch nie so eine extrem grosse Map gesehen.
    Hätte auch nie gedacht, das das funktioniert ^^
    2.te Alternative wäre ja gewesen, das z.b. in PS zu slicen und dann ne Webpage daraus generieren zu lassen. Allerdings, würde es halt dann beim Laden recht dämlich aussehen, wenn 1000 einzelne Bilder geladen werden :)
  • okay,langsam habe ich den Trick raus,aber auf der MILLIONDOLLARHOMEPAGE wurde zu Anfang mal das Pixelmuster gezeigt,wie bekomme ich dass hin ?

    Muß ich da jetzt nen Bild malen mit ich sag mal 3000 Pixelfeldern,dies wird als Bild gespeichert und dann kann man es so als Feld sehen oder wie ?
  • Das ist sehr sehr umständlich mit HTML zu realisieren, außer du erstellst eine Div-Box mit dem von dir geposteten Hintergrund als Background.
    Kannst das ja versuchen mit Tabellen zu realisieren (td {border:1px #000 solid;}) Das geht code-ärmer als wenn du das mit divs machst.

    gruß
    Broken Sword
  • Wie genau würde denn der Code Aussehen,wenn man dass mit DIV macht ?


    Dass klingt grad bißchen schwierig :(

    Laut SelfHTML gibt man ja die Koordinaten an,wo sich der Link befinden soll

    Quellcode

    1. Ein Viereck (shape="rect") definieren Sie mit den Koordinaten für x1,y1,x2,y2
    2. wobei bedeuten:
    3. x1 = linke obere Ecke, Pixel von links
    4. y1 = linke obere Ecke, Pixel von oben
    5. x2 = rechte untere Ecke, Pixel von links
    6. y2 = rechte untere Ecke, Pixel von oben
    7. Einen Kreis (shape="circle") definieren Sie mit den Koordinaten für x,y,r
    8. wobei bedeuten:
    9. x = Mittelpunkt, Pixel von links
    10. y = Mittelpunkt, Pixel von oben
    11. r = Radius in Pixel
    12. Ein Polygon (shape="poly") definieren Sie mit den Koordinaten x1,y1,x2,y2 ... xn,yn
    13. wobei bedeuten:
    14. x = Pixel einer Ecke von links
    15. y = Pixel einer Ecke von oben
    16. Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.
    Alles anzeigen


    Aber woher weiß ich,wo was ist ? Deswegen meinte ich dass ja mit dem Bild,ich habe ja sonst kein Raster wo ich sagen kann dass in Y1X3 der Link blablabla.de sein soll.

    Ich muß ja irgendwo eine Orientierung haben :confused:

    >>> H I E R <<< kann man dass noch sehen,was ich meinte mit den Pixelfelder,hier ist noch nicht alles mit Werbung ausgefüllt.

    Und SO ein Muster meinte ich,dass man dieses irgendwie hinbekommt ?!

    weiß keiner mehr weiter ? :confused:

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword ()

  • Ich versteh dein Problem nicht, du hast doch verschiedene Lösungsvorschläge, die einfacher sind als das mit DIVs zu realisieren -.-"
    Aber wenn du unbedingt willst, hier:

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <title>Test</title>
    6. <style type="text/css">
    7. <!--
    8. .ndiv,.enddiv,.botdiv,.botenddiv {
    9. width:10px;
    10. height:10px;
    11. background-color:#FFF;
    12. font-size:3px;
    13. border-right:1px #000 solid;
    14. border-top:1px #000 solid;
    15. float:right;
    16. }
    17. .enddiv,.botenddiv {
    18. border-left:1px #000 solid;
    19. clear:left;
    20. }
    21. .botdiv,.botenddiv {
    22. border-bottom:1px #000 solid;
    23. }
    24. -->
    25. </style>
    26. </head>
    27. <body>
    28. <div style="width:70px">
    29. <div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="enddiv">&nbsp;</div>
    30. <div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="enddiv">&nbsp;</div>
    31. <div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="enddiv">&nbsp;</div>
    32. <div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="ndiv">&nbsp;</div><div class="enddiv">&nbsp;</div>
    33. <div class="botdiv">&nbsp;</div><div class="botdiv">&nbsp;</div><div class="botdiv">&nbsp;</div><div class="botdiv">&nbsp;</div><div class="botdiv">&nbsp;</div><div class="botenddiv">&nbsp;</div>
    34. </div>
    35. </body>
    36. </html>
    Alles anzeigen

    Musst halt je nachdem, wieviele Kästchen du hinzufügst beim "main-div" das width erweitern.

    Gruß
    Broken Sword
  • das Problem JETZT ist,das ich zwar nen Feld mit lauter Kästchen habe,ABER ich die Links etc. nicht direkt in einzelne Kästchen bekomme,sondern diese dann teilweise am Rand der Kästchen sind und anstatt in einem Kästchen sind die über 5-6 Kästchen verteilt :(

    Also ich bekomme die Links nicht direkt ins Bild :(
  • Ja, das ist natürlich klar... Das einzige was du machen kannst, ist mit z-index die verschiedenen DIVs ("Karierte Muster"z-index:1 und Bilder z-index:2) Musst natürlich position:absolute angeben und die Position bestimmen. Alles sehr schwer zu realisieren, vor allem wenn man wenig Ahnung von der Materie hat.
    Ich wiederhole mich zwar ungern, aber:

    Das ist sehr sehr umständlich mit HTML zu realisieren, außer du erstellst eine Div-Box mit dem von dir geposteten Hintergrund als Background.


    Gruß
    Broken Sword
  • Broken Sword schrieb:

    Ja, das ist natürlich klar... Das einzige was du machen kannst, ist mit z-index die verschiedenen DIVs ("Karierte Muster"z-index:1 und Bilder z-index:2) Musst natürlich position:absolute angeben und die Position bestimmen. Alles sehr schwer zu realisieren, vor allem wenn man wenig Ahnung von der Materie hat.
    Ich wiederhole mich zwar ungern, aber:


    Gruß
    Broken Sword


    Ja gut,mit dem Bild habe ich ja das Problem,jetzt mit deinem Code habe ich noch nicht weiter probiert.

    Hatte halt mit PI ein Rastermuster erstellt gehabt,wobei ich dass ganze auch umsetzen konnte,dass das Bild angezeigt wird usw.,aber auch DA klappt es nicht,dass die Link in den einzelnen Kästchen sind :confused: :(

    Also grob gesagt,alles funktioniert,ich weiß halt nur nicht,wie ich die genaue Postition bestimmen kann,damit der Link/das Bild genau in dem Kästchen sind.
  • Okay... dann seh ich keine andere Lösung, als dir das selber zu machen.
    Also, was willst du genau. Ich werde dir das dann estellen! ;)

    Was ich mitgekriegt habe einfach nur ein Feld, wo als Hintergrund die Kästchen sind und dann ein paar Bilder, die per area-verlinkt sind, drauf?

    Gruß
    Broken Sword
  • Na mensch,warum nicht gleich so,hätte uns einiges an sabbeln erspart :P

    Großes Dankeschön schonmal im voraus.

    Ja,genau so solls sein,

    also ein Feld ich sag mal mit 10x10 Kästchen wo dann halt Bilder drin zu finden sind,und dann halt (je nachdem wie du es anstellst) die Parameter von X und Y mit denen man den Link in das Feld bekommt.

    Falls du es ohne X u. Y machst halt nur die Areas und vllt. 2-3 mit nem Bild drin,je nachdem,wie der Quellcode aussieht,damit ich mir nen Überblick verschaffen kann.

    Ps: Kann aber auch sein,dass ich die falsche Dreamweaver Version habe ?!
    Oder ich bin einfach nur zu blöd heraus zu finden,was du genau meinst.

    Naja,mal sehen.

    Wie gesagt,die Felder an für sich habe ich als Bild hinbekommen,oder halt das von dir mit den Div.

    Es klappt halt auch,das Bild mit den Pixeln anzeigen zu lassen und auch Link hinein zu klatschen,allerdings werden die über mehrere Kästchen verteilt,dass soll so nicht sein,und sie werden am Rand angezeigt :(

    Hier siehst du mal das Bild,welches ich erstellt habe.


    Jetzt müßte ich halt nur noch die Links Bilder den Bild anpassen :(
    Allerdings sind die Kästchen etwas zu klein :confused: