✔ Bilder auf Hintergrundbild anpassen?

Status
Nicht offen für weitere Antworten.
Habs gestern nicht gespeichert :rolleyes:, probiere heute nochmal den Code komplett herzustellen und ihn hier reinzustellen.;)

Ich gehe jetzt mal anhand von 2 Beispielen (1. aus dem Internet, 2. aus einem Buch) vor.:)

Edit:
Ich bekomms jetzt nicht mehr hin wie es gestern war.:rolleyes:
Habe ein Beispiel aus dem Internet probiert mit dem cih es garnicht hinbekomme!:(

Dann hab ich von meinem CSS-Buch den Code (abgeändert) verwendet:
Code: 
.erstebluete a:hover {background: url(url.zum.bild); }

So sieht jetzt mein Code aus:
Code: 
<style type="text/css" media="all" />
		body {background-image: url(blume-bg.jpg);}
		img.erstebluete {margin-left: 238px; margin-top: 143px;}
		.erstebluete a {background: url(bluet1-1.gif);}
		.erstebluete a:hover {background: url(bluete1-1rot.gif); }
</style>
	</head>
	<body>
			<p><a href="http://www.google.de"><img class="erstebluete" src="bluete1-1.gif" alt="" height="106" width="122" border="0" /></a></p>
			</body>
Da ist irgendwo der Wurm drin, denn die rote Blüte wird garnicht gezeigt.:suspekt:

Ändere ich den Code:
Code: 
<style type="text/css" media="all" />
		body {background-image: url(blume-bg.jpg);}
		.erstebluete {margin-left: 238px; margin-top: 143px;}
		.erstebluete a {background: url(bluet1-1.gif); position: absolute}
		.erstebluete a:hover {background: url(bluete1-1rot.gif); }
				</style>
	</head>

	<body>
	<div class="erstebluete">
		<p><a href="http://www.google.de"><img src="bluete1-1.gif" alt="" height="106" width="122" border="0" /></a></p>
		</div>
	</body>
Dann ist die rote Blüte bei Mouseover unter der weißen und es sind nur die roten Ränder (der roten Blüte) sichtbar.:rolleyes:

Komisch, füge ich dann noch
Code: 
.erstebluete a:hover img {visibility: hidden;}
hinzu und ändere den Wert bei margin-top (das nur nebenbei damit die Blüte im Browser an der Stelle passt ;)) dann ändert sich beim Mouseover auch die Blütenfarbe.:)
Endlich!:)
 
Zuletzt bearbeitet:
Irgendwie bekomme ich es allerdings nicht hin, dass die 2.Blüte auch an der richten Stelle sitzt.:(
Dieses margin-top: 90px reagiert irgendwie nicht.:rolleyes:
Egal welchen Wert ich da eingebe es tut sich nix.
Allerdings wenn ich -90px eingebe, dann verschieben sich beide Blüten.:eek:

Code: 
<style type="text/css" media="all" />
		body {background-image: url(blume-bg.jpg);}
		/* Erste Bluete */
		.erstebluete {margin-left: 238px; margin-top: 161px;}
		.erstebluete a {background: url(bluet1-1.gif); position: absolute;  }
		.erstebluete a:hover {background: url(bluete1-1rot.gif); }
		.erstebluete a:hover img {visibility: hidden;}
		/* Erste Bluete Ende */
				
		/* Zweite Bluete */
		.zweitebluete {margin-left: 595px; margin-top: 90px;}
		.zweitebluete a {background: url(bluete2-2.gif); position: absolute;  }
		.zweitebluete a:hover {background: url(bluete2-2rot.gif); }
		.zweitebluete a:hover img {visibility: hidden;}			
				
</style>
	</head>

	<body>
	<div class="erstebluete">
		<p><a href="http://www.google.de"><img src="bluete1-1.gif" alt="Google" height="106" width="122" border="0" /></a></p>
		</div>
		<div class="zweitebluete">
		<p><a href="http://www.yahoo.com"><img src="bluete2-2.gif" alt="Yahoo" height="96" width="94" border="0" /></a></p>
	</div>
	
	</body>
 
Hi,

versuch es mal mit einer relativen Positionierung:

Code: 
/* Erste Bluete */
                .erstebluete {position:relative; left:238px; top:161px;}

/* Zweite Bluete */
                .zweitebluete {position:relative; left:595px; top:90px;}
 
Hmm, dann stimmt zwar die Position der 1.weißen Blüte, aber bei Mouseover verschwindet diese unten unter der ehemaligen Stelle erscheint nur ein Teil der roten Blüte,:eek:
Selbiges bei Blüte 2 - auch wenn da die Position noch angepasst werden müsste.;)

Das Bild im Anhang sollte es verdeutlichen.;)

Edit:
Ich habe es auch nirgendwo online!
 

Anhänge

  • bei-mouseover.jpg
    bei-mouseover.jpg
    34,3 KB · Aufrufe: 429
Zuletzt bearbeitet:
Versuch es mal auf diese Weise:

Code: 
body {background-image: url(blume-bg.jpg);}
/* Erste Bluete */
.erstebluete {position:relative; left:236px; top:146px;}
.erstebluete a {background:url(bluete1-1.gif); position:relative; display:block; width:122px; height:106px;}
.erstebluete a:hover {background:url(bluete1-1rot.gif);}
.erstebluete a span {display:none;}
/* Erste Bluete Ende */

/* Zweite Bluete */
.zweitebluete {position:relative; left:592px; top:20px;}
.zweitebluete a {background:url(bluete2-2.gif); position:relative; display:block; width:94px; height:96px;}
.zweitebluete a:hover {background:url(bluete2-2rot.gif);}
.zweitebluete a span {display:none;}
Code: 
<div class="erstebluete">
     <p><a href="http://www.google.de"><span>Google</span></a></p>
</div>
<div class="zweitebluete">
     <p><a href="http://www.yahoo.com"><span>Yahoo</span></a></p>
</div>
oder eben so:

Code: 
body {background-image: url(blume-bg.jpg);}
/* Erste Bluete */
.erstebluete {position:relative; left:236px; top:146px;}
.erstebluete a {position:relative; display:block; width:122px; height:106px;}
.erstebluete a:hover {background:url(bluete1-1rot.gif);}
.erstebluete a:hover img {visibility:hidden;}
/* Erste Bluete Ende */

/* Zweite Bluete */
.zweitebluete {position:relative; left:592px; top:20px;}
.zweitebluete a {position:relative; display:block; width:94px; height:96px;}
.zweitebluete a:hover {background:url(bluete2-2rot.gif);}
.zweitebluete a:hover img {visibility:hidden;}
Code: 
<div class="erstebluete">
     <p><a href="http://www.google.de"><img src="bluete1-1.gif" alt="Google" height="106" width="122" border="0" /></a></p>
</div>
<div class="zweitebluete">
     <p><a href="http://www.yahoo.com"><img src="bluete2-2.gif" alt="Yahoo" height="96" width="94" border="0" /></a></p>
</div>
 
Ok, geht mit beiden.:)
Beim 1. war ich ja schon nicht weit weg.;)

Mir ist aber noch eine Idee gekommen die ganz anders geht.
Man könnte das Bild auch slicen und von jeder Blume die ich verlinken möchte noch eine rote anlegen.:rolleyes:
Somit müsste ich dann nicht die weiße Blüte über die gelbe und die rote über die weiße legen.;-)

Danke für die Hilfe :) jetzt probier ich das bei Gelegenheit mal mit einem anderen Bild.;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück