Vollständige Version anzeigen : Web-Design Bilder verlinken
Hey Alle
Ich bin neu hier, hoffe dass das Thema in der richtigen Rubrik ist, ansonsten bitte ich um Entschuldigung.
Also jetzt zu meinem Problem:
Ich habe ein Bild, es ist z.B ein Mensch drauf und ein Text der lautet: Forum. Jetzt möchte ich NUR den Text (Forum) verlinken, damit man eben in ein Forum kommt. Sprich, wenn man mit dem Cursor über das ganz Bild fährt und auf den Text (Forum) draufkommt, kann man den anklicken und der Link wird aktiviert --> man kommt auf die Forum-Seite
Kann man das mit Photoshop Elements9 überhaupt, braucht es (noch) ein anderes Programm?
Am besten wäre ein Beispiel, mit einfacher Erklärung.=)
Vielen Dank im voraus!
kevbo24
Hi kevbo, willkommen im Photoshop-Cafe!
Hm...:fragen: .... hab ich das richtig verstanden: Das Wort "Forum" soll auf dem Bild drauf stehen, ja? Dann musst du das ganze Bild verlinken. Dann kommt man zum entsprechenden Forum, sobald man mit dem Cursor das Bild berührt und dann drauf klickt.
Oder soll nur der Text, der in diesem Fall neben oder unter einem Bild stehen muss, verlinkt werden?
Soll das in einem Beitrag oder einer Signatur in einem Forum sein? Dann machst du das in beiden Fällen mit BB-Code. Weißt du, was das ist?
Ein Photoshop-Problem ist das allerdings nicht.... aber schauen wir trotzdem mal, ob wir das gelöst bekommen... :cool:
Hallo!
Photoshop und PhotoshopElements sind Bildbearbeitungsprogramme!
Das, was du vorhast, ist Web-Publishing...
Dazu böte sich z.B. "Dreamweaver" o.ä. an. (Stichworte: Hyperlink, Mouseover, Mouseclick, ...)
will dir nicht wiedersprechen, jenny, aber in photoshop würde man das machen können. slicen eben und dann die url angeben. wie das jetzt bei cs5
geht, weiss ich nicht. früher ging das über image ready sehr gut
@ Die Bunte
Ja es ist ein grosses Bild indem auch Ein Text ist der lautet Forum, ich möchte aber nicht das ganze Bild verlinken, sondern nur ein Teil und zwar eben nur dort wo der Text ist, daher meine Frage ob das Photoshop Elements 9 kann?
@ Jenny aha ok Danke vielmals, kann man sich das im Internet herunterladen oder muss man das kaufen, um diese Möglichkeiten auch zu haben?
@Sinux Also ich habe Photoshop Elements 9, und ich habe noch nirgends so ein "slicen" gefunden
kevbo24
mit dem slicen hab ich eigendlich jenny angesprochen.
ich kenn mich mit elements nicht aus. da es aber eine abgespeckte version von
photoshop ist, wird es das slicen nicht haben.
Hi kevbo24,
kannst Du "Forum" auch einfach über dasBild schreiben?
Dann könntest Du Dein Bild als Hintergrund definieren und dann das Wort Forum einfach als Link drüber setzen.
Ansonsten gibt es noch die Möglichkeit, einen bestimmten Bereich eines Bildes mit einem Link zu versehen. Leider weiß ich nicht mehr genau wie das ging und mit PSE kenne ich mich nicht aus. Hier unter selfhtml habe ich was gefunden, was ungefähr zu Deiner Idee passt. Allerdings musst Du die Koordiaten ermitteln ;)
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren
Hoffe das hilft Dir,
willkommen im :psc1:
Gruß
Heike
Sry dass ich mich erst jetzt wieder melde, war in den letzten Tagen ans RL gebunden und konnte daher nicht vorbeigucken.
@Sinux ja das ist wohl so, ich habe das "slicen" aufjedenfall nicht gefunden. Trotzdem Danke für die Hilfe.
@Heikehk Genau diese Seite hatte ich auch schonmal vor mir, ich habe dass dann auch versucht so zu machen einfach mit diesen Angaben die ich haben möchte, nur das Problem ist, ich weiss nicht ob die Koords wirklich stimmen. Ich habe die mit paint ermittelt, da ich nicht weiss welches Programm sich sonst dafür eignet, das kostenlos wäre=)
Das grösste Problem ist aber:
Wie kann ich dieses Geschreibsel dann auch mit meinem Bild "verbinden". Muss ich das in Photoshop selber machen oder braucht es da wieder eine extra Software? oder geht es völlig anders?
Im Anhang ist es so wie ich es mal gemacht habe bis auf die Koordinaten sollte alles stimmen.
kevbo24
dorftrottel
17.08.11, 19:43
Hallo
Genau für dein Vorhaben gibt es das Online-Tool Image Maps (http://www.image-maps.com/). Du wählst dein Bild entweder lokal oder aus dem Internet und lädst es hoch. Danach stehen dir Funktionen zur Verfügung. Wenn du ein wenig Englisch kannst, ist das kein Problem für dich. :)
Natürlich kannst du es auch selbst machen, dafür benötigst du irgendein HTML-Programm wie NVU (kostenlos) oder Adobe Dreamweaver (kostenpflichtig) um den HTML-Text mit dem Bild zu "vereinen". In Photoshop CS4 (zumindest), wird diese HTML-Datei selbständig erstellt.
@ Dorftrottel
Ok Danke werde das mal ausprobieren mit dem Englisch=)
Was ist denn der Unterschied zu dem Image-Map und dem selber machen wie NVU? Bei dem Image-Map wird das nicht selber gemacht, kann man da also keine koordinaten und so eingeben sondern nur ein ganzes Bild verlinken? Oder wo liegt der Unterschied zwischen Image-Map und NVU/Dreamweaver?
kevbo24
dorftrottel
18.08.11, 20:31
Nein, bei Image-Map hast du zwei verschiedene "Werkzeuge". Ein Viereck und eines mit welchem du selbst eine Form erstellen kannst.
1. Lade dein Bild hoch
2. Folge den Schritten bis du im "Editor" bist.
3. Wähle rechts "Rectangle" (=Viereckiges-Werkzeug) oder Custom Shape (=Eigene Form).
4. Ziehe mit dem Rectangle-Werkzeug ein Viereck auf, dort wo innerhalb dieses Vierecks wird später alles verlinkt sein. Es ist das selbe, wie wenn du die Koordinaten selbst bestimmst, nur kannst du es hier grafisch machen und musst die Koordinaten nicht auslesen. Mit dem Custom-Shape-Werkzeug kannst du mit Hilfe von Punkten auch Formen erzeugen.
5. Jeweils beim Textfeld "Link for this map" deinen gewünschten Link einfügen. Wichtig: Immer "http://" vor deinen Link setzen.
6. Wähle "Save" um deinen Link zu bestätigen bzw. zu speichern.
7. Hast du alle Links gesetzt, kannst du rechts auf "Get your Code" klicken.
8. Eine neue Seite wird geladen und oben hast du verschiedene Register wie "HTML Output" etc. Wähle z.B. HTML-Output um zu sehen, wie was später verlinkt wird, bzw. wie es später wirklich aussieht. Bei HTML-Code findest du den Code (und die Koordinaten, die du sonst selber hättest eingeben müssen), den du nun auf deine Webseite oder wo du ihn auch immer haben möchtest laden.
Beachten musst du nur noch, dass die Bilder bei einem Hoster hinterlegt sein müssen, da image-maps die Bilder nur 24 Stunden speichert, deshalb musst du die Codes selbständig anpassen oder oben bei photobucket das Bild runterladen.
Wenn du mit selfhtml auch zum Ergebnis kommst und es dir dort einfacher fällt, mach's dort! ;)
OK Danke ich werde das mal ausprobieren und gebe Bescheid wenn es geklappt hat oder nicht=)
Danke vielmals!!!
kevbo24
Ein anderes Problem ist aufgetaucht=) Dort wo ich das gerne machen will gehen nur BB-Codes und kei HTML.
Ist es möglich einen html-Code zu einem BB-Code umzuwandeln?
Wenn ja wie geht sowas?
Sonst hat es ganz gut geklappt bei Image-Map.
kevbo24
Wo genau machst Du das denn?
Das hängt ja sehr vom System ab...
Wie wo ich das mache? Das sollte eigentlich bei einem Game aufgeschaltet werden.
kevbo24
WEnn Du da BBCodes eingeben kannst, dann muss es dazu auch eine Beschreibung geben, wie Du das machen musst.
Eine allgemein gültige Lösung für BBCodes gibt es meines Wissen nicht.
Gruß
Heike
Ist es möglich einen html-Code zu einem BB-Code umzuwandeln?
Wenn ja wie geht sowas?
Hallo kevbo, poste doch mal den html-Code, damit man sich den mal angucken kann...
Das wäre der HTML-Code:
<div style="text-align:center; width:600px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201108230741077" src="http://www.image-maps.com/uploaded_files/4201108230741077_1_WD-Profil-vor%C3%BCbergehend.jpg" usemap="#Image-Maps_4201108230741077" border="0" width="600" height="1895" alt="" />
<map id="_Image-Maps_4201108230741077" name="Image-Maps_4201108230741077">
<area shape="rect" coords="94,1331,508,1358" href="http://wolfsdragoner.forumieren.com/" alt="" title="" />
<area shape="rect" coords="598,1893,600,1895" href="http://www.image-maps.com/index.php?aff=mapped_users_4201108230741077" alt="Image Map" title="Image Map" />
</map>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:600px;">
<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://wolfsdragoner.forumieren.com/" title="Untitled">Untitled</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_4201108230741077" title="Image Map">Image Map</a>
</div>
<!-- Image map text links - End - -->
</div>
@ heikehk Das ist das einzige was ich gefunden habe:
Textgröße
[size=24] Großer Text [/size-] Das "-" gehört nicht dazu, hab ich nur reingemacht damit der BB-Code nicht aktiviert wird.=)
kevbo24
Das wäre der HTML-Code:
...
Bin zwar ganz fit, was BB-Code anbelangt, aber nicht beim Thema html, da hab ich bisher nur reingeschnuppert.
Den einen oder anderen html-Code hätte ich dir nach BBC "übersetzen" können, aber diesen da nicht.... ist mir zu kompliziert. Möglicherweise geht es in diesem Fall auch gar nicht. Sorry.
Ok Danke Dir trotzdem. Ja ich denke hier ist ja vorallem das Problem, dass man eine Verlinkung drin hat, darum vermute ich kann man das gar nicht in einen BB-Code umwandeln.
kevbo24
Habs mal in den Bereich Webpublishing verschoben, vielleicht findet sich ja hier jemand, der Dir helfen kann.
Gruß
Heike
also prinzipiell erstmal zum slicen: http://www.youtube.com/watch?v=wLkTscYTxWA (relativ gutes Tutorial)
ist ja im Prinzip nix anderes, als ein Bild in mehrere Teilbilder zu unterteilen und separat abzuspeichern, der rest ist nur das zusammenbasteln der Teilbilder mittels HTML-Code über Tabellen bzw. Divs.
zum Thema BB-Code:
So richtig habe ich nicht verstanden wo und wie du das genau anwenden willst.
Wenn du das auf ner eigenen Seite machen möchtest, kannst du natürlich einen BB-Code schreiben, welcher die in einem Bild einen bestimmten Bereich anklickbar macht (mittels Imagemaps z.B.) aber dafür bedarf es schon ein wenig Kenntnisse von html und regexp...
1. Option: Google probieren "bb-code imagemap" zum beispiel
2. Option: Wenn du dat lernen und selbst machen willst: http://de.selfhtml.org/
3. Option: entweder auf jemanden warten bzw. jemanden kennen der die Muße hat das aus Spass zu schreiben oder jemanden bezahlen.
Vorhandene Software bzw. Scripts bieten einen bestimmten Satz von BB-Codes an, womit du aber höchstwahrscheinlich scheitern wirst, da diese sich auf Links, simples einbinden von Grafiken und Textformatierung beschränken (so wie auch in diesem Forum).
@ heikehk Danke!
@ brehn Ich habe Imagmaps schon ausprobiert und das hat auch alles funktioniert. Ich habe einen html-Code (wie gezeigt) und die Verlinkung klappt auch.
Das Problem:
Ich möchte das als Profilbild bei einem Game einsetzen, nur da sind html-Codes nicht zugelassen sondern nur BB-Codes.
Mit BB-Codes kenne ich mich ein ganz wenig aus. Ich habe das html-Bild auch schon hochgeladen als Profilbild mit BB-Codes. Nur die Verlinkung ist nicht aktiv, d.h. ich kann über das Bild "fahren" oder auf den (eigentlich) verlinkten Bereich klicken, es geschieht nichts (wird auch nicht angezeigt, dass man dort klicken kann)
Ich brauche also einen BB-Code der das Bild zeigt wo die Verlinkung aktiv ist, hab ich nur leider noch nirgends gefunden und ich weiss auch gar nicht ob so etwas möglich ist.
kevbo24
zusammenbasteln der Teilbilder .... über Tabellen...
Interessanter Gedanke. Bilder(teile) in (BB-)Tabellencodes einzubinden, auf die Idee bin ich echt noch nicht gekommen. Damit muss ich direkt mal experimentieren... allerdings nicht in den nächsten drei Wochen, hab gerade ein Zeitproblem.
Hier im PSC-Cafe könnte man es, falls es funktioniert, allerdings nicht vorführen, da hier die BB-Codes für Tabellen nicht funktionieren, warum auch immer... :nixweiss:
Hat mich gereizt, das "Problem" und ich hab doch mal einen schnellen Test gemacht.
Das Einbinden in Tabellencodes hat dazu geführt, dass zwischen den einzelnen Bildelementen Abstände waren - das eignet sich also nicht.
Aber so kompliziert braucht man's gar nicht zu machen.
Schau dir mal bitte das hier an und fahr mal das Bild mit dem Cursor ab....
http://250kb.de/u/110830/j/7XVsaKYe4ljw.jpghttp://250kb.de/u/110830/j/hB6yzZaZjYFA.jpghttp://250kb.de/u/110830/j/3jOQ5Re4Rx6Y.jpg
http://250kb.de/u/110830/j/NfyLGWyCbVYi.jpghttp://250kb.de/u/110830/j/W95pzSDO82s1.jpg (http://www.photoshop-cafe.de/forum/index.php)http://250kb.de/u/110830/j/GUrw0s35deFI.jpg
http://250kb.de/u/110830/j/Yuja2dbKKPGO.jpghttp://250kb.de/u/110830/j/fpeJTRJwBlNb.jpghttp://250kb.de/u/110830/j/m8XcO9Twycb7.jpg
Kommt das dem nahe, was du brauchst?
Jedes der farbigen Rechtecke ist ein separates Bild, das mittlere ist verlinkt.
Ja Danke, das wäre sicher nicht übel, aber ich brauche das mit BB-Codes=) Heisst also ich brauche einen BB-Code, wo nachher immer noch dieses Bild (klick) funzt.
2tens wie kann ich ein Bild mache, das so nahe zusammen ist, dass man den Eindruck hat es sei nicht zerschnitten, auch mit BB-Codes nicht vergessen. xD
Edit: Ich habe es gerade nochmals ausprobiert mit BB-Codes, da wo ich es brauche, es geht nicht. Das Bild wird zwar angezeigt, aber man kann noch so viel darüberfahren und anklicken, es geschieht nichts. =)
kevbo24
Hallo kevbo, am besten wäre es, wenn du meine oben stehende Antwort zitierst, dann siehst du die BB-Codes so, wie ich sie erfasst habe und wie sie funktionieren. Ich kann sie dir hier direkt im Text nicht sichtbar machen, da die entsprechenden Befehle (code oder nobbc) nicht funzen.:nixweiss:
Meine neun Bilder waren alle gleich breit und gleich hoch. Dann hab ich sie - ohne Blank und ohne Leerzeilen dazwischen - mit dem img-Code eingebunden (alle neun separat). Deshalb wirkt das wie ein einziges Bild. Das mittlere Bild wurde zusätzlich verlinkt.
Ich mach mal einen Screenshot der Codes und kennzeichne alles farblich. Jedes Bild hab ich andersfarbig markiert, das mit dem Link drin ist rot.
-----------
https://www.photoshop-cafe.de/bildupload/pics/sonst/thumb/1314816044_Codes PSC.jpg (https://www.photoshop-cafe.de/bildupload/pics/sonst/1314816044_Codes PSC.jpg)
-----------
Das Bild mit der Verlinkung ist folgendermaßen aufgebaut:
[*url=hier den Link zur Site einfügen][*img]hier den Link zum Bild einfügen[/img][/url]
Die Sternchen gehören nicht rein, ich musste sie aber erfassen, damit die BB-Codes nicht ausgeführt werden!
Hilft dir das weiter?
Zu dem Thema, dass die Verlinkung eines Bildes auf deiner Site nicht klappt.... nun, mach mal die Probe. Verlinke hier im nächsten Beitrag oder in einer PN an mich irgendein einfaches Bild: Es muss ein anklickbares Bild her, das funktioniert. Und genau die Codes fügst du dann auf deiner Site zum Test ein. Wenn das dann nicht klappt, dann funzt der url-Befehl dort vielleicht nicht.... hier im PSC gehen ja auch nicht alle Befehle, die ich kenne. Wenn das so ist, müsstest du mal einen der dortigen Techniker danach fragen...
Hoffentlich hab ich das einigermaßen verständlich rüber gebracht? Wenn du noch Fragen hast, nur zu....
OK Danke vielmals. Ich versuche in den nächsten Tagen auch sowas ähnliches zu machen=)
Cool wäre wenn du mir das ganze mal schicken könntest, damit ich das kopieren und dort einfügen kann, wo ich es brauche.
So kann ich gucken ob es vom Prinzip her klappt und vorallem ob die Bilder dann auch so nebeneinander angezeigt werden und nicht untereinander oder so, obwohl das bei mir keine Rolle spielen würde.
Danke für deine Mühe!!!
Ich melde mich sobald ich das mit meinem Bild so hinbekomme wie du, stelle ees dann hier rein und du kannst das mal begutachten=)
kevbo24
Du musst Antwort Nr 25 zitieren, dann kannst du dir die Codes raus kopieren - außer, du hast den erweiterten Editor - WYSIWYG - eingestellt. Dann siehst du nicht die Codes, sondern auch die farbigen Bildteile.
Ich schreib dir gleich noch eine Private Nachricht....
Noch ein Tipp: Wenn du übst sowas zu erstellen, beginne nicht gleich mit einem neunteiligen Bild, versuch's erst mal mit einem dreiteiligen, wobei du den mittleren Teil verlinkst.
Bin gespannt auf deine Bilder. :)
http://img4.fotos-hochladen.net/uploads/wdbprofilver4eb1268ayv.jpg
http://www.fotos-hochladen.net/uploads/wdbprofilver53mcngelux.jpg (http://www.photoshop-cafe.de/forum/index.php)
http://www.fotos-hochladen.net/uploads/wdbprofilvernu4xwaoe8g.jpg
Das ist das Bild, das verlinkt sein soll, es hat hier geklappt. UND es hat auch bei dem Spiel geklappt wo ich es brauche. Ich DANKE DIR viel-, viel-, viel-, vielmals!!!!!!
Echt SUPER, Danke!
Es hat geklappt? Wunderbar! :clap: Das freut mich! :ok:
Und ich hab auch dazu gelernt. Ohne dich und brehn, der mir - vermutlich ungewollt - mit dem Stichwort "Tabelle" einen (Denkan)Stoß in die richtige Richtung gegeben hat, wäre ich so schnell nicht auf die Idee gekommen, ein Bild zu erstellen, in dem nur ein Teil aus einem anklickbaren Link besteht. Das kann ich gewiss selbst einmal brauchen. :) Man nennt das wohl win-win-Situation. :emo_biggr
Jap so siehts aus=) Aufjedenfall nochmals Danke für die Hilfe!
kevbo24
vBulletin® v3.8.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd.