[Photoshop] Bild mit Text

[bastard8]

Hi leute,

ich bin nun seit gestern auf der suche nach nem Video von Youtube wo gezeigt wird wie man ein Bild mit einem Text verfassen kann
wo wenn ich mit der maus aufs bild gehe der Text erscheint.

Das ganze braue ich halt für Iweb wo ich grade ne Page für meine Band baue. Ich will das wenn man auf die Fotos von uns mit der Maus drauf geht der Name der person erscheint.

Hoffe ihr könnt mir weiter helfen.

Gruß Sascha

PS. Photoshop ist vorhanden für grafik Bearbeitung.

 

[Thaddäus]

Das Stichwort heisst: Animiertes .gif erstellen. Du musst also mehrere Bilder machen, und die dann zu einem animierten Gif zusammenbauen.

 

[commune10]

http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm Freeman

 

[gKar]

Imagemap, dabei Areas mit Attributen „nohref“ (kein Link) und den jeweiligen Namen als „title“ eintragen, z.B.:

<area shape="rect" coords="39,84,177,128" nohref alt="" title="Peter Pan">

 

[bastard8]

Ja das ist schon so die Richtung doch will ich ja nicht mehrere Bilder einfach nur ablaufen lassen das sollte ja so gedacht seien wenn ich mit dem Maus Zeiger auf das Bild halte das dann der Name der Person erscheint.

Gruß Sascha

 

[gKar]

Wenn Du mit dem männlichen Maus eine unbekannte Anzahl von Zeigern auf ein Bild hältst?
Ich schätze, Du meintest einen Mauszeiger.

Du bist nicht sonderlich präzise, wenn Du vom „Erscheinen“ von Text sprichst. Die ImageMap sorgt genau dafür, dass ein Webbrowser an der Cursorposition den Titel der unter dem Cursor liegenden Area als Tooltip (typischerweise schwarzer Text auf gelbem Grund) neben dem Mauscursor einblendet. Halt mal z.B. hier im Forum den Mauscursor über ein Symbol des Antworteditors, dann erscheint auch jeweils ein solcher Tooltip.

 

[das_micha]

ich vermute mal er meint sowas die das taggen von bildern bei facebook oder studi, wo gewisse bereiche des bildes verweißsensitiv sind und dann der name auftaucht.

wie das mit iweb umzusetzen ist weiß ich nicht. ich mache sowas z.b. mit transparenten divs die ich mittels absoluter positionierung auf dem bild plazieren. und bei mouse over ein javascript ausgelöst wird welches einen textcontainer an den mauszeiger heftet und den gewünschten inhalt anzeigt.

 

[gKar]

ich vermute mal er meint sowas [...] wo gewisse bereiche des bildes verweißsensitiv sind und dann der name auftaucht.

Ja, genau davon rede ich doch, nur dass eben kein Verweis (href) sondern das Attribut „nohref“ angegeben wird, so dass zwar ein Titel beim Hovern mit der Maus eingeblendet wird, aber ein Anklicken eben keinen neuen Request auslöst.
Ob iWeb ImageMaps selbst anlegen kann, weiß ich nicht. Von Hand erstelle ich die auch ungern, sondern greife dazu gerne auf den ImageMap-Editor von OpenOffice zurück und übernehme die generierten ImageMap-Tags dann in meinen HTML-Code (ggf. unter Nachbearbeitung).

 

[bastard8]

onmouseover javascript ist es nach was ich gesucht habe. Also was ich will weiß ich ja jetzt nur noch nicht wie ich es umsetze.

 

[das_micha]

Ja, genau davon rede ich doch, nur dass eben kein Verweis (href) sondern das Attribut „nohref“ angegeben wird, so dass zwar ein Titel beim Hovern mit der Maus eingeblendet wird, aber ein Anklicken eben keinen neuen Request auslöst.
Ob iWeb ImageMaps selbst anlegen kann, weiß ich nicht. Von Hand erstelle ich die auch ungern, sondern greife dazu gerne auf den ImageMap-Editor von OpenOffice zurück und übernehme die generierten ImageMap-Tags dann in meinen HTML-Code (ggf. unter Nachbearbeitung).

Ich würde an der stelle garkein a verwenden. Da es in meinen Augen ein usabilityfeature ist und nicht zwingen suchmaschinenrelevant, würde ich wie beschrieben nur ein DIV platzieren und mittels JavaScript das Event zuweisen. Ein request ist dafür auch nciht notwendig, ausser der ts will da nen roman anzeigen lassen Grade mit jquery ne Sache von wenigen Minuten. Einzig die Platzierung der Container kann ggf etwas Zeit Kosten.

 

[gKar]

