Anzeige

Foren Header

Foren Header | PSD-Tutorials.de

Erstellt von JackHolmes, 07.10.2005.

  1. JackHolmes

    JackHolmes Guest

    Foren Header
    So... ich habe da auch mal eine Frage. Ich bin Besitzer eines Forums (WBB2) und habe dort bis jetzt eben einzelne Buttons für Profil, Anmelden, usw usw
    Nun habe ich aber in diversen Foren so schicke Header gesehen, Bilder, in denen die ganzen Links integriert sind. Nun habe ich schon herausgefunden, dass man bestimmte Bildbereiche durch die Slices zu Schaltflächen macht.
    Eines verstehe ich allerdings noch nicht. Es wird ja automatisch das gesamte Bild in Slices unterteilt und das Bild wird dann auch in seinen Einzelteilen abgespeichert. Wie mache ich es, dass ich am Ende eine einzige Bilddatei (JPG) habe und mit trotzdem die Schaltflächen für Profil, Team usw erhalten bleiben?


    schonmal danke im vorraus ^^
     
    #1      
  2. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    Foren Header
    schlicht und ergreifend: geht nicht.

    ein jpeg ist einfach nur eine kolonne von pixeln, mehr nicht.
    um das gewünschte ergebnis zu erhalten, musst du eine tabelle erstellen und sie dann mit den einzelbildern füllen.
    stell dir das vor wie fliesenlegen: deine küche hat nur bemalte fliesen, und wenn man sich auf bestimmte stellt, geht das licht an. du kannst nicht einfach alle fliesen nehmen und diesen effekt woanders wieder aufbaun, du musst den boden aufreißen und jede fliese einzeln transportieren.
    so ist das auch mit webgraphiken: man zerstückelt ein bild und weist den einzelnen stückchen attribute und methoden zu. am ende legt man sie so aus, dass es aussieht, als wäre es alles aus einem guss, in wirklichkeit ist es aber ein haufen von unabhängigen bildern, die nur so aussehen, als wären sie eines. und manche davon haben eben einen hyperlink zugewiesen.
    setz dich lieber erst mal mit webdesign im allgemeinen auseinander, das sollte das obige dann auch verständlicher machen.
     
    #2      
  3. JackHolmes

    JackHolmes Guest

    Foren Header
    Ok, also müssen es Einzelteile bleiben.., wie funktioniert dann aber dieser Header hier?
    http://potcrpg.po.funpic.de/wbblite/
    denn wenn ich auf verschiedene Punkte im Bild klicke, und auf Eigenschaften gehe, kommt immer die gleiche Adresse... also ists doch nur ein Bild, oder o.Ô

    habt ihr denn hier auf eurer Seite irgendwo ein Tutorial anhand von dem ich 1. Lernen kann wie ich so etwas baue und 2. wie ich es richtig online stelle?
     
    #3      
  4. chin82

    chin82 Nicht mehr ganz neu hier

    Dabei seit:
    10.06.2005
    Beiträge:
    239
    Geschlecht:
    männlich
    Foren Header
    also ich mein mann kann in einem bild bereiche definieren und denen quasi ne aufgabe geben.
    also nicht so wie blackout schreibt, dass sowas net geht
     
    #4      
  5. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    Foren Header
    kann man nicht.

    schaut euch halt mal den sourcecode an...

    Code (Text):
    1.  
    2. <MAP NAME="header_Map">
    3. <AREA SHAPE="rect" ALT="" COORDS="426,41, 510,53" HREF="register.php">
    4. <AREA SHAPE="rect" ALT="" COORDS="444,80, 529,89" HREF="login.php">
    5. <AREA SHAPE="rect" ALT="" COORDS="473,111, 528,121" HREF="index.php">
    6. <AREA SHAPE="rect" ALT="" COORDS="483,141, 565,151" HREF="usercp.php">
    7. <AREA SHAPE="rect" ALT="" COORDS="519,169, 567,182" HREF="memberslist.php">
    8. <AREA SHAPE="rect" ALT="" COORDS="552,192, 631,204" HREF="team.php">
    9. <AREA SHAPE="rect" ALT="" COORDS="580,226, 633,237" HREF="index.php#voten">
    10. <AREA SHAPE="rect" ALT="" COORDS="624,254, 672,264" HREF="search.php">
    11. <AREA SHAPE="rect" ALT="" COORDS="682,284, 717,291" HREF="misc.php?action=faq">
    12. <AREA SHAPE="rect" ALT="" COORDS="497,302, 568,313" HREF="http://www.potc-rpg.de">
    13. </MAP>
    14.  
    15.  
    16. [img]images/back.jpg[/img]
    die comments im code sind von mir. man sieht oben deutlich, dass eine map erstellt wird, in der bestimmte bereiche einen hyperlink erhalten.
    in den letzten zeilen wird nun ein bild eingebettet, das die selbe map erhält, wie es oben definiert wurde. dadurch erscheint das bild als ganzes und hat auf sich drauf transluzente buttons.
    mit einer speziellen speicherung des bildes hat das nicht im entferntesten was zu tun.
     
    #5      
  6. JackHolmes

    JackHolmes Guest

    Foren Header
    mal sehen ob ich das nun verstanden habe...
    ich erstelle also eine ganz normale Bilddatei mit den Namen der Links, erstelle aber keine Slices. Dann weise ich den jeweiligen Bereichen, z.B. dem wo 'Profil' steht per Code die Fähigkeit zu, dass das ein Link ist.

    Stimmt das so in etwa?
    Falls ja, habt ihr da irgendwo eine Anleitung, mit der man sich das genau verinnerlichen kann?
     
    #6      
  7. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    Foren Header
    naja, es gibt halt 2 methoden:

    1. ein bild wird in slices unterteilt und alle zusammen in einer tabelle abgebildet, so dass es aussieht, als wäre alles aus einem guss. bestimmte bilder bekommen nun einen hyperlink zugewiesen. (die gängige methode)

    2. ein bild wird als ganzes gespeichert und mit einer map überlagert. diese map hat an bestimmten stellen funktionen zugraordnet, zb hyperlinks. (weniger verbreitet, da zb. keine mouseover-funktion eingebaut werden kann)

    ich muss gestehen eigentlich keine ahnung von html/js/php zu haben, aber schau doch mal in selfhtml, da gibts auf eigentlich alle fragen die es so gibt eine antwort :)
     
    #7      
  8. JackHolmes

    JackHolmes Guest

    Foren Header
    Vielen Dank für den Link, da habe ich die Lösung für mein Problem gefunden, vielen Dank :D
     
    #8      
Seobility SEO Tool
x
×
×