Michael: 2 Bilder miteinander 'verkleben'

Hi

Kann man mit DHTML o.ä. ein bild (egal welcher form) zb.: x="20", y="30" anzeigen lassen (aussgegangen von x&y="0") ??
und dann ein zweites bild x="25",y="30" - oder so änlich ;)

und kann man diese bezeichnung x&y="?" auch ausgehend von einer tabelle die Zentriert ist angeben ??

  1. Naja eigentlich schon - du kannst das auch ohne DHTML - das ist eher eine Möglichkeit, die durch CSS hervorgerufen wird.

    Du schreibst die 2 Bilder in 2 verschiedene Layer. Gibst den Layern das CSS Attribut "position:absolute", positionierst sie über die Attribute "left" und "top" und gibst ihnen einen Z-Index

    Je höher der Index, desto weiter vorne wird der Layer gezeigt.

    mfg

    1. hört sich ja ganz einfach an, aber wo kann ich mir ein beispiel abgucken ? - ich bin selber noch zu unerfahren.

      1. hört sich ja ganz einfach an, aber wo kann ich mir ein beispiel abgucken ? - ich bin selber noch zu unerfahren.

        Mach erstmal. Und zwar so, wie du denkst. Ansonsten lernst du nicht viel dabei.

        Lösungsansatz:

        • Erstelle dir eine HTML-Datei ohne viel Inhalt.
        • Füge die beiden Bilder ein.
        • Betrachte dein Werk.
        • Lies die Antwort auf deine Frage noch einmal.
        • Schau in http://selfhtml.teamone.de nach, was dir an Begriffen unklar ist. Hier ein kleiner Hinweis: Mit Layer ist das Tag <div> gemeint.
        • Versuche, die Antwort umzusetzen.
        • Treten Probleme auf, schau nochmal in SelfHTML nach.
        • Wenn dann noch was unklar ist, frage hier erneut. Aber konkret auf ein Problem bezogen, was du dann hast.

        Das hier ist das SELF-forum. SELF kommt von "selbermachen".

        - Sven Rautenberg

        1. Hier ein kleiner Hinweis: Mit Layer ist das Tag <div> gemeint.

          ja das weiss ich doch !!
          aber den aufbau dieses tags ist mir unbekannt.
          wie muss ich dass angehen
          <div> [...] x="0" y="10" [...] <div>
          oder wie - ich hab doch kein plan.

          1. Hier ein kleiner Hinweis: Mit Layer ist das Tag <div> gemeint.

            ja das weiss ich doch !!
            aber den aufbau dieses tags ist mir unbekannt.
            wie muss ich dass angehen
            <div> [...] x="0" y="10" [...] <div>
            oder wie - ich hab doch kein plan.

            Ok, das ist ja schonmal ein Anfang.

            Das DIV ist im Prinzip ein Tag ohne irgendeine EIGENE Formatierung, genauso wie SPAN. Wenn man Effekte haben will, muß man mit CSS arbeiten.

            Der Unterschied zwischen DIV und SPAN: SPAN ist ein Inline-Element. Damit kann man, genau wie mit z.B. <B> oder <I> im laufenden Text einzelne Buchstaben (oder auch mehrere im Block) formatieren. DIV hingegen ist ein Block-Element. Damit werden immer ganze Absätze formatiert (ungefähr wie mit <H1> oder <P>). Ein DIV wird auch "Layer" genannt, weil man damit frei bewegliche Elemente definieren kann.

            Du kannst die Style-Definitionen im style-Attribut angeben. Dann mußt du das aber für jedes DIV extra wiederholen.

            Beispiel:

            <div style="color:#000000; background:#FFFF00">
            Irgendein schwarzer Text mit gelbem Hintergrund
            </div>

            Die möglichen Definitionen für solche Formatierungen findest du im CSS-Kapitel von SelfHTML: </selfhtml/css/index.html>

            Was nun das Verkleben angeht: Du kannst deine beiden Bilder in jeweils ein DIV packen und mit
            style="position:absolute; left:123px; top:456px"
            positionieren. Logischerweise mußt du die Zahlen 123 und 456 deinen Gegebenheiten anpassen.

            Zweite Möglichkeit:
            Pack die Grafiken einfach nebeneinander:
            <img src="bild1.jpg"><img src="bild2.jpg">

            Wenn das nicht gut geht, packe sie in eine Tabelle:
            <table border="0" cellpadding="0" cellspacing="0">
              <tr>
               <td><img src="bild1.jpg></td><td><img src="bild2.jpg"></td>
              </tr>
            </table>

            - Sven Rautenberg

            1. style="position:absolute; left:123px; top:456px"

              DANKE !! hat wunderbar funktioniert, jetzt habe ich aber ,wie oben schon neu gepostet, die frage wie ich ein bild transparen machen kann (siehe oben).
              aber DANKE !! Super !!

            2. style="position:absolute; left:align=" center"; top:0px"
              oder ähnliches funktioniert nicht [...]
              ??
              wie heisst es richtig ?

    2. Beispiel:

      <div style="position: absolute; width: 50px; height:50px; top: 100px; left:100px; z-index: 1;"><img src="bild1.gif" width="50" height="50"></div>

      <div style="position: absolute; width: 50px; height: 50px; top: 125px; left: 125px; z-index: 2;"><img src="bild2.gif" width="60" height="60"></div>

      gibt 2 bilder die sich überschneiden ... :-)

      mfg

      Naja eigentlich schon - du kannst das auch ohne DHTML - das ist eher eine Möglichkeit, die durch CSS hervorgerufen wird.

      Du schreibst die 2 Bilder in 2 verschiedene Layer. Gibst den Layern das CSS Attribut "position:absolute", positionierst sie über die Attribute "left" und "top" und gibst ihnen einen Z-Index

      Je höher der Index, desto weiter vorne wird der Layer gezeigt.

      mfg