** C H R I S K I Z Z M Y S U N » .. Kopf aus

Imagemap erstellen

Vorraussetzungen

Ihr müsst ImageReady besitzen.
Dieses Programm ist normalerweise immer
bei einer Version von Photoshop dabei,
wenn ihr kein PS besitzt, googelt nach einer
Testversion von ImageReady oder Photoshop :}

Zuallererst solltet ihr erstmal wissen, was überhaupt eine Image Map ist.
Sie sind so etwas, wie Bilderlinks, man kann also in einem beliebigen Bild bestimmen, wo ein Link sein soll und eine noch so winzige Stelle in einer Grafik verlinken.

Als erstes müsst ihr nun erstmal euer ImageReady öffnen.
Sofern das imagemappen bei euch noch nicht aktiviert ist, müsst ihr das noch tun. Dafür geht ihr bei dem Menü auf Window (Fenster) und macht ein Häkchen bei Image Map. (Screenshoot)
Jetzt könnt ihr beginnen. Geht auf File (Datei) - Open (öffnen) und sucht eure Layout Grafik heraus (ich habe an dieser Stelle ein Beispiel Bild genommen klick)
Wählt das ImageMap Werkzeug in der Leiste aus (Screenshoot) und zieht mit der linken Maustaste (gedrückt lassen, bis ihr den gewünschten Kasten habt) einen Kasten, um den zu verlinkenden Bildbereich.
Ich wollte an dieser Stelle das de.be verlinken, also ziehe ich einen Kasten um diesen Text (Screenshoot).
Falls ihr zu früh losgelassen habt, der Kasten doch an der falschen Stelle ist, oder ihr ihn größer/kleiner haben wollt, könnt ihr ihn ganz einfach größer ziehen (an den Ecken die Pfeile ziehn ^.~) oder verschieben (gedrückte linke Maustaste und zur Stelle ziehn).
Wenn ihr zufrieden seid, schaut ihr euch den kleinen Kasten unten in eurem Programm an (Screenshoot), dort könnt ihr nun die URL eintragen, wohin die Verlinkung des Kastens führen soll. Es ist eigentlich egal, was ihr dort eintragt, falls ihr es noch nicht genau wisst, die Url kann man im nachhinein im Code verändern. Bei Target müsst ihr euch entscheiden, wie der Link geöffnet werden soll. Zum Beispiel in einem neuen Fenster (_blank), auch das kann man zur Not im Code noch verändern. Wichtig ist bloß, dass ihr die Felder ausfüllt ^.^ Bei Alt könnt ihr noch einen kurzen Satz reinschreiben, welcher beim Mouseover gezeigt werden soll. Müsst ihr aber nicht.
Wenn ihr die Felder Url, Target und eventuell Alt ausgefüllt habt, könnt ihr, wenn ihr möchtet, noch weitere Kästen erstellen, genauso, wie vorher schon beschrieben. Das sehe dann so aus (Screenshoot), wenn ich den Schriftzug chriskizzmysun noch verlinken möchte. Der Türkisfarbene ist der Kasten, den ich grad schon gemacht habe und der rote, den ich grad gezogen habe. Keine Angst, diese Kästen sieht man am Ende nicht ^.~ Ihr seid fertig mit den Kästen und Verlinkungen? Dann geht auf den kleinen Internet Button in der Menüleiste (Screenshoot).
Ihr seht jetzt die Ansicht im Browser, zuerst seht ihr euer Bild, was ihr grade bearbeitet habt. Wenn ihr mal mit der Maus über das Bild fahrt, wo ihr eure Kästen hingesetzt habt, seht ihr, dass diese Stellen nun verlinkt sind. Scrollt runter, bis ein Kasten mit einem Code kommt. (Screenshoot). Alles was ich pink eingerahmt habe, ist für euch jetzt wichtig.
Diesen Code müsst ihr in in eueren Layoutcode einfügen, ersetzt diesen Code in eurem Layout (kann varieren, je nachdem wir ihr gecodet habt)

durch den, den ihr im ImageReady Browser bekommen habt, bis hin zum letzten Zeichen des in meinem Screenshoot eingerahmten Bereichs. Vergesst nur nicht, statt z.B. images/EuerbearbeitesBild die Url zu eurem Layout einzufügen, da man sonst nichts auf der Hp sehen würde.
Mein Code würde nun so aussehn:

Achtet darauf, dass ihr wirklich ALLES genaustens aus eurem Code einfügt, den ihr in der Browser Vorschau gesehn habt. Sonst funktioniert nämlich nichts.
Vielleicht konnte ich euch ja so etwas helfen, wenn noch etwas unklar ist, dann gerne im Askme oder Gästebuch melden :}

(Copyright by Chriskizzmysun, kopieren ist strikt untersagt!)

Welcome here

× View with IE • Firefox ×
Willkommen auf meinem Blog, auf dem ich über meinen Alltag & alles was mich bewegt blogge. Viele verschiedene Themen, wie es mir grad in den Sinn kommt. Über Feedback freue ich mich & bei Gefallen, verfolgt meinen Blog mithilfe verschiedener Funktionen. Have Fun!