Bereich im Bild verlinken
lima-city → Forum → Die eigene Homepage → Grafikdesign
beispiel
benutzen
bild
code
dank
erstellen
filter
gesamtbild
http
image
kreisen
pfad
position
raster
sinnlos kleine bilder
tabelle
tomate
url
weben
windows
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Meinst du Image Maps?
-
Du musst das Bild erstellen und z.B. mit Photoshop in Slices aufteilen. Dann ist z.B. die Tomate ein Slice und der Käse ein Slice. Und der Rest natürlich. Dann gehst du auf "Für Web und Geräte speichern". Dann wird jedes Slice als einzelnes Bild gespeichert. Wenn du auf "Vorschau" gehst, wird dir im Browser eine HTML Tabelle angegeben, die die einzelnen Bilder/Slices zu dem Gesamtbild zusammenfügt. Kopier den HTML Code und änder den Pfad und den Bildnamen. Dann hast du schonmal das Gesamtbild. Dann musst du noch die Links setzen. Also das Slice mit dem Käse führt dann z.B. zu käse.html.
Beispiel für die Tabelle des Gesamtbildes, die von Photoshop erzeugt wird:
<table id="Tabelle_01" width="761" height="513" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"> <img src="BrowserPreview_tmp_01.png?1339759942" width="760" height="95" alt=""></td> <td> <img src="Abstandhalter.gif" width="1" height="95" alt=""></td> </tr> <tr> <td> <img src="BrowserPreview_tmp_02.png?1339759942" width="114" height="3" alt=""></td> <td rowspan="2"> <img src="Unbenannt-1_03.png?1339759942" width="549" height="337" alt=""></td> <td> <img src="BrowserPreview_tmp_04.png?1339759942" width="97" height="3" alt=""></td> <td> <img src="Abstandhalter.gif" width="1" height="3" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="BrowserPreview_tmp_05.png?1339759942" width="114" height="415" alt=""></td> <td rowspan="2"> <img src="BrowserPreview_tmp_06.png?1339759942" width="97" height="415" alt=""></td> <td> <img src="Abstandhalter.gif" width="1" height="334" alt=""></td> </tr> <tr> <td> <img src="BrowserPreview_tmp_07.png?1339759942" width="549" height="81" alt=""></td> <td> <img src="Abstandhalter.gif" width="1" height="81" alt=""></td> </tr> </table>
Da musst du dann halt den Namen und Pfad ändern. Und da wo das Einzelbild mit dem Käse ist, setzt du dann ein Link ein:
<a href="kaese.html"><img src="kaese.png" width="97" height="415" alt=""></a>
Also so gehts auf jeden Fall mit Photoshop...
-
Ja das sind die Image Maps!
Für Sie musst du aber die Position (in Pixel) wissen und den Umfang (je nach welche Art du nimmst es gibt Polynom, Kreis und Viereck) um eine Verlinkung nur auf einen bestimmten Teil im Bild zu beschränken. Natührlich kannst auf jeden Bild so viele verlinkungen machen wie du willst, aber sie sollte sich nicht überschneiden.
Gut gedacht ist es zum Beispiel, wenn du ein Bild mit mehreren Personen hast und zum Beispiel über den Klick auf das Gesicht auf das Profil verlinken möchtest etc.
Hier findest du eine Anleitung.
Alles in HTML. Relativ einfache Sache. Um Positionen raus zu finden am besten Photoshop benutzen.
Lg, Nico -
Und bitte verwend nicht die Variante von ultimate-bravery, da das 1. erfordert, dass das Bild in sinnlos kleine Bilder aufgeteilt wird, obwohl heute jeder versucht möglichst wenige einzelne Bilder auf der Seite zu haben (Techniken wie CSS-Sprites) und 2. erfordert die Tabellenversion, dass alles in einen Raster eingeteilt wird.
Warum soll man so was hässliches verwenden, wo nichteinmal ein Kreis oder Polygon definiert werden kann obwohl das mit Image Maps funktioniert die für genau den Zweck gemacht wurden.
blogpur schrieb:
Das ist nicht einmal nötig, selbst Windows Paint (!) kann das...
Um Positionen raus zu finden am besten Photoshop benutzen.
-
Hallo!
hackyourlife schrieb:
Und bitte verwend nicht die Variante von ultimate-bravery, da das 1. erfordert, dass das Bild in sinnlos kleine Bilder aufgeteilt wird, obwohl heute jeder versucht möglichst wenige einzelne Bilder auf der Seite zu haben (Techniken wie CSS-Sprites) und 2. erfordert die Tabellenversion, dass alles in einen Raster eingeteilt wird.
Absolut korrekt. Außerdem brauchen solche Bildergeschichten immer sehr lange zum Laden, was wiederum Besucher abschrecken könnte. Darüber hinaus hat man mit CSS viel mehr Möglichkeiten die Imagemap und ihre Areas zu gestalten. Dasselbe gilt für JavaScript - hauptsache eben keine Slices und Tables.
Siehe: Imagemap Mouseover/Hover Effekt
blogpur schrieb:
Um Positionen raus zu finden am besten Photoshop benutzen.
hackyourlife schrieb:
Das ist nicht einmal nötig, selbst Windows Paint (!) kann das...
Richtig. Dazu einfach das Hintergrundbild der Imagemap mit Paint öffnen und die zukünftigen Areas mit der Maus ansteuern und schon kannst Du unten links die benötigten Werte für die x und die y-Achse ablesen und in den Quelltext oder etwas umgerechnet auch in die CSS eintragen.
Gruß,
webdesignerin
Beitrag zuletzt geändert: 16.6.2012 16:29:32 von webdesignerin -
Gimp kann ImageMaps erstellen. Einfach das Bild in Gimp öffnen und dann Filter → Web → ImageMap wählen.
-
drafed-map schrieb:
Gimp kann ImageMaps erstellen. Einfach das Bild in Gimp öffnen und dann Filter ? Web ? ImageMap wählen.
Cool, also das wuste ich auch noch nicht :)
Man lernt ja nie aus, Danke!
hackyourlife schrieb:
blogpur schrieb:
Das ist nicht einmal nötig, selbst Windows Paint (!) kann das...
Um Positionen raus zu finden am besten Photoshop benutzen.
Mit dem Positionen sollte ja eigentlich auch die meisten gängigen Grafikprogramme können.
Aber man sollte wenn man mit Grafiken was machen möchte zumindestens GIMP am Start haben :)
airsoftware schrieb:
Danke, hat mir sehr gut geholfeen!
Bitte, dafür sind wir da und nun viel Erfolg! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
