Autor |
Nachricht |
neoflox
Threadersteller
Dabei seit: 21.10.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 01.12.2010 15:57
Titel Object sichtbar, aber klick-transparent? |
|
|
Hi,
ganz einfacher Aufbau: Website mit einem Footer, der die Skyline einer Stadt transparent über den Inhalt legt (png/gif). Funktioniert schon. Leider werden unter dem gesamten Footer-DIV (volle Content-Breite) die klickbaren Links durch die Grafik verdeckt. Text markieren ist natürlich an der Stelle auch nicht möglich.
So siehts aus: http://img256.imageshack.us/img256/3921/bild3oi.png
Gibt es eine Möglichkeit, die Skyline klick-transparent zu machen? D.h. dass ich auf die darunter liegenden Links klicken kann (Safari kann damit umgehen, FF z.B. nicht). Natürlich geht es mir vorrangig darum, die transparenten Bereiche noch zugänglich zu kriegen.
Enttäuscht mich bitte nicht
– Flo
Zuletzt bearbeitet von neoflox am Mi 01.12.2010 15:57, insgesamt 1-mal bearbeitet
|
|
|
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Mi 01.12.2010 16:08
Titel
|
|
|
probiers mal mit z-index...
edit: bzw. AFAIK ist es nicht möglich bilder "klick"-transparent zu setzten. Transparenz ist zwar möglich, jedoch nur die visuelle nicht haptische.... Berichtigt mich, wenn ich falsch liege...
Zuletzt bearbeitet von immerIch am Mi 01.12.2010 16:12, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
neoflox
Threadersteller
Dabei seit: 21.10.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 01.12.2010 16:23
Titel
|
|
|
Hi,
der Footer liegt schon per z-index über dem Rest. Geht so leider nicht.
Wenn es generell schon nicht mit der Grafik geht – gibt es einen Fix für Firefox, damit der freie Bereich am linken Ende der Grafik (halt der Rest des sonst leeren DIVs) haptisch transparent zu machen? Hier eine Live-Demo der Seite (wip)
|
|
|
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Mi 01.12.2010 16:58
Titel
|
|
|
Mir ist grad eingefallen, es gäbe noch die Möglichkeit mittels <canvas>-Element und Javscript die Footergrafik zu zeichnen.
Dabei gibts aber 2 Problemchen.
1. Richtig viel Aufwand, die ganzen Türmchen gezeichnet zu bekommen....
2. Bin nicht sicher inwieweit die Browser HTML5 inkl. <canvas> bereits unterstützen....
Gruß.
Zuletzt bearbeitet von immerIch am Mi 01.12.2010 16:59, insgesamt 1-mal bearbeitet
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 01.12.2010 17:04
Titel
|
|
|
SVG-Grafik erstellen in deinem bevorzugten Editor.
raphaeljs runterladen.
Raphaeljs einbinden.
Doku nach "path" durchsuchen.
Canvas erzeugen und mit SVG-Pfad füllen (beides per Raphael).
|
|
|
|
|
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 01.12.2010 17:08
Titel
|
|
|
sahnemuh hat geschrieben: | SVG-Grafik erstellen in deinem bevorzugten Editor.
raphaeljs runterladen.
Raphaeljs einbinden.
Doku nach "path" durchsuchen.
Canvas erzeugen und mit SVG-Pfad füllen (beides per Raphael). |
sehr geil, danke!
|
|
|
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Mi 01.12.2010 17:11
Titel
|
|
|
oder so. Wunderbar, werd ich mir auch nochmal genauer anschauen... Dank dir...
|
|
|
|
|
neoflox
Threadersteller
Dabei seit: 21.10.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 01.12.2010 17:38
Titel
|
|
|
Hui,
raphael sieht stark aus! [/homo] Danke für den Tipp!
HTML5 hat mir grade 4 Wochen Dauerkopfschmerzen beim letzten Webprojekt eingebrockt. Die Browser sind leider noch nicht weit /gleich gut um in nächste Zukunft auf soetwas zu setzen. Erst recht nicht bei einer simplen Consumer-Website, wo sicherlich noch einige Leute mit IE5 drauf gehen
Ich fürchte, die allereinfachste Lösung wird es sein, die Skyline um 50% zu verkleiner und den Verlust an Klickfläche hinzunehmen. Wenn dann noch Zeit ist, werd ich mal die SVG-Lösung probieren.
Thanks again mediengestalter-forum!
|
|
|
|
|
|
|
|
Ähnliche Themen |
Mobile Design - Objekte Sichtbar und Sichtbar Bootstrap
Photoshop: Verlauf nach Transparent wird nicht transparent
Smart Object in PS 5
[php 5] fehler: trying to get property of non-object
[JavaScript] setInterval im Object
<object> und <embed> anpassen
|
|