kostenloser Webspace werbefrei: lima-city


Bereich im Bild verlinken

lima-cityForumDie eigene HomepageGrafikdesign

  1. Autor dieses Themas

    politica

    politica hat kostenlosen Webspace.

    Guten Morgen,

    kurze frage und zwar wie kann ich leicht einen Bereich in einem Bild verlinken ???

    Beispiel:

    Auf einem Bild sieht man ein Stück Käse, eine Tomate... nun möchte ich wenn man das Stück Käse anklickt sich ein Link öffnent zu einer anderen Seite. Wenn man die Tomate anklickt das selbe.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

  4. ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    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...
  5. 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
  6. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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:
    Um Positionen raus zu finden am besten Photoshop benutzen.
    Das ist nicht einmal nötig, selbst Windows Paint (!) kann das... ;-)
  7. webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo! :wave:

    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. :wink:

    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 :angel:

    Beitrag zuletzt geändert: 16.6.2012 16:29:32 von webdesignerin
  8. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Dazu fällt mir noch eine andere Möglichkeit ein: Beschreibung und ein Beispiel mit nur einem Bild
  9. Gimp kann ImageMaps erstellen. Einfach das Bild in Gimp öffnen und dann Filter → Web → ImageMap wählen.
  10. 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:
    Um Positionen raus zu finden am besten Photoshop benutzen.
    Das ist nicht einmal nötig, selbst Windows Paint (!) kann das... ;-)

    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!
  11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!