Menü durch transparente Grafik anklickbar machen

[Ignatz]

Hallo,

ich habe folgendes Problem:
Um zu vermeiden, für jeden Menüpunkt eine eigene Grafik anzulegen, habe ich über das Menü eine transparente Grafik gelegt. Ansicht siehe Anhang. D. h. das Menü liegt unter dem Bild, welches unterhalb des Bogens transparent ist.

Nur leider sind die Menüpunkte jetzt nicht klickbar!

Gibt es eine Möglichkeit, dass ich durch die Grafik hindurch die Menüpunkte auswählen kann?

Vielen Dank!
Ignatz

[lucina]

Ich weiß ja nicht, wie Du vorgegangen bist, aber es sollte keine Probleme geben, wenn Du dem <div>, welches die Navigation beinhaltet, via CSS eine Hintergrundgrafik mitgibst:

#navigation {
background-image: url(tl_files/background.jpg);
background-repeat: no-repeat;
}

Carolina.

[Ignatz]

Hallo Carolina,

ich verstehe nicht genau, was du meinst. Die Grafik liegt ja über dem Menü. Welche Grafik sollte ich denn im Menü einbinden? Im Menü selbst soll sich ja als Hover-Effekt nur der Hintergrund und die Schriftfarbe der Menüpunkte ändern.

Ignatz

[schman]

Wie?

ist das ganze Menü 1 Bild? Was Carolina meint ist das du das Bild nicht über den Text legst sondern eben als Hintergrund definierst.

[Ignatz]

Hallo schman,

nein, das Menü ist kein Bild, sondern der Rahmen darum.
Zur Veranschaulichung habe ich mal noch eine Grafik angehängt. Hier habe ich das Menü über das Bild vorgeholt, es ist als das zu sehen, was ich unter dem Bogen verstecken will.

Ich könnte diesen Bogen schon als Hintergrund im Menü einsetzen, aber dann verdecken die rechteckigen <li>-Tags den Bogen. Genau das will ich vermeiden.

Ignatz

[lucina]

Ach so, Du meinst das *rote* Teil unter 'Start' ...

Auch hier: CSS-Hintergundgrafik, für jeden Unterpunkt separat erstellen (da die ja alle unterschiedlich sind), und die dann via CSS mit

ul li .active[class=foo]{background-image: foo.jpg;}

einbinden, jeweils für alle Menupunkte, denen Du im Seitenbaum eine entsprechende CSS-class geben musst.

Carolina.

[Ignatz]

Das ist ja gerade, was ich umgehen will. Wenn ich für jeden Menüpunkt eine Grafik erstelle, ist es ja nicht mehr flexibel. Oder ich müsste sehen, dass alle Menüpunkte die gleiche Breite haben. Wenn ich mal eine Seite im Menü aufnehmen will, muss ich die Grafiken ja wieder anpassen.

Nicht, dass ich faul wäre. Aber ich dachte, es geht eleganter.

Ignatz

[Nikolas]

Wie wär es denn wenn du die Grafik in einem neuen Div ablegst und entsprechend einen übergeordneten z-index dafür anlegst. Dann musst du halt mit absoluter Positionierung arbeiten.
Die Grafik kannst du dann als ganzes einbinden, musst dann halt ein PNG mit Transparenz einsetzen.

Ich hab das bei meiner Seite ähnlich gelöst: www.nrmedia.de

Gruß
Nikolas

[Ignatz]

Hallo Rudinhio,

die Grafik liegt in einem extra <div> ebenso wie die Navigation. Per relativer Positionierung und z-index habe ich die Navigation unter das Header-<div> gelegt.
Aber auch mit absoluter Positionierung kann ich nicht durch die transparente Grafik auf die Menüpunkte klicken.

Ich werde wohl nicht drumrum kommen und doch für jeden Menüpunkt eine Grafik anlegen müssen.

Ignatz

[Nikolas]

Das Div Element mit der Navigation muss natürlich etwas größer sein als das mit der Hintergrundgrafik (die mit dem Rand), welches dann absolut an Top positioniert wird. Das Div-Element mit der Grafik bekommt einen höheren Z-index als das mit dem Menü.
Da das Element mit der Navi etwas größer ist und das Div mit der Grafik nach oben verschoben wird, bleibt das Menü unten über die Menüpunkte auswählbar.

