Sehr wichtig - für meine entstehende Homepage

[sokolski.star]

Ich habe einen Hintergrund (nicht für die ganze Seite, sondern nur für die Mitte der Startseite), darauf sollen dann einige Wörter stehen (z.B. Über mich/ Gästebuch /Inhalt etc.), die zu einer jeweiligen Rubrik auf der Seite weiterführen. Macht man mouseover bei diesen Wörtern, sollten sie so animiert werden wie die Kategorienamen im linken Frame bei kf.

Mein Problem: Ich habe bisher nur den Hintergrund und ich weiß, welche Wörter angebracht werden müssen, allerdings weiß ich nicht, wie die Wörter jetzt transparent auf den Hintergrund kommen, welches Programm ich dafür benötige, wie die Wörter animiert und verlinkt werden. Das einzige, was ich zur Hand habe, ist ein guter WYSIWYG-Editor und Mapedit (damit erstellt man Usemaps). Kann mir jemand helfen? - Bewerten ...

Beispiel dazu:
http://home.arcor.de/orang82110/Wasserlilien.JPG So sollte es NICHT sein.

Das Lilienbild stellt den Hintergrund dar.
Die ganzen Wörter, die ich da reingemacht habe, sollen die animierten Links darstellen.

Probleme bei diesem Bild:

• Der Hintergrund soll transparent sein, also quasi "Wort auf Lilien" und nicht "Wort auf Weiß"
• Beim Mouseover soll das angezeigte Wort animiert werden. (wie auf kf).

(Dieses Bild habe ich kurzerhand mit mspaint erstellt.)

[FrankaD]

ganz einfach:

du nimmst das bild als hintergrund und setzt die links per css drüber - fertsch.

an den bewerter: wieso gibts eigentlich bei der frage schon eine bewertung von 1 mal nicht hilfreich? fragen wird ja noch erlaubt sein.

F.

[Dennis]

Hi sokolski.star,

Das Lilienbild stellt den Hintergrund dar.
Die ganzen Wörter, die ich da reingemacht habe, sollen die animierten Links darstellen.

Was stellst du dir unter "animierten" Links vor?

Probleme bei diesem Bild:

• Der Hintergrund soll transparent sein, also quasi "Wort auf Lilien" und nicht "Wort auf Weiß"
• Beim Mouseover soll das angezeigte Wort animiert werden. (wie auf kf).

Es gibt zwei Möglichkeiten dein Problem zu lösen:

1. Du nimmst ein Bildbearbeitungsprogramm (dazu gehört nicht Paint ;-), welches dir das automatisch so macht, dass du da das Bild als Hintergrund und kein Weiß als Hintergrund hast. Dann legst du wie gewollt ein Map darüber - lediglich das mit dem Animiert (ich gehe jetzt einfach mal von einer Schriftfarbenänderung oder so aus) wird dann etwas schwieriger, da musst du dann nämlich mehrere Grafiken machen - und das brauch beim User wieder Zeit zum Laden.

2. Du positionierst mit CSS die Elemente über das Bild, dann sollte eigentlich der Hintergrund auch mit durchscheinen. Da könntest du auch leicht die Schriftfarbe beim drüberfahren ändern lassen, ohne dass es beim User ewig lang laden muss.

MfG, Dennis.

PS: Gewöhn dir bitte an, deinen Postings einen aussagekräftigen Titel zu geben, da es dann leichter fällt, dir zu helfen.

[Thorsten F.]

Für so etwas benutze ich den GIMP.

Klein aber oho!

Damit kannste wunderbar arbeiten und innerhalb von ein paar Mausklicks hate ein transparantes Bild, also nur die Schrift.

Für Mouseover und sowas guckste dir mal JS an. Oder google einfach danach. Da solltest du schon allerlei finden mit Erklärung usw.

Stichwort: onMouseOver

[Chräcker Heller]

Hallo,

oh je, Du hast Dihc hier in einem Verein von Selbermachern verirrt. Das bedeutet im konkretem Fal: wir benutzen für solche Aufgaben kein "es macht alles fertig" Programm, sondern würden so etwas Stück für Stück selber erstellen.

Mein Angang wäre dabei folgender: Du brauchst erst einmal das Bild ohne Links darauf, das immer in der Mitte des Bildschirmes stehen soll. Dazu würde ich das Bild in ein div-paar setzen und selbiges per css-Anweisungen mitten. Wenn man dieses Div-Paar die Position "relative" gibt, kann man innerhalb des Divpaares weitere Elemente (wie Bilder der Links) gut "absolute" ausrichten.

Hier habe ich Dich sicherlich schon verloren, oder? Stöber mal in selfhtml nach und verzichte bei den ersten Tests erst mal auf das "mitte-mitte"-Problem....)

_

Seis drum. Zweiter Angangsschritt. Die Linktitel würde ich, wo ich eh schon mit Grafiken arbeite, in einem Malprogramm auf die Llien malen. Dabei kann man sehr schön "dickere" Buchstaben malen die dann leicht transparent sind und einen leichten Schatten bekommen. Selbige schneidet dann man aus und speichert die als Gif(!) ab. Um sie jetzt an die richtige Stelle zu bekommen, kann man sie wieder per css (top und left), jetzt aber eben "absolut", innerhalb des oben genannten div Tags positionieren.

Dadrauf legt man dann einen handlesüblichen Mouseover (siehe wieder selfhtml), der das Bild beim überfahren gegen eine endlos laufende gif-Animation Deiner Wahl austauscht.

Chräcker

[Gerhard Grünholz]

Hi Sokloksi
1. besorg dir ein gescheites Graphikprogramm
z.B Photoshop, die Elemnts Version ist billig oder sogar kostenlos
2. Vorgehen in Photoshop:
2.1 Datei "Neu"
2.2 Größe in Pixel festlegen, Modus=RGB Farbe, Hintergrund transparent
2.3 Mit dem Textwekzeug auf das Bild schreiben
2.4. auf den Haken klicken, der die Bearbeitung bestätigt
2.5 Datei "Fürs Web speichern"
so erstellst du nacheinander alle Schriften.
Die Schriften positionierst du mit CSS
3.Nicht ganz klar ist mir, was du unter animiert verstehst
schau mal nach in slefhtml / javascript / Anendungsbeispiele
Dynamische Buttons
4. Schriften verlinken
z.b. mit
<a href=verweisziel.html><IMG SRC=bildverzeichnis/bild.gif width="x" height="y" alt="falls nix angezeigt wird"></a><br>
Grüße Gerhard