Bildelemente in Tabelle als Links definieren...

    Hi,

    für meine website habe ich mir ein ganz simples Schema ausgedacht...
    eigentlich... es gibt da leider nur eine Sache die nicht funktioniert.

    Ein Bild habe ich in Stücke zerlegt und möcht nun diese Stücke mit
    Hilfe eine Tabelle wieder so zusammen fügen, das es wieder wie
    das ürsprüngliche Bild aussieht.

    Jedes Bild Element soll ein anklickbarer Link sein und beim überfahren
    mit der Maus soll es gegen eine veränderte Version des Bild Teiles
    ausgetauscht werden.

    Eigentlich ganz simpel... nur sobald ich die zusammengebauten Bilder
    in Links umwandle entstehen Lücken zwischen den Bildern.

    Trotz tagelanger Suche habe ich hierfür keine Lösung gefunden.

    Hoffe ich habe es verständlich beschrieben für Hilfe wär ich echt dankbar...

    Danke Stefan, das hilft mir auf jeden Fall weiter...

    Ich glaube der Fehler liegt in der Art wie das als link definierte
    Bild in die Tabelle eingefügt ist, irgendwas an dem Code stimmt
    wohl nicht... komisch ist das es in firefox einwandfrei funktioiert
    nur im IE wird das bild mit Lücken dargestellt.

    Hier kann man sehen was ich machen möchte, allerdings sollen
    die grafiken eben als links funktionieren. (das erste Beispiel mit
    dem brennenden Streichholz ziemlich unten auf dr Seite)

    http://www.virtualuniversity.ch/guides/webdesign/19.html[/url]

    Hier ist der Teil des Codes in dem der Fehler ist, und hier nochmal der link
    zu dem Beispiel diesmal die korrekte adresse....

    http://www.virtualuniversity.ch/guides/webdesign/19.html

    Die Bilder sollen komplett ohne Abstand übereinander gestellt
    werden und so das Ursprungsbild ergeben...


    <Table Border="0" Cellspacing="0" Cellpadding="0" ALIGN="center">

    <TR>
    <TD> <A HREF="http://www.testtesttest.com">

    </A>
    </TD>
    </TR>

    <TR>
    <TD> <A HREF="http://www.testtesttest.com">

    </A>
    </TD>
    </TR>

    <TR>
    <TD> <A HREF="http://www.testtesttest.com">

    </A>
    </TD>
    </TR>

    Ich denke viel einfacher als so kann man Bild-Links nicht
    ausrichten... wie gesagt im FF geht es, im IE werden die
    Bilder mit 2oder3 pixeln abstand dargestellt obwohl border 0
    angegeben ist aber eben auch nur wenn sie als link angegeben
    sind einfach nur bilder einfügen geht nahtlos.

    Was muss ich hinzufügen oder weglassen???

    Sollte doch für einen Pro sehr einfach sein...

    Danke jojo87... ob das funktioniert kann ich nicht wirklich sagen,
    habs in den head geschrieben... das Problem besteht immer noch,
    vielleicht hab ichs an der falschen Stelle eingefügt.

    Hier noch mal eine Seite die ziemlich genau das zeigt was ich tun will
    http://home.arcor.de/gancosch/kurs/jkurs07.htm#text

    Der unterste Quellcode ist eigentlich optimal aber wieder sind diese
    %6?"§$% Abstände zwischen den Grafiken.

    Wenn jemand weiß wie man diesen Code so verändern kann, das
    sich die Grafiken nahtlos aneinanderreihen, lad ich ihn auf ein
    Bier ein, von mir aus auch mehrere muß nur aus der Nähe von
    Stuttgart kommen.

    Ich dachte und denks eigentlich immernoch das das für jemand
    der sich mit html auskennt eine völlige noob sache ist und echt
    einfach zu lösen.

    Die Ränder sind immer in der Hintergrundfarbe... d.h. der BG scheint
    eben einfach an diesen Stellen durch.

    Danke für den code:
    <style type="text/css" media="screen">
    a {
    padding: 0;
    margin: 0;
    }
    img {
    border:none
    }
    </style>

    ist aber schon viel zu kompliziert für meine html skills... wie gesagt
    es sollte eine simple Lösung sein... der Quellcode der unter dem
    link oben zu sehen ist muß doch mit irgendeinem kleinen Zusatz
    ohne Lücken dargestellt werden... grafiken positionieren ist doch
    super-noob zeug...

    Salut,

    sry, es hätte border:0px heißen müssen. So funktioniert's:


    Tags und Attribute immer klein schreiben (bis auf DOCTYPE).

    Stefan

    Danke... das funktioniert perfekt.

    Kannst du den code ein wenig erklären? Wozu ist dieser Pspad editor
    gelinkt? Kann ich den mouseover effekt noch irgendwie einbauen?

    Salut,

    die meisten Tags werden auf SelfHTML erklärt. Die meta-Tags enthalten nur Informationen über das HTML-Dokument, in diesem Fall den Zeichensatz des Dokumentes und den verwendeten Editor PSPad.

    Ansonsten wird im Header noch ein CSS-Style definiert, nämlich, dass Bilder keinen Rand haben sollen (haben sie sonst, wenn sie verlinkt sind). Der Rest kam ja von dir.

    MouseOver geht auch, dann wird es aber etwas komplizierter. Entweder per JavaScript oder eleganter per CSS, dazu definierst du für jedes der drei Bilder eine eigene Klasse und verwendest dann den Tipp von folgender Seite: Grafischer Hover Effekt mit CSS.

    Evtl. hilft auch die Lektüre des Eingangskapitels zu CSS von SelfHTML, wenn beim ersten Test Fehler auftreten.


    Stefan

    Tausend Dank... css ist wohl eine ziemlich präzise und direkte Methode
    Seiten zu layouten...

    Habe mir das hover beispiel angeschaut, allerdings habe ich keine Ahnung
    wie ich das in den code einfügen muss...

    Danke nochmal, bis ich mit css gut genug bin um das hinzukriegen
    dauert mindestens wochen und ich habe auch bedenken wegen
    der Kompatibilität mit den browsern.

    Ich hatte die Startseite schon fertig und den mouseover effekt
    mit javascript angelegt, bis ich die seite dann im IE getestet
    habe und plötzlich diese Lücken erschienen.

    Hier nochmal der text mit mouseover und lückenloser ausrichtung
    zumindest eben im FF:

    <HTML>
    <HEAD>
    <TITLE>mypage</TITLE>

    </HEAD>

    <BODY BGCOLOR="white">

    <TABLE cellSpacing=0 cellPadding=0 align=center border=0>
    <TBODY>

    <TR> <A HREF="Content/3dgallery.htm" target="middle"
    onmouseover="image1.src='buttons/3d.jpg';"
    onmouseout="image1.src='buttons/3d8.jpg';">

    </a> <TR/>


    <TR> <A HREF="Content/sketchbook.htm" target="middle"
    onmouseover="image2.src='buttons/sketchbook.jpg';"
    onmouseout="image2.src='buttons/sketches.jpg';">

    </a> <TR/>


    <TR> <A HREF="Content/animation.htm" target="middle"
    onmouseover="image4.src='buttons/animation.jpg';"
    onmouseout="image4.src='buttons/animation8.jpg';">

    </a> <TR/>


    <TR> <A HREF="Content/tutorials.htm" target="middle"
    onmouseover="image3.src='buttons/tutorials.jpg';"
    onmouseout="image3.src='buttons/tutorials8.jpg';">

    </a> <TR/>


    <TR> <A HREF="Content/news.htm" target="middle"
    onmouseover="image5.src='buttons/news.jpg';"
    onmouseout="image5.src='buttons/news8.jpg';">

    </a> <TR/>

    </BODY>
    </HTML>

    Kann es sein, das es mit standart html keine Möglichkeit gibt, die Lücken
    wegzubekommen?

    Salut,

    sich mit neuen Techniken zu beschäftigen ist doch interessant. Von der JS-Lösung bin ich weniger angetan, aber wenn es dir wirklich nur darum geht, möglichst schnell eine effektive (nicht effiziente) Lösung zu bekommen, dann bau in deinen Header

    Code
    <style type="text/css" media="screen">
      img {
        border: 0px;
      }
    </style>


    ein. Der IE ist übrigens keine Messlatte in Sachen Referenzdesign...


    Stefan

    Würdest du sagen, das css empfehlenswert ist um eine Seite
    zu bauen, die auf allen browsern gleich dargestellt werden
    soll? Was spricht gegen Javascript?

    Was ich bis jetzt über css gelesen habe klingt ziemlich gut...
    wenn ich mir quellcodes von beliebigen homepages anschaue scheint es
    oft als wären sie über kompliziert geschrieben... ich wollte sie simpel
    und direkt schreiben. Leider bring ich nicht mal einen geordneten
    head zu stande.

    Habe ca vor nem Jahr damit angefangen mir Quellcodes und verschiedene
    web techniken anzuschauen und extrem langsame Fortschritte gemacht,
    weil es schwer ist zu sagen was jetzt für welchen Bedarf das Richtige ist.

    Seiten mit verschachtelten frames und Tabellen sind immer sehr klar
    aufgebaut und laufen größtenteils fehlerfrei obwohl niemand der sich
    professionell mit webdesign beschäftigt so eine Seite bauen würde...
    ich als voll-noob dachte das ich so schnell zu einem ergebnis komme...
    vielleicht lasse ich den hover effekt einfach weg...

    Nein, tu das nicht.
    Frames und Tabellen wind eine maehr als überholte Technik, waren aber lange der Standard. Divs und css setzten sich aber inzwischen durch.
    Die Vorteile sind u.a. diese:
    -Ein bis zu 40% KLEINERER Quellcode, was die Geschwindigkeit der Seite erhöht. Ausserdem sparen große Webseiten damit richtig Geld.

    -Der Code ist (wenn du etwas genauer Hinschaust) simpler. Auch die Browser kompatibilität ist letztendlich einfacher gewährleistet.

    -Spätestens bei den Punkten Behindertenfreundlichkeit und Suchmaschinenoptimierung haben Frames und Tabellen eindeutig verloren.

    Und ja, eine css basierte Seite wird, wenn man vernünftig codet, in alle Browsern gleich gut dargestellt. nur der ie6 brauch hie und da mal ne js-krücke.

    Und zu deinem Problem:
    Ich glaub, ich hab dich die ganze Zeit falsch verstanden.
    Die Lücken erscheinen beim hovern?
    Mach den Hover per css, da gibt es die pseudoklasse a:hover.
    Bsp:

    Code
    a {
font-color: #000;
}
a:hover {
font-color: #fff;
}


    hier wird die linkfarbe bei mouseover von schwarz auf weiß gewechselt. alles weiter bei css4you.de
    du kannst dann bei a: hover mal border: 0px; padding:0; und margin:0; machen.
    War es etwa das?