PSD gescliced - Text auf eines der Bilder per HTML

Arts · 03.12.2006, 15:08

Hallo,

mal angenommen ich habe folgendes PSD gesliced und möchte nun auf das "blaue" per HTML einen Text schreiben, wie müsste der "gesamte" Html-Code für diese Grafik aussehen?

Aktuell sieht der Code für diese Grafik so aus:

Code:

<td colspan="8"><img src="Bilder/05013.new_17.png" width="564" height="509" alt></td>

Ich will also nur, dass ich den Text, der auf das blau soll immer ändern kann, daher soll er per HTML eingefügt werden.

Nightline · 03.12.2006, 17:40

Nach dem Zusammenschneiden der einzelnen Elemente in ImageReady exportierst du das Bild und erhälst eine HTML-Datei, in der dein Bild mittels Tabelle zusammengesetzt ist. Dann einfach im Bearbeitungsprogramm deiner Wahl das blaue Teilbild löschen und stattdessen dort deinen Text schreiben.

Arts · 03.12.2006, 18:42

Zitat:

Zitat von Nightline

Nach dem Zusammenschneiden der einzelnen Elemente in ImageReady exportierst du das Bild und erhälst eine HTML-Datei, in der dein Bild mittels Tabelle zusammengesetzt ist. Dann einfach im Bearbeitungsprogramm deiner Wahl das blaue Teilbild löschen und stattdessen dort deinen Text schreiben.

Was, wenn ich den Hintergrund (also das blau) aber behalten möchte und nur darauf einen Text per HTML schreiben möchte?

Habe schon probiert, aber das klappt so nicht.

Irgendwie muss es doch möglich sein, dass dieses "Teilbild" als Hintergrund fungiert.

Dann wäre es nämlich möglich Text per Html darauf zu schreiben.

komp12 · 03.12.2006, 19:11

Könnte man so machen. ...

SonKite · 03.12.2006, 19:18

Ich verstehe zwar nicht ganz den Sinn dahinter, aber leg das Bild doch einfach als Hintergrund in die Tabelle:

HTML-Code:

<td colspan="8" style="background-image: url(Bilder/05013.new_17.png);">Mein Text</td>

Größenangaben usw. kannst du dann anpassen.

komp12 · 03.12.2006, 19:35

Und was passiert wenn der Text (+Bilder möglicherweise) nicht in den Kasten passt oder jemand die Fontgröße verändert? .....................

Arts · 03.12.2006, 23:32

@SonKite
Vielen Dank, das hat mir schon sehr weitergeholfen.

Muss jetzt nur schaun, wie ich den Text oben links anfangen lassen kann und ggf. wenn der Text nicht ganz passt, das mit dem Scrollbalken hinbekomme.

@komp12
Hab mir bei deinen 2 Beispielen den Quellcode angeschaut und versucht zu verwenden, dann hauts aber leider nicht hin.

Kannst du mir den Html-Code der 2 Beispiele für meine Zeile so geben wie SonKite sie geschreiben hat? Dann würde es bestimmt auch passen.

Danke!

SonKite · 04.12.2006, 00:13

Hast du vielleicht etwas mehr für uns als das Bild, Arts? Zeig doch mal deinen gesamten Code her, dann wird das auch einfacher zu helfen.
komp12 hat das nicht mit Tabellen aufgebaut, darum wird es so nicht bei dir klappen.

Trotzdem solltest du den Beitrag von Nightline nicht übersehen, er hat nämlich auch recht. Das einfarbige Bild im Hintergrund macht wenig Sinn, da kannst du auch einfach eine Hintergrundfarbe nutzen.

Grüße
Stefan

Arts · 04.12.2006, 11:02

Ähm das mit dem Bild ist jetzt nur ein Beispiel gewesen.

Ich habe da einen kompletten Verlauf (anstatt rot) drin, deshalb geht keine normale Farbe als Hintergrund.

Das Beispiel was ich oben geschrieben habe, hat nur etwas andere Farben als das "eigentliche Endprodukt", d.h. der Aufbau bleibt gleich.

Es soll ja nichts großartiges werden, darum ist alles einfach gehalten.

Den Html-Code, den du mir gestern gabst, ist schon eingebaut.

Es fehlt jetzt halt nur, dass der Text (welchen ich einfügen möchte) dann oben links anfängt.

Der Quelltext sieht im Moment noch so aus:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de-de">
<head>
  <title>05013.new</title>


  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body leftmargin="0" topmargin="0" style="background-color: rgb(255, 255, 255);" marginheight="0" marginwidth="0">

<!-- ImageReady Slices (05013.new.blue1) -->
<table id="Tabelle_01" border="0" cellpadding="0" cellspacing="0" height="769" width="1024">

  <tbody>

    <tr>

      <td colspan="16"> <img src="Bilder/05013.html.text_01.png" alt="" height="141" width="1024"></td>

    </tr>

    <tr>

      <td rowspan="4"> <img src="Bilder/05013.html.text_02.png" alt="" height="627" width="13"></td>

      <td> <img src="Bilder/05013.html.text_03.png" alt="" height="29" width="107"></td>

      <td rowspan="4"> <img src="Bilder/05013.html.text_04.png" alt="" height="627" width="41"></td>

      <td> <img src="Bilder/05013.html.text_05.png" alt="" height="29" width="107"></td>

      <td rowspan="4"> <img src="Bilder/05013.html.text_06.png" alt="" height="627" width="41"></td>

      <td> <img src="Bilder/05013.html.text_07.png" alt="" height="29" width="107"></td>

      <td rowspan="2"> <img src="Bilder/05013.html.text_08.png" alt="" height="99" width="41"></td>

      <td> <img src="Bilder/05013.html.text_09.png" alt="" height="29" width="107"></td>

      <td rowspan="2"> <img src="Bilder/05013.html.text_10.png" alt="" height="99" width="41"></td>

      <td> <img src="Bilder/05013.html.text_11.png" alt="" height="29" width="107"></td>

      <td rowspan="2"> <img src="Bilder/05013.html.text_12.png" alt="" height="99" width="41"></td>

      <td> <img src="Bilder/05013.html.text_13.png" alt="" height="29" width="107"></td>

      <td rowspan="2"> <img src="Bilder/05013.html.text_14.png" alt="" height="99" width="41"></td>

      <td colspan="2"> <img src="Bilder/05013.html.text_15.png" alt="" height="29" width="107"></td>

      <td rowspan="4"> <img src="Bilder/05013.html.text_16.png" alt="" height="627" width="16"></td>

    </tr>

    <tr>

      <td rowspan="3"> <img src="Bilder/05013.html.text_17.png" alt="" height="598" width="107"></td>

      <td rowspan="3"> <img src="Bilder/05013.html.text_18.png" alt="" height="598" width="107"></td>

      <td rowspan="3"> <img src="Bilder/05013.html.text_19.png" alt="" height="598" width="107"></td>

      <td> <img src="Bilder/05013.html.text_20.png" alt="" height="70" width="107"></td>

      <td> <img src="Bilder/05013.html.text_21.png" alt="" height="70" width="107"></td>

      <td> <img src="Bilder/05013.html.text_22.png" alt="" height="70" width="107"></td>

      <td colspan="2"> <img src="Bilder/05013.html.text_23.png" alt="" height="70" width="107"></td>

    </tr>

    <tr>

      <td colspan="8" style="background-image: url(Bilder/05013.new_17.png);" height="509" width="564">Mein Text</td>

      <td rowspan="2"> <img src="Bilder/05013.html.text_25.png" alt="" height="528" width="28"></td>

    </tr>

    <tr>

      <td colspan="8"> <img src="Bilder/05013.html.text_26.png" alt="" height="19" width="564"></td>

    </tr>

    <tr>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="13"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="107"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="41"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="107"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="41"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="107"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="41"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="107"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="41"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="107"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="41"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="107"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="41"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="79"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="28"></td>

      <td> <img src="Bilder/Abstandhalter.gif" alt="" height="1" width="16"></td>

    </tr>

  </tbody>
</table>

