Suche einen bestimmten HTML-Code im Bezug Grafik+Text!!

[Natalie Duszynski]

Hi!

Ich habe vor, eine Homepage über Harry Potter zu machen. Ich habe paar HTML-Kenntnisse....doch wie es scheint noch nicht zu gute .

Also, ich möchte eine Homepage machen, wo man eine große Grafikdatei (bei der man bestimmte Teile des Bildes verlinken kann) verwendet und wo man über diese Grafik dann Texte schreiben kann. Texte möchte ich also auf den "unverlinkten Oberflächen" schreiben  .

Nun habe ich schon verschiedene Sachen ausprobiert, aber ich habe meinen gewünschten Effekt nicht erzielen können. Ich habe zum Beispiel versucht, diese Grafikdatei als Hintergrund zu setzen, und man konnte dann auch Texte drüberschreiben.
ABER: Da ich bestimmte Teile meiner Grafik verlinken möchte, geht es dann ja nicht  (Für die Verlinkung bestimmter Teile der Grafik benutze ich z. B. diesen Code: <area shape="rect" coords="42,36,96,57" href="www.meinLinkziel.de" alt="Zielname">)

Ich habe wirklich keinen Plan, was ich noch anstellen könnte, damit es funktioniert  Und das Schlimme, aber auch blöd daran ist, dass ich vor einem Jahr eine andere Homepage gemacht habe, bei der ich auch eine große Grafik verwendet habe und Texte drübergeschrieben habe und irgendwie habe ich es geschafft, dass es so funktionierte, wie ich es wollte.  Leider existiert diese Homepage nicht mehr und jetzt stehe ich - nun - mit leeren Händen da.

Bitte, liebe HTML-Kenner, hilft mir bitte! Habe mich auch schon Nächte lang durchgegooglelt und nichts gefunden!

Danke im Vorraus

[Gernot Back]

Hallo Natalie,

stell doch einfach mal deine Seite ins Netz, so wenig perfekt sie auch derzeit sein mag, damit wir sehen, wo bei dir der Hase im Pfeffer liegt. Möglicherweise fehlt bei deinem usemap-Attribut nur der Lattenzaun #. Den habe ich auch schon oft vergessen und mich minutenlang gewundert, warum es nicht funktioniert.

Die Texteinblendung machst du am besten in den Areas mit dem title- und/oder dem alt-Attribut gleichzeitig. Wenn du die da auf leere Zeichenkette "" setzt wird nichts angezeigt. Wenn du hingegen für die unverlinkten Teile was einblenden willst, dann machst du das mit dem title- und/oder  dem alt-Attribut direkt im Vordergrund-Image.

Gruß Gernot

[Natalie]

Hi Gernot :)

Ich habe mal meine HTML-Seite hochgeladen. Man kann sie unter:

http://snape2.sn.funpic.de/test2.html

aufrufen. Also, ich habe erstmal das Logo, dann kommt so ein Filmstreifen mit Bildern. Diese Bilder habe ich bereits "verlinkt" (ich muss nur noch den Link angeben). Danach kommt der unterer blauer Teil. Und in diesem Teil möchte ich meine Texte schreiben.

Ich habe mir schon auch überlegt, ob man dies nicht mit einer Tabelle machen könnte, und sie so positionieren würde, dass sie diesen blauen Teil deckt und somit den Text problemlos hinschreiben kann. Doch meine Versuche haben irgendwie gescheitert, da entweder die Tabelle oberhalb der Grafik oder unterhalb angezeigt wurde :-(

[Gernot Back]

Hallo Natalie,

Ich habe mir schon auch überlegt, ob man dies nicht mit einer Tabelle machen könnte, und sie so positionieren würde, dass sie diesen blauen Teil deckt und somit den Text problemlos hinschreiben kann. Doch meine Versuche haben irgendwie gescheitert, da entweder die Tabelle oberhalb der Grafik oder unterhalb angezeigt wurde :-(

Also, so wie du das machst, ist das wirklich wenig flexibel. Das Bild würde ich in viele kleine Einzelbilder zerschneiden und die ohne Map verlinken. Ob du die Bilder dann in einer Tabelle oder in anderen Elementen platzierst ist erst einaml nicht so wichtig. Den riesengroßen blauen Bereich, wo du deine Texte reinschreiben willst, brauchst du auch nicht. Schneide dir nur den Bereich heraus, wo du da sitzt, platziere den unten rechts und lass den Text vor entsprechend blauem Hintegrgrund darum herum fließen.

Welches Grafik-Programm steht dir denn zur Verfügung?

Gruß Gernot

[Natalie]

Paint Shop Pro Version 9 :)

[Gernot Back]

Hallo Natalie,

Kannst du denn damit Slices erzeugen? Dann mach das mal entlang der relevanten Linien.

Ich kann dir eigentlich auch nur Tipps zu ImageReady geben. Aber es gibt hier ja notfalls noch andere Helfer.

Gruß Gernot

[Ashura]

Hallo Gernot.

Wo ist denn dein Bild abgeblieben?
Oder fügst du den URL wirklich bei jedem Beitrag per Hand ein? :-)