Der einzige Nachteil den ich sehe, ist dass die Menüpunkte nur oben nicht mehr anklickbar wären. Ansonsten ginge es mit meiner Methode schon. Ist natürlich etwas unschön dann. Lässt sich nur mit Javascript umgehen. Wenn da keine Kenntnisse vorliegen ist es wohl doch einfacher mit einzelnen Grafiken zu arbeiten.

Hast du vielleicht einen Link zu der Seite?

Gruß
Nikolas

[brandtmarke]

link wäre gut. wie soll denn der :hover status aussehen?

[Kayzu]

Nach meinem Wissensstand ist das nicht möglich durch eine transparente Grafik zu klicken.
Ich mache das zum Beispiel mit Absicht, wenn ein Kunde wünscht, dass Bilder z.b. nicht herunterladbar sein sollen bzw. nicht speicherbar sein sollen.

Ich lege eine BG mit einem transparenten GIF drüber.
Somit wirst du als Laie immer nur den BG kopieren können, aber nicht das Bild darunter.
Sehr einfach aber effektiv.

[brandtmarke]

hab da grad so einen Gedanken:

Du kannst das transparente png als Hintergrund für Deine a bzw. span tags verwenden.
wenn Du Dein Menu Template ein wenig anpasst, so dass in etwa so ein markup ensteht:

<ul>
<li><a id="nav_1">xxx</a></li>
<li><a id="nav_2">xxx</a></li>
<li><a id="nav_3">xxx</a></li>
<li><a id="nav_4">xxx</a></li>
<li><a id="nav_5">xxx</a></li>
</ul>

das CSS dazu wäre dann z.B.

a:link,
a:visited,
span {
display: block;
width: 100px;
padding: 80px 0 10px 0;
text-align:center
background: url(bogen.png) no-repeat #ddd; 
} 
a:hover,
a:active,
a:focus,
span.active {
background-color: #eee;
}
a#nav_2 { background-position: -100px 0; }
a#nav_3 { background-position: -200px 0; }
a#nav_4 { background-position: -300px 0; }
a#nav_5 { background-position: -400px 0; }

[xchs]

Ich mache das zum Beispiel mit Absicht, wenn ein Kunde wünscht, dass Bilder z.b. nicht herunterladbar sein sollen bzw. nicht speicherbar sein sollen.

Ich lege eine BG mit einem transparenten GIF drüber.
Somit wirst du als Laie immer nur den BG kopieren können, aber nicht das Bild darunter.
Sehr einfach aber effektiv.

Aber wohl auch nur für Laien oder? Wirklicher Schutz ist da ja nicht. Wenn man weiß, wie das Web funktioniert und welche Philosophie dahintersteckt, dann kommt man auch an solche Ressourcen ran...

[Kayzu]

jap, hab mal für nen Kumpel seine Diskothek zusätzlich eine Community Seite gebastelt.
Da habe ich das so angewandt.
Wie gesagt. Es kommt immer darauf an was du schützen willst und in diesem Sinne wäre ein anderen Schutz zu aufwendig gewesen.

Letztendlich wenn jemand Profi ist und sich auskennt, kommt er nahezu mit mässigem Aufwand überall dran.

[Ignatz]

Hallo,

vielen Dank für die zahlreichen Antworten. Ich habe es vorläufig so gelöst, das ich für jeden Menüpunkt ein Normal- und ein Hover-Bild habe. Der Gedanke von brandtmarke, ein einzelnes Bild zu verwenden und dessen Position bei jedem Menüpunkt anzupassen hat auch etwas für sich.

Die Lösung von Rudinhio, die Menüpunkte nach unten herausragen zu lassen klingt auch gut.

Eventuell überarbeite ich das Menü nochmal.

Einen Link gibt es, wenn die Seite online ist (Kundenauftrag!)

Gruß,
Ignatz

[psren]

also durch n transparentes png klicken geht auf jeden fall nicht, da hat Kayzu schon recht.
Dies wird zusammen mit anderen Methoden wirklich zum schutz vor ungewüntschen bilddownloads benutzt (z.b. http://www.fotolia.de) ist aber alleine nicht wirklich effektiv.

durch transparente pngs klicken, ist wie durch ne glasscheibe laufen