✔ Zwei Bilder anstatt Text als Menüpunkt

Status
Nicht offen für weitere Antworten.
C

Chris-rocks

Mitglied
Hallo zusammen,
nach nächtelangem Suchen muss ich Euch nun doch um Rat bitten!

Es geht um zwei Bilder, die ich anstatt von einem Linktext einbinden möchte, kann dies aber nicht mit background-image: url(bla.png) machen, da sonst der Transparenz-Filter für .png Grafiken nicht greift!
Ein Bild ist kein Problem, wird auch schön angezeigt, doch mit dem :hover Bild klappt das nicht!
Ich hab auch keinen Plan, wie ich das in den body Bereich einbinden soll, da ja schon das img id="bassrig" bereits vergeben ist!

Hier ist mal der CSS Code:

Code: 
<style type="text/css">
<!--
/*
/* Internet Explorer CSS hacks */
img, div {
  behavior: url(pngbehavior.htc);
}
/* Site info*/
HTML {
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	OVERFLOW: hidden; 
	WIDTH: 100%; 
	PADDING-TOP: 0px; 
	HEIGHT: 100%;
}
BODY {
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	OVERFLOW: hidden; 
	WIDTH: 100%; 
	PADDING-TOP: 0px; 
	HEIGHT: 100%;
}
#background {
	Z-INDEX: 2; 
	WIDTH: 80%; 
	POSITION: absolute; 
	HEIGHT: 90%;
	margin-top: 2%;
	margin-left: 10%; 
	
}
#scroller {
	Z-INDEX: 3; 
	LEFT: 0px; 
	OVERFLOW: auto; 
	WIDTH: 100%; 
	POSITION: absolute; 
	TOP: 0px; 
	HEIGHT: 100%;
	scrollbar-base-color:#000000;
	scrollbar-3d-light-color:#6A0808;
	scrollbar-arrow-color:#B22323;
	scrollbar-darkshadow-color:#000000;
	scrollbar-face-color:#000000;
	scrollbar-highlight-color:#999999;
	scrollbar-shadow-color:#000000;
	scrollbar-track-color:#000000;
}
/*Menü*/
#bassrig {
    position: absolute;
	margin: 19% 0 0 46%;
	z-index: 5;
	width: 30%;
	height: 50%;
}
#bassrig a, #bassrig a:visited {
    text-decoration:none;
	display:inline;
}
#bassrig a img {
    display:visible;
	
}
#bassrig a:hover, #bassrig a:active {
    text-decoration:none;
	display:inline;
	position: relative;
}
#bassrig a:hover img {
    display:none;
}
-->
</style>

Und der HTML Code:

HTML: 
<body bgcolor="#000000">
<DIV><IMG id=background title="" alt="" 
src="templates/studio.jpg"> 
</DIV>
<div id="scroller">
<div id="bassrig"><a href="#"><img id="bassrig" title="" alt="" src="templates/bass-rig.png" border="0"></a> 
</div>

</div> /*scroller*/
</body>
</html>

Vielleicht gibt es hier im Forum auch jemand aus München, oder besser noch Augsburg, der mir vielleicht beim weiteren erstellen meiner Homepage helfen könnte. Soll natürlich nicht umsonst sein ;)
Ich denke, da kommt schon noch das eine oder andere Problem auf mich zu und mit meinen läppischen Grundkenntnissen komm ich da nicht weiter:rolleyes:
In dem Fall einfach PN an mich.

Danke schon mal,
Chris
 
Hi.
Chris-rocks hat gesagt.:
Es geht um zwei Bilder, die ich anstatt von einem Linktext einbinden möchte, kann dies aber nicht mit background-image: url(bla.png) machen, da sonst der Transparenz-Filter für .png Grafiken nicht greift!
Zum Vergrößern anklicken....
Grundsätzlich ist es sehr wohl möglich, eine transparente PNG-Grafik als Hintergrundbild für einen Link zu verwenden, und sie mittels der :hover-Pseudoklasse zu tauschen.

Aus der Sicht der älteren IE-Versionen (bis einschliesslich dem IE6), die das PNG-Format nicht unterstützen, ist hierbei aber die Dimension der Grafik entscheidend, ob der Link dann nutzbar ist (:hover-Effekt & klickbar), oder eben nicht.

Auf Cross-browser semi-transparent backgrounds kannst du dich mit der Thematik näher beschäftigen, die eine technische Alternative zu dem von dir verwendeten "pngbehavior.htc"-Hack darstellt, und im Abschnitt "Addendum: IE Link bug" nachschauen, welche Grafikdimensionen geeignet sind, und welche nicht.
 
Hey Maik,
also so richtig weiterhelfen tut mir das auch nicht. Die Grafik, mit der ich gerade rumprobiere, hat so um die 120px x 200px und das ist mit dem "Addendum: IE Link bug" anscheinend nicht möglich.
Auch die weiteren Tutorials helfen mir nicht wirklich, oder ich versteh's einfach nicht :-(

Ich möchte meine Grafik ja auch nicht komplett transparent machen, sondern eigentlich nur den grauen Rand loswerden und dann das sichtbare Bild nur beim hovern austauschen.

Dumm ist halt auch, dass ich für jeden Link eine andere Grafik hab.

Kannst Dir es ja mal anschauen unter:
http://www.chris-rocks.com/test3.htm

Der "Bass Amp Turm", bei dem grossen Teppich, ist der Link mit dem ich gerade arbeite. Der sollte eigentlich "glühen", wenn man mit der Maus drüber geht.

Vielleicht gibt's ja noch einen anderen Ansatz.

Gruss,
Chris
 
Zuletzt bearbeitet:
Mit der Grafikdimension lässt sich tatsächlich nichts im IE (<7) anfangen, wie im übrigen auch mit deinem genannten Link nicht:

http://www.chris-rocks.com/404.html hat gesagt.:
404 Fehlerseite

File not found

Datei nicht vorhanden
Zum Vergrößern anklicken....
 
Also der Link funktioniert bei mir auf IE und Firefox.
Ich hab gerade vorhin noch was geändert, vielleicht warst Du zu schnell, oder ich zu langsam.

Hast Du sonst noch irgendwelche Vorschläge, oder vielleicht sonst noch jemand?

Gruss,
Chris
 
Hi Maik,
ja das dachte ich mir schon, dass ich da wieder auf's Java Script zurückgreifen muss.

Jetzt hätt ich da noch was, kannst Du mir vielleicht auf die Sprünge helfen, wie ich es am besten anstelle, dass bei einer kleineren Bildschirmauflösung (z.B. 800x600) mein Hintergrund sich nach oben aus dem Bild schiebt, so dass oben der meiste Teil des Backgrounds verschwindet, wo es eh egal ist.
Das müsste doch mit min-height und einem extra Container realisierbar sein?

Jetzt ist alles bei 100% und zwar immer, ist eigentlich nicht schlecht, aber bei grosser Auflösung verzerrt und verpixelt sich das Bild halt schon enorm!

Gruss,
Chris
 
Chris-rocks hat gesagt.:
... Jetzt ist alles bei 100% und zwar immer, ist eigentlich nicht schlecht, aber ...
Zum Vergrößern anklicken....
So gut finde ich das in deinem Fall gar nicht, da du überhaupt nicht weißt, mit welchem Höhen-Breiten-Verhältnis deine Seite dargestellt wird. Bei annähernd quadratischem Fenster entschwebt der "Bass Amp Turm" derzeit in Richtung Studiodecke und bleibt nicht auf dem Teppich.

Ich würde darum kein elastisches Layout wählen und das Hintergrundbild (Studio) in einen zentrierten Rahmenblock mit 800x600px fester Größe einsetzen. Das PNG-Problem im IE6 und tiefer könntest du vielleicht umgehen, wenn du für den Link transparente GIF-Bilder einsetzt. Ich würde sie dort auch im Hintergrund einsetzen, im Hover-Zustand wechselst du per CSS nur das Hintergrundbild.
Etwa so:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
        * {
            margin: 0;
            border: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
            font: 100.01% normal sans-serif;
            color: #fff;
            background-color: #000;
            text-align: center;
        }
        div#vcenter {    /* Hilfsblock zum vertikalen Zentrieren des WRAPPERS */
            width: 1px;
            height: 50%;
            margin-bottom: -300px; /* = halbe wrapper-Höhe */
            float:left;
        }
        div#wrapper {
            position: relative;
            width: 800px;
            height: 600px;
            margin: 0 auto;
            text-align: left;
            clear: left;
            background: #000 url("templates/studio.jpg") scroll no-repeat center;
        }
        a#bassrig {
            display: block;
            width: 119px;    /* = Breite des eingesetzten Hintergrundbildes */
            height: 210px;    /* = Höhe des eingesetzten Hintergrundbildes */
            position: absolute;
            bottom: 160px;
            left: 470px;
        }
        a#bassrig:link, a#bassrig:visited {
            background: transparent url(templates/bass-rig1.gif) no-repeat center;
        }
        a#bassrig:hover, a#bassrig:active {    /* hier das hover-Bild einsetzen */
            background: transparent url(templates/bass-rig1_h.gif) no-repeat center;
        }
    </style>
</head>

<body>
    <div id="vcenter"></div>    <!-- Hilfsblock zum vertikalen Zentrieren des WRAPPERS -->
    <div id="wrapper">
        <a href="#" id="bassrig">&nbsp;</a>
    </div>    <!-- /#wrapper -->
</body>

</html>
 
@hela,
das mit den .gif's könnte problematischwerden, da die Link Bilder, in dem Fall der Bass Amp Turm, beim hovern "glühen" (eine weisse gefadete Umrandung) sollen und bei dem .gif Format bekomme ich nur einen fetten weissen Rand!

Der Background Ansatz ist auf jeden Fall schon mal super von Dir. Dank Dir dafür.
Ich wollt auch aus dem von Dir gennanten Grund weg vom elastischen Hintergrund.
Idealst wäre es jetzt noch, wenn der Hintergrund sich etwas nach oben aus dem Bildschirm schieben würde, dann könnte ich den auch grösser machen, etwa 1000px x 750px und oben ist eh nur die Decke, die ist nicht so wichtig.
Hast Du da auch eine Idee?
Ich müsste den Background unten fixieren, doch mit background-attachment:bottom center; komm ich da nicht weit.

Aber das mit den Bildern für die Links bekomme ich schon irgendwie hin, dass schaff ich ;-]

Vielen Dank nochmal, auf jeden Fall schon eine Sorge weniger :)

Gruss,
Chris

ohh, ich meinte natürlich background-position: bottom center;

:rolleyes:
 
Hey,
also das Problem mit dem Hintergrund oben abschneiden werd ich wohl mit einem Java Script (automatisches scrollen bei kleinerer Bildschirmauflösung) lösen und das mit den Hintergrundbildern für die links hab ich auch schon gelöst.

Soweit alles gelöst:)

Vielen, vielen Dank für Eure Hilfe.

Gruss,
Chris
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück