Autor |
Nachricht |
MaraMaria
Threadersteller
Dabei seit: 03.08.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 12.03.2013 10:50
Titel Grafiken (Dreiecksform) verlinken |
|
|
Halli hallo,
ich sitze gerade an der Programmierung für eine Landingpage. Folgendes Problem habe ich:
Ich habe eine Seite mit mehreren Grafiken, die allesamt Dreiecke mit einem Bild gefüllt sind. Diese habe ich im HTML mit einem DIV umrandet, einen <a href> reingebaut und diese Dreicksgrafik als Background-Image versehen.
Die Bilder sind jeweils absolute und mit der entsprechenden Position gesetzt. Da die Grafiken sehr nah beinander sind ist nun das Problem, dass der Link das volle PNG-Bild (also ein Rechteck) klickbar macht.
Ich möchte das wirklich nur das Bild (Dreieck) klickbar ist. Habe bereits Imagemap und CSS 3 DIV Dreieck versucht, bin allerdings gescheitert.
Auf Antworten freue ich mich!
MaraMaria
|
|
|
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Di 12.03.2013 11:20
Titel
|
|
|
Vereinfacht kann man sagen, dass alle Seitenelemente rechteckig sind. Du kannst jedoch Bilder mit einer Imagemap versehen und dort poly-shapes nutzen um beliebige Polygone mit einem Link zu versehen.
Gruß
Karl
|
|
|
|
|
Anzeige
|
|
|
escaPe
Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht:
|
|
|
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Mi 13.03.2013 01:00
Titel
|
|
|
Eine Imagemap ist sicher das einfachste.
Je nachdem, was du so für verrückte Dinge vorhast, könntest du das auch über Javascript und mit Hilfe des Canvas-Elements lösen. Hat den Vorteil, dass du die Positionierung ändern kannst, ohne jedes mal die Koordinaten in der Map zu aktualisieren. Und dass du CSS-Transitions und andere Späße für die einzelnen Elemente nutzen kannst. Aber natürlich auch den Nachteil, dass es einen Fallback braucht.
Ich hab mal zur Spaß an der Freud eine Demo gebastelt, inspiriert hiervon. Nur mal so als Anregung - geht sicher noch eleganter über andere Wege, zB über Clipping.
|
|
|
|
|
|
|
|
Ähnliche Themen |
swf verlinken?
Wie BG verlinken?
pdf verlinken
in div verlinken
Verlinken?
swf in swf verlinken
|
|