Gruß, Ashura

[Ashura]

Hallo.

Ups, zu früh abgeschickt, das Laden war noch gar nicht fertig.
Naja, ich bin eben ein Nerd und damit etwas zerstreut. ;-)

Gruß, Ashura

[Natalie]

Hallo Natalie,

Kannst du denn damit Slices erzeugen? Dann mach das mal entlang der relevanten Linien.

Hm, leider weiß ich nicht, was Slices sind....

Ich kann dir eigentlich auch nur Tipps zu ImageReady geben. Aber es gibt hier ja notfalls noch andere Helfer.

Ich werde mal deinen Tipp zum Herzen nehmen :)
Dankeschön für deine Hilfe, Gernot :)

[Gunnar Bittersmann]

Hi Gernot,

Das Bild würde ich in viele kleine Einzelbilder zerschneiden

Würdest du dich gern in viele kleine Einzelgernots zerschneiden lassen?

Ein Bild zu zerschneiden ist wohl nie eine gute Idee.

Wie wär’s denn, das Bild in den Hintergrund zu legen und alles andere wie gewünscht darauf zu positionieren?

Gruß,
Gunnar

[Gernot Back]

Hallo Gunnar,

Würdest du dich gern in viele kleine Einzelgernots zerschneiden lassen?

So verzettelt komme ich mir in der Tat manchmal vor. ;-)

Ein Bild zu zerschneiden ist wohl nie eine gute Idee.

