LinkBack URL
About LinkBacks
Zitierendu könntest zB statt des <img>-tags das persdaten.png auch schon als Hintergrundbild für <a> anzeigen lassen. Beim hover wird es dann ausgewechselst statt "druntergelegt".
Hi @ all,
vorweg erstmal der Code:
html:
<div id="persdaten"><a class="persdaten" href="persdaten.html"><img src="pic/persdaten.png" alt="Persönliche Daten" border="0" /></a></div>
css:
a.persdaten:hover{ display:block; background-image:url(pic/persdaten_o.png);
}
Der Effekt funtioniert einwandfrei. Mein problem ist, dass ich die Bilder mit transparenz versehen habe (src und a:hover) wenn ich mit der Maus nun darüber fahre entsteht eine Dopplung und die Dchrift im Bild wirkt dadurch fett. Kann ich src verschwinden lassen sobald a:hover angezeigt wird?
oder gibt es eine alternative?
P.S.: Ich brauche die Transparenz
du könntest zB statt des <img>-tags das persdaten.png auch schon als Hintergrundbild für <a> anzeigen lassen. Beim hover wird es dann ausgewechselst statt "druntergelegt".
<a class="persdaten" href="persdaten.html"><div id="persdaten"></div></a>
.persdaten {
background-image: url(pic/persdaten.png);}
a.persdaten:hover{ display:block; background-image:url(pic/persdaten_o.png);}
geht auch
so wie es scheint ist hab ich aber einen fehler beim erstellen meiner bilder gemacht.
Danke @ wildemieze
Geändert von der84er (18.02.2010 um 14:29 Uhr)
murphys-gesetz:
gestern alles wunderbar, heute alles sch______.
ich bekomm heute einfach kein hover-effekt hin, weis auch nicht wo der fehler liegt.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #999999;
}
-->
</style>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper_out">
<div id="wrapper_in">
<div id="top"></div>
<div id="action">
<p> </p>
<h1>Willkommen auf der Bewerbungshomepage von . </h1><br />
Auf dieser Website finden Sie Informationen zu meinem Lebenslauf, Kenntnissen, Zeugnisse sowie meinen Kontaktdaten.
<br />
<br />
<p>
Obwohl ich als Berufsanfänger bin, überzeuge ich durch Engagement im Beruf sowie soziale Kompetenz und kann dem Vergleich mit anderen qualifizierten Kräften standhalten.</p>
<p>
Ich bin Absolvent der Beruflichen Medienschule Hamburg und möchte mich nun hochmotiviert ins Berufsleben stürzen. Mein beruflichen Vorstellungen sind in Bereichen zu arbeiten, in dem ich viel mit Konzepten und deren Realisierung zu tun habe. Meine Stärken sind mein gutes Auftreten und meine Marketing bzw. Verkaufstalente. </p>
Wenn ich Ihren Anforderungen entsprechen, nehmen Sie bitte Kontakt mit mir auf. Ich freue mich auf ein persönliches Gespräch mit Ihnen.
</div>
<div id="navi">
<div id="space"></div>
<div id="persdaten"><a class="persdaten" href="perdaten.html"><img src="pic/persdaten.png" alt="Persönliche Daten" border="0" /></a></div>
<div id="beruf"><a class="beruf" href="beruf.html"><img src="pic/berufsbildung.png" alt="Berufsbildung" border="0" /></a></div>
<div id="schul"><a class="schul" href="schul.html"><img src="pic/schulbildung.png" alt="Schulbildung" border="0" /></a></div>
<div id="bewerbung"><a class="bewerbung" href="bewerbung.html"><img src="pic/bewerbung.png" alt="Bewerbung" border="0" /></a></div>
<div id="kontakt"><a class="kontakt" href="kontakt.html"><img src="pic/kontakt.png" alt="Kontakt" border="0" /></a></div>
</div>
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
body {
background-image: url(pic/bg.png);
background-repeat: repeat;
top: 0px;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
font-style: normal;
}
#wrapper_out {
height: 1000px;
width: 800px;
background-color: #FFFFFF;
left: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(pic/wrapper_out.png);
background-repeat: repeat-x;
}
#wrapper_in {
width: 790px;
height: 990px;
left: 5px;
right: 5px;
position: relative;
top: 5px;
background-color: #FFFFFF;
}
#top {
position: relative;
height: 150px;
width: 100%;
background-image: url(pic/top.png);
}
#navi {
height: 525px;
width: 175px;
}
#action {
height: auto;
width: 485px;
left: 245px;
float: right;
border: 0 30px 0 0 solid #FFFFFF;
position: absolute;
}
#space {
height: 65px;
width: 175px;
}
#persdaten {
height: 75px;
width: 175px;
}
#beruf {
height: 50px;
width: 175px;
}
#schul {
height: 50px;
width: 175px;
}
#bewerbung {
height: 50px;
width: 175px;
}
#kontakt {
height: 50px;
width: 175px;
}
a.persdaten: hover{ display:block; background-image:url(pic/persdaten_o.png);
}
a.bewerbung:hover{ display:block; background-image:url(pic/bewerbung_o.png);
}
a.schul:hover{background-image:url(pic/schulbildung_o.png);
}
a.beruf:hover{ display:block; background-image:url(pic/berufsbildung_o.png);
}
a.kontakt:hover{ display:block; background-image:url(pic/kontakt_o.png);
}
Nimm mal das Lehrzeichen vor hover raus.
a.persdaten: hover{ display:block; background-image:url(pic/persdaten_o.png);
Thomas
hab ich weg gemacht. ist aber alles wie vorher.
Das ist aber auch ein Gewusel, ich habe es gerade mal voll gelesen.
Deine Menüpunkte SIND Bilder. Per CSS-:hover willst Du diese mit einem Hintergrundbild versehen. So kann es auch nicht gehen, weil das Bild IMMER da und im Vordergrund ist, auch wenn Du den Background mit einem Bild betünchst.
Die Herangehensweise sollte eine andere sein: den Link mit normalem Texteintrag erstellen, also "Persönliche Daten", "Beruf" usw., dann diesen mit einer Klasse versehen wie schon geschehen. Dieser Klasse ( a.persdaten) per CSS ein background-image zuweisen und per CSS die :hover-Klasse mit einem anderen background-image bestücken (a.persdaten:hover). Damit der Text nicht auf dem Bild erscheint, schiebt man ihn mit einem (negativen) text-indent 'raus.
Also ausschnittsweise so:
und das CSS dazu:Code:<a class="persdaten" href="persdaten.html">Persönliche Daten</a> <a class="beruf" href="beruf.html">Beruf</a>
Code:a.persdaten, a.beruf { height: 50px; width: 175px; display: block; text-indent: -100%; } a.persdaten { background-image: url(pic/persdaten.png); } a.persdaten:hover { background-image: url(pic/persdaten_o.png); } a.beruf { background-image: url(pic/beruf.png); } a.beruf:hover { background-image: url(pic/beruf_o.png); }
Geändert von th2409 (18.02.2010 um 15:27 Uhr)
Thomas
Hat alles wunderbar geklappt.
Deine Erklärung ist GOLD wert. Endlich verstehe ich es.
Jetzt weis ich auch endlich wie es zu diesem knoten kam, als ich bilder mit transparenz noch hatte und alles so verwirrend war.
@th2409
ab heute bist du mein CSS-Guru
Danke nochmal
ok, dann war meine Antwort "damals" wohl zu kurz.. aber freut mich, daß es jetzt klappt
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)