<!-- End ImageReady Slices -->

</body>
</html>

Wird eh überarbeitet werden müssen, damit die Bilder (.png) einen "schöneren" Namen haben.

Nightline · 04.12.2006, 12:22

Ich versteh das Problem nicht: SonKite hat hier (http://www.traum-projekt.com/forum/2...tml#post715854) eine Lösung geschrieben, das Bild (der Verlauf) einfach als Hintergrund der Tabellenzelle definieren.

Du solltest für die gesamte Seite sowieso mal per CSS margin und padding auf 0 stellen, damit alle Ränder im Vorhinein zurückgesetzt werden. Dann fängt auch dein Text in der linken Ecke an.

Arts · 04.12.2006, 16:24

Dazu müsste ich wissen, welchen Html-Code ich an welche Stelle einfügen soll.

Nightline · 04.12.2006, 18:41

Zitat:

Zitat von Arts

Dazu müsste ich wissen, welchen Html-Code ich an welche Stelle einfügen soll.

Auch diese Frage hat SonKite in der von mir verlinkten Antwort beschrieben, inkl. Codeschnippsel!
Es zeigt die Tabellenzelle, in der dein zerschnippselter blauer Hintergrund als Bild vorhanden ist und jetzt eben als Hintergrundbild definiert wird.

SonKite · 04.12.2006, 19:09

Dann versuch es mal so:

HTML-Code:

<td colspan="8" style="background-image: url(Bilder/05013.new_17.png); vertical-align: top;" height="509" width="564">Mein Text</td>

Arts · 04.12.2006, 19:29

@SonKite
Danke

, damit "kann" ich dann wieder etwas anfangen (ist ja nun nicht schwer den Code zu ersetzen).

@Nightline
Das andere ist genau so, wie wenn ich dir auf einem Gebiet, auf dem du dich evtl. nicht auskennst, was "halbwegs erklären" würde.
Es geht darum mir nicht einfach ein paar Schnipsel vorzuwerfen und dann quasi "schau was du drauß machst".

Beispiel Angeln:
-führe einen Popper "verlockend" für den Fisch
-sage mir den Unterschied zw. Twister/Shad, zw. Spinner/Wobbler, zw. Blinker/Pilker
- erkläre den Unterschied zw. Döbel/Nerfling, Rotauge/Rotfeder
etc.

Die hat's in sich:
-stelle eine Friedfischausrüstung für einen See aus folgenden "Teilen" (einige nicht für Friedfische geeignet) zusammen: Spinnrute, Fliegenrute, Feederrute, Schnüre 0,35mm 0,25mm 0,20mm 0,16mm, 1/0'er, 12'er, 14'er, 16'er, 18'er und 20'er Haken, Blinker, Caster, Wobbler, Spinner, Rolle 500m Schnurfassung oder 150m Schnurfassung .....
Was würdest du da also für Friedfisch nehmen (stünde dir alles so zur Verfügung)?!

Benötigt wird auf alle Fälle: Rute, Rolle, Schnüre, Haken, Köder

Arts · 31.01.2007, 10:29

Ich bins mal wieder.

Warum können User den Text nicht lesen und sehen keinen Hintergrund

, wenn der Teilausschnitt folgendermaßen lautet?

Code:

<td rowspan="26"
    style="background-image: url(Bilder/hp_06.png); vertical-align: top; color: rgb(255, 255, 255);"
    alt height="397" width="479"><!--webbot bot="HTMLMarkup" startspan --><IFRAME src="indextext.html" name="iframe" height="500" scrolling="auto" width="100%"><!--webbot
    bot="HTMLMarkup" endspan --><!--webbot bot="HTMLMarkup" startspan --></IFRAME><!--webbot
    bot="HTMLMarkup" endspan --></td>

Das Hintergrundbild ist hp_06.png und in der indextext.html steht der Text, der eben auf dem Hintergrund zu lesen sein soll.

Ich habs per iFrame gelöst, weil ich den Text immer ändern können möchte und zudem ist der Text formatiert und hat somit keien einheitliche Farbe und Schriftgröße.