In diesem Fall ist es wohl eher eine Frage, ob man die Einzelteile, aus denen dieses Bild (http://snape2.sn.funpic.de/HP!!!.jpg) komponiert wurde, nicht lieber erst über HTML und CSS zusammensetzen sollte. Die verlinkten Bilder im Filmstreifen (wahrscheinlich Thumbnails zu größeren Versionen) gehören nach meinem Dafürhalten eher in den Vordergrund

Wie wär’s denn, das Bild in den Hintergrund zu legen und alles andere wie gewünscht darauf zu positionieren?

Bei bestimmten Einzelteilen, wie z.B. den Zahnlöchern am Filmstreifen bietet sich hingegen eine Hintergrundkachelung an (auch um Traffic und Speicherplatz zu sparen), ebenso, wenn Natalie wünscht, dass sich das Layout dynamisch an alle möglichen Fenstergrößen und Bildschirmauflösungen anpasst. Das geht dann auch mit Einzelteilen am besten.

Gruß Gernot

[Gunnar Bittersmann]

Hi Gernot,

Ein Bild zu zerschneiden ist wohl nie eine gute Idee.

Hm, das bezog sich auf _ein_ Bild, nicht auf eine Collage aus mehreren …

In diesem Fall ist es wohl eher eine Frage, ob man die Einzelteile, aus denen dieses Bild (http://snape2.sn.funpic.de/HP!!!.jpg) komponiert wurde,

… Ich muss gestehen, ich hatte nicht reingeschaut. Es war ja auch keine Beispielseite verlinkt. (Und du solltest eigentlich wissen, wie’s geht. ;-))

nicht lieber erst über HTML und CSS zusammensetzen sollte.

Ja, klar.

Da hätten wir oben eine Überschrift, dann den Filmstreifen (Menü?), dann den Bereich mit dem Bild links und dem Textfeld rechts (was das Bild rechts unten im Hintergrund hat). Also:

<h1><img src="welcome.jpg" alt="Natalie Potter" /></h1>  
<ul>  
  <li><img src="filmstreifen1.jpg" alt="Punkt 1" /></li>  
  <li><img src="filmstreifen2.jpg" alt="Punkt 2" /></li>  
  <!-- ... -->  
</ul>  
<div>  
  <!-- Textfeld -->  
</div>

Und das Ganze mit CSS hübsch gemacht (Thumbnails nebeneinander, Bilder unten links/rechts …).

Gruß,
Gunnar

[Gernot Back]

Hallo Gunnar,

In diesem Fall ist es wohl eher eine Frage, ob man die Einzelteile, aus denen dieses Bild (http://snape2.sn.funpic.de/HP!!!.jpg) komponiert wurde,

… Ich muss gestehen, ich hatte nicht reingeschaut. Es war ja auch keine Beispielseite verlinkt. (Und du solltest eigentlich wissen, wie’s geht. ;-))

Kannst du es mir anhand von Natalies Funpic-Bild mal zeigen, wie die Verlinkung funktioniert?

Das ist der Grund, warum ich fast jeden Link in der Vorschau zuerst mal teste!

Gruß Gernot

[Gunnar Bittersmann]

Hi Gernot,

Kannst du es mir anhand von Natalies Funpic-Bild mal zeigen, wie die Verlinkung funktioniert?

[lіnk:http://snape2.sn.funpic.de/HP!!!.jpg] → http://snape2.sn.funpic.de/HP!!!.jpg

Wo ist das Problem? Ich würd allerdings auch keine "!" im Dateinamen verwenden.

Man könnte die "!" auch %-codieren: http://snape2.sn.funpic.de/HP!!!.jpg

Das ist der Grund, warum ich fast jeden Link in der Vorschau zuerst mal teste!

Sollte ich mir auch mal angewöhnen, so viel Fehler wie ich dabei mache … ;-)

Gruß,
Gunnar

[Ashura]

Hallo Gunnar.

[lіnk:http://snape2.sn.funpic.de/HP!!!.jpg]
http://snape2.sn.funpic.de/HP!!!.jpg

Habe ich Tomaten auf den Augen oder sehe ich hier wirklich _exakt_ die selbe Zeichenkette, von der aber nur eine von beiden verlinkt wird?

Gruß, Ashura

[Gernot Back]

Hallo Ashura,

[lіnk:http://snape2.sn.funpic.de/HP!!!.jpg]
http://snape2.sn.funpic.de/HP!!!.jpg

Habe ich Tomaten auf den Augen oder sehe ich hier wirklich _exakt_ die selbe Zeichenkette, von der aber nur eine von beiden verlinkt wird?

Nein, wahrscheinlich hat Gunnar irgendeine eckige Klammer aus dem Kyrillischen verwendet, aber das Bild von Natalie hat er trotzdem nicht verlinkt bekommen.

Gruß Gernot

[Ashura]

Hallo Gernot.

[lіnk:http://snape2.sn.funpic.de/HP!!!.jpg]
http://snape2.sn.funpic.de/HP!!!.jpg

Habe ich Tomaten auf den Augen oder sehe ich hier wirklich _exakt_ die selbe Zeichenkette, von der aber nur eine von beiden verlinkt wird?

Nein, wahrscheinlich hat Gunnar irgendeine eckige Klammer aus dem Kyrillischen verwendet, aber das Bild von Natalie hat er trotzdem nicht verlinkt bekommen.

Nein, auch wenn ich die Klammern manuell durch Eingabe der selben ersetze, wird die erste Zeichenkette nicht verlinkt.

Gruß, Ashura

[Gunnar Bittersmann]

Hi Gernot,

Habe ich Tomaten auf den Augen oder sehe ich hier wirklich _exakt_ die selbe Zeichenkette, von der aber nur eine von beiden verlinkt wird?

Nein, wahrscheinlich hat Gunnar irgendeine eckige Klammer aus dem Kyrillischen verwendet,

Nein. Es war das і U+0456. ;-)

aber das Bild von Natalie hat er trotzdem nicht verlinkt bekommen.

„Funzt“ bei mir sowhl im Firefox als auch im IE 6.0 (Windows XP).

Gruß,
Gunnar

[Gernot Back]

Hallo Gunnar,

aber das Bild von Natalie hat er trotzdem nicht verlinkt bekommen.

„Funzt“ bei mir sowhl im Firefox als auch im IE 6.0 (Windows XP).

Bei mir IE6 unter Win 98 erscheint stattdessen dieses Bild hier: http://404.funpic.de/linkextern.jpg

Gruß Gernot

[Orlando]

Hallo Gernot,

Bei mir IE6 unter Win 98 erscheint stattdessen dieses Bild hier: http://404.funpic.de/linkextern.jpg

Posaunst du etwa einen ungebetenen Referrer in die Welt hinaus?

Grüße
Roland

[Gernot Back]

Hallo Orlando,

Posaunst du etwa einen ungebetenen Referrer in die Welt hinaus?

Kann man das denn abstellen, etwa auch im IE? Wenn ja würde ich es wegen solcher Links wahrscheinlich jetzt erst recht nicht tun, denn ich bin hier ja sicherlich nicht der einzige Forumsteilnehmer, der nicht weiß wie er diese Einstellung vornimmt und bekäme dann noch nicht einmal mit, wenn mit dem Link etwas faul ist.

Gruß Gernot

[Jeena Paradies]

Hallo,

So weit ich das verstanden habe möchtest du so etwas wie im Artikel Night of the Image Map beschrieben wurde. Vielleicht hilft dir der Link ja ein wenig.

Grüße
Jeena Paradies