Imagemaps (siehe auch obigen Link von commune 10, mit Live-Demo) sind kein „<a>“ und funktionieren ganz ohne JavaScript. Aber mit JS-Varianten ist man natürlich tendenziell flexibler, falls einem einfache Title-Tooltips nicht gut genug sind.
Andererseits würde ich Scriptinglösungen grundsätzlich nicht anwenden, so lange sie nicht nötig sind, sondern statische Seiten die Anforderungen erfüllen.

 

[commune10]

Danke!

 

[bastard8]

Kann mir das jetzt vielleicht noch jemand erklären. Habe ja ne menge Seiten gefunden wo was drüber steht aber man muss halt schon Vorkenntnisse haben die ich leider nicht habe.
Wäre cool wenn mir jemand schritt für schritt erklären könnte wie ich das machen muss.

Habe die zwei bilder auch schon vorbereitet. Eins mit Namen der Person und eins ohne

Gruß Sascha

 

[gKar]

Ob und ggf. wie man in iWeb (benutze ich nicht!) benutzerdefinierten HTML-Code einfügen kann, kann ich nicht sagen.
Wie der Code aussehen muss, steht ja schon hier: http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm
(Nur die Abweichung, dass statt href="..." einfach nohref geschrieben wird und alt="..." entfallen kann, wenn lediglich die Titel erscheinen sollen, aber nichts darunter verlinkt werden soll.)

Und wie gesagt: Wenn man die Koordinaten nicht selbst ermitteln und den Code von Hand schreiben will, kann man z.B. NeoOffice/OpenOffice/LibreOffice nehmen, ein neues Webdokument öffnen, dort das Bild einfügen und dann zu dem Bild den ImageMap-Editor aufrufen und die Rechtecke (oder anderen Formen) über das Bild malen, die man mit Titel und/oder Link ausstatten möchte. Den fertigen HTML-Code kann man dann aus dem so erzeugten HTML-Dokument auch in andere Webseiten kopieren.

 

[hokage]

Vielleicht ist das Thema für dich mittlerweile nicht mehr relevant, aber für diene Anforderungen brauchst du weder animierte .gifs, noch eine Image-Map, geschweige denn Javascript. Einfaches HTML in Kombination mit ein wenig CSS sollte da komplett ausreichen. Zumindest wenn ich dich richtig verstanden habe.

Der Nutzer geht mit der Maus auf ein Bild und daraufhin erscheint unter dem Bild ein Text, richtig?

Ich bin gerade zu faul dir alles im Einzelnen zu erklären, aber Stichworte zum googeln wären "css hover effect", "css display:none;" "css dropdown menü" (ist das gleiche prinzip --> Maus auf Überschrift und eine Reihe neuer Links tauchen auf.

Vorteile von HTML und CSS liegen auf der Hand. Es ist barrierefrei, semantisch korrekt und vor allem deutlich einfacher als Javascript oder eine Imaga-Map, wo man erst einmal mit den Koordinaten experimentieren muss und ohne Javascript auch nicht weiter kommt.

Zeige ein bisschen Engagement, erkundige dich im Netz und hast du Interesse, dann kann ich dir Verschiedenes auch ausführlicher erklären.

grüße hokage

*Edit: Mit Photoshop hat das ganze übrigens gar nichts zu tun, außer du hast eine grafische Frage, ein grafisches Problem Frage zu dem Bild an sich. Der Rest ist reines HTML und CSS.

 

[das_micha]

wieso aufwändig und koordinatenspielerei? wenn man nicht weiß wie man es selber macht, einfach ein simples tooltip plugin über jquery und schon ist es nur ne sache von ein paar minuten. gibt da mittlerweile genau so einfache lösungen wie einst bei ner lightbox.

Die hovergeschichte ist zwar auch ne schöne sache, wirkt allerdings oft nicht so "chic" wie mit anderen mitteln. Animierte gifs und imagemaps würde ich allerdings auch nciht nehmen.

hinsichtlich barrierefreiheit seh ich das etwas anders. zum einen ist es im endeffekt mit dem css-hover ebenso "anwendbar" zum anderen, kenntnisse in der sinnvollen umsetzung einer site vorausgesetzt und die verschiedenen szenarien beachtend (mit js ohne js) bin ich viel flexibler mit dem einsatz von JS. Da kann ich auf jedes szenario entsprechend reagieren. da bist du mit rein CSS im off bzw stark eingegrenzt.

Und die Zeiten in denen JS verpönt war, sind gott sei dank lange vorbei und grade hinsichtlich der usability mittlerweile in vielen bereichen nicht mehr wegzudenken.

 

[hokage]

Das sehe ich anders. In diesem speziellen Fall hat Javascript keinen für mich erkennbaren Vorteil, und was verstehst du unter "chic"? Irgendwelche animierten Hover-Effekte, so dass in seinem Beispiel der Text verblassend auftaucht? In meinen Augen ist das überflüssiger Firlefanz und das empfinde ich auch nicht als chic, aber das ist letztendlich Geschmackssache. Wer drauf steht muss dann eben Js oder Flash nutzen.

In Sachen Barrierefreiheit kann ich dir auch nur widersprechen. Js und Flash kann der Nutzer abschalten und da gibt es in Einzelfällen gute Gründe für und ich kenne durch andere Foren (z.B. html.de) genug Leute die beides abgeschaltet haben. Für solche Nutzer ist diese Funktion demnach nicht nutzbar.

Ich lenke in sofern ein, dass Js durchaus seine Daseinsberechtigung hat und man in manchen Fällen nicht drum rum kommt, aber in meinen Augen sollte man es nur verwenden, wenn es keine Alternative gibt, oder wenn ein Nutzer mit ausgeschaltetem Js keinen Nachteil hat (weil z.B. eine Ersatzlösung bereitgestellt wird.). Ist das der Fall bin ich größter Fan von Js!

Beim Thema Einfachheit kann ich dir allerdings ebenfalls nur widersprechen. Als Anfänger auf diesem Gebiet sieht Js-Code 1000* kryptischer und unverständlicher aus, als jeder HTML und CSS Code. Mit Sicherheit gibt es Anleitungen und mit Sicherheit gibt es Templates und Plugins die man übernehmen kann, aber ein wenig Anpassen muss auch da geschehen und allein das bereitet den meisten schon Schwierigkeiten.
CSS und HTML sind meiner Meinung nach eben von Grund her einfacher (keine Script, oder Programmiersprache) und somit ist der Zugang für Anfänger deutlich leichter.

grüße

 

[das_micha]

Gnaaa... Also mal ehrlich, du hast ja Recht das js für den Einsteiger komplexer wirkt. Aber nix für ungut, wer sich ein solches Ziel wie der ts setzt, der sollte schon die Motivation mitbringen sich in sowas einzuarbeiten. (Lieber ts, das war eine allgemeine Aussage über alle die eine webseite bauen wollen und keine Unterstellung an dich, also bitte nicht falsch verstehen.) mal davon ab ist eine brauchbare und optisch ansprechende css-seitige Umsetzung für den Laien nicht minder komplex.

Mit chic meine ich keine übertriebenen Effekte, sondern einfach eine angenehmere Darstellungsform. Z.b. Ein tooltip der sich am mousezeiger orientiert. Ist einfach bei größeren Bildern ergonomischer.
Letztendlich aber auch alles egal, wie du schon sagst: alles geschmackssache...
Aber eine Sache interessiert mich jetzt mal, wann und wo bist du der Meinung ist es sinnvoll js zu deaktivieren?
In der heutigen Zeit und der notwendigen Erfahrung der Entwickler gibt es außer purer Paranoia keinen Grund js zu deaktivieren. Selbst große unternehme die jahrelang auf ihren Systemen js deaktiviert hatten haben es wieder aktiviert.
wie du meinen Ausführungen entnommen haben solltest, gehe ich dennoch auf alle szenarien ein und erwähne sogar den Fall des deaktivierten js. Soll heissen, ich baue grundsätzlich so das alles ohne js läuft und Schraube am Ende das js drauf! Damit habe ich die meisten Sachen abgedeckelt...

 

[hokage]

Naja genau diese von dir angesprochene "Paranoia" ist allerdings das Hauptmanko von Js. Eine Sicherheitsdiskussion hier vom Zaun zu brechen halte ich für unnötig und dein Einwand, dass große Unternehmen mittlerweile wieder Js aktiviert haben, habe ich auch zur Kenntnis genommen. Nichtsdestotrotz liegt es im Ermessen des Browsers, ob Js sicher ist, oder nicht und Sicherheitslücken gibt es immer, nicht umsonst werden bei fast allen Browsern regelmäßig kleinere Updates rausgebracht.
Was ich sagen will ist Folgendes: Die Wahrscheinlichkeit sich über Js etwas einzufangen ist gering, ebenfalls gering ist aber auch die Wahrscheinlichkeit sich einen Virus anderswie einzufangen, vorausgesetzt man beachtet einige Regeln und Verhaltensweisen im Internet. Was Paranoia ist und was nicht mag ich nicht zu beurteilen. Mein Js ist immer an und ich mag es auch nicht missen. Fakt ist, dass es Menschen mit Sicherheitsbedenken gibt und je nach den persönlichen Erfahrungen können diese gerechtfertigt sein.

Allerdings hast du ja schon gesagt, dass dein Js nur das sog. i-Tüpfelchen der Seite ist und sie auch ohne Js funktionieren würde, wenn auch nicht so anschaulich, komfortabel, etc.. Damit hast du der Barrierefreiheit ja Genüge getan und alles ist in Ordnung. Wenn das jeder Webentwickler so machen würde, wäre ein großer Schritt in Richtung barrierefreies Web gemacht

 

[XSkater]

Den RollOver-Effekt kannst du auch mit HTML-Maps lösen, soweit ich dich verstanden habe.