Glubschipupschi O.O Designer & Designpage Designpage

Site

Alle lesen! Start Book Contact

Photoshop

Schrift & Brusheffekte Feathern Runde Ecken Imagemap Pixeln Dreameffekt Blenden Colorieren

Photo Impact 10

Umfaerben

HTML

Imagemap Mehr folgt sehr bald ^-^

Other

Desktopbild Cursor

Benutzerkonten XP

Grundsätzliches Bild Passwort Pw. löschen Kontoart ändern Namen ändern Neues Konto

Imagemap

Imagemap?

Das ist ein Bildlink. Also ein verlinktes Bild, dass dich zu einer anderen Seite führen kann, wenn man darauf klickt. Diesmal ist dieses Tut in 2 Teile unterteilt. In Imagemap 1 & in Imagemap 2. Nähres speziell bei den Tuts ;D

Imagemap I

Imagemap I?

Hier wird dir erklärt, wie du ein Imagemap Layout codest. Das ist total easy.
Allerdings werden dir 2 Versionen erklärt. Nämlich die von einem Endlesslayoutcode zu einem Imagemap und die eines normalen Layouts in ein Imagemap

(Denkt dran ich helfe gern! Es würde auch nicht schaden, sich auch den Imagemap II Tut durchzulesen)

Wie geht das?

-Du nimmst einen Standartcode von Dir oder jemanden der dir erlaubt hat ihn zu benutzen und ersetzt nun einen bestimmten Teil durch den Code des Imagemaps (noch liest du zunächst mal weiter!).

-Nun ersetzt du den Teil, indem du die URL deines Hintergrundes einsetzt. Der Teil, mit der Url deines Bildes sieht so aus (für gewöhnlich), wie auf dieser Seite erklärt: (Der Tut geht auf der Seite weiter!) Imagemap I Tutfortsetzung

 

Imagemap II

ImagemapII ?

So, dies ist der 2. Teil des Tut's. Den Tut Imagemap gibt es auch in der Kategorie Photshop, dieser steckt jedoch in der Kategorie HTML. Das heißt : Hier wird dir erklärt, wie du ein Imagemap auf deinem Blog installierst. In dem Tut Imagemap II (wo du gerade bist^^), werde ich dir nun erklären, wie du ein Imagemap Layout, dass auf den beiden Seiten angeboten wird, benutzt.

Das Wesentliche

-Ein Beispiel, wie ein Imagemap am Ende aussieht. Klickt auf den Mund (ihr könntet natürlich auch ein Wort imagemappen/verlinken) ^-^ Beispiel_für_Imagemapping

- Dazu erstmal das wesentliche: Ein Imagemaplayout wird genauso gecodet wie ein "normales", jedoch ersetzt man das Bild durch den Code des Imagemap. Der beginnt immer so:

Dazwischen wird dann in einem Code die EndURL angegeben, der ALT Text und sonstige wichtige Angaben für den Code.

Was ist überhaupt die End URL?

Das ist die Adresse der Seite, die verlinkt werden soll. Bei meinem Beispiel (s. oben!) ist meine Hompage verlinkt, würdest du z.B. deine verlinken wollen, müsstest du die URL durch deine ersetzen (dazu später). Bei Layouts mache ich es z.B. so, dass ich "Diary" auf mein Bild schreibe, ein Imagemap daraus mache und meine Startseite (also da wo man täglich -oder öfter- bloggen kann, verlinke ich dann. Das ist dann also meine End URL. Natürlich kann man auch beliebig viele Imagemaps einfügen, dadurch muss man natürlich für jedes Imagemap eine extra URL angeben. Wie und wo folgt nun.

Was mache ich mit dem Code?

Wenn ihr ein Imagemap Layout benutzen wollt, dann müssen wir den Code natürlich auf Multiuser umstellen, heißt also : Auf viele Benutzer anpassen und können den nicht auf jeden einzelen zuschneiden, das müsst ihr dann selber machen. Das einzige was ihr an dem Code verändern müsst und dürft [!], ist die URL für die Imagemaps.

Wie muss der Code denn dann aussehen?

Der Code für das Imagemap wurde also gestartet. Danach werden die Maße des Bildes angegeben und welches Map verwendet wird. Jetzt kommt das entscheidene für dich.

 


Nämlich das. Alt="Kiss me" wird von euch ersetzt. Allerdings nur das, was zwischen den Anführungsstrichen steht. Der Altext erscheint, wenn ihr im Internetexplorer [IE] über die verlinkte Stelle, also das Imagemap, fahrt (hovern). Verlinkt ihr also eure Startseite, könntet ihr dort "Startseite" hinschreiben, oder auch irgendeinen anderen Text. :D


 

In diesem Falle ist nur ein Imagemap auf dem Bild, aber wenn mehrere URLS angegeben sind (pro Url ein Imagemap mehr^^), müsst ihr die jeweils zur ZielURL verändern. Und den Alt Text natürlich auch. Bei meinen Layouts ist es meistens so, dass ich für die Startseite, das Gästebuch und die Kontaktseite ein Imagemap angelegt habe. Dann müsstet ihr eure Url bzw. so zwischen die "..." einsetzen.
http://myblog.de/deinBlogName <- Startseite http://myblog.de/deinBlogName/gb <- (gb für Gästebuch) Gästebuch http://myblog.de/deinBlogName/contact <- (contact für Kontakt) Kontakt

Würde deine URL jetzt http://myblog.de/fashionQueen lauten, müsste dieser Code:


...nun so lauten:


Und wenn ihr das verstanden habt, könnte euer Layout mal so funktionieren: Layout_Beispiel_Imagemapping
Oder auch euer Bild: (mein Beispiel):Beispiel_für_Imagemapping

Fragen oder Probleme?

Schreibt mir ne Mail.

Jaleen

Intoxication.design@freenet.de 


Gratis bloggen bei
myblog.de