✔ Fade Effect

Moin,

du hast aus dem Tutorial diesen Fehlerteufel in deine Seite portiert ;)

Code: 
style="filter:alpha(opacity=50);"

Das fehlende "t" dürfte nun niemanden mehr ein faules Ei ins Nest legen :-)

mfg Maik
 
Ah - ok Thx!

EDIT

Als Moderator kannst Du das im tutorial bestimmt verändern oder?

Das andere nicht das selbe Problem haben - Hab das da direkt rauskopiert


EDIT2: Geht immernoch nicht :(
 
Zuletzt bearbeitet:
Der Fehler war schon korrigiert, bevor ich dir hier geantwortet habe :)

mfg Maik
 
Code: 
filters.alpha.opacity
Kennt und unterstützt außer der IE-Familie kein anderer Browser.

Und vor neun Jahren, als das Tutorial verfaßt wurde, war der IE noch sowas wie der Marktführer am Firmament der Windows-PCs, ein populärer/er (Open-Source)Browser namens Firefox existierte zu diesem Zeitpunkt überhaupt noch nicht. Lediglich Netscape, Opera, sowie die Linux- u. Mac-Browser waren am Markt vertreten, aber damals noch deutlich in der Minderheit.

Es existieren bis zum heutige Tage drei unterschiedliche Methoden, eine ist valides CSS, die übrigen zwei sind "hausgemacht" für den Browser.

Würde der IE hier der CSS3-Spezifikation folgen, wären wir diesen MS-Filter, der aus der Grafikerwelt stammt, aus dem Stylesheet los.

  • opacity -> CSS3 -> FF3.x, Opera 9.x, Safari, ...
  • -moz-opacity -> Mozilla-Eigenschaft für ältere Gecko-Browser wie z.b. FF2.x
  • filter:alpha(opacity=) -> MS-Filter

mfg Maik
 
Wegen einer einzelnen Grafik würde ich hier auch nicht extra Javascript bemühen, wenn die Formatierungssprache CSS dies genauso erledigen kann ;-)

Den hinzugewonnenen CSS-Schnipsel übernimmst du einfach in deine bestehende CSS-Datei.

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>
<title>newpage</title>

<!-- Achtung: Zwischen dem Attribut content und dem ersten doppelten Anführungszeichen fehlt bei dir das Gleichheitszeichen! -->
<meta http-equiv="Content-Type" content="text/html; charset= utf-8" />

<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css">
#Bild1 {
filter:alpha(opacity=50);
opacity:.5;
-moz-opacity:.5;
}
#Bild1:hover {
filter:alpha(opacity=100);
opacity:1;
-moz-opacity:1;
}
</style>

</head>

<body>
<div id="container">
	<div id="head1" style="height:100px;"> </div>
	<div id="media"><img src="./bilder/audio.png" height="490" id="Bild1" /></div>
	
<div id="subnavigation">
		<ul>
			<li><a href="feedback.html">feedback</a></li>
			<li><a href="contact.html">contact</a></li>
			<li><a href="impressum.html">impressum</a></li>
		</ul>
		
	</div>


<div id="navigation">
		<ul>
			<li><a href="home.html"><span>Start</span><span class="linkenglish">home</span></a></li>
			<li><a href="audio.html"><span>Medien</span><span class="linkenglish">media</span></a></li>
			<li><a href="home.html"><span>Flash</span><span class="linkenglish">flash</span></a></li>
			<li><a href="pics.html"><span>Bilder</span><span class="linkenglish">pics</span></a></li>
			<li><a href="video.html"><span>Videos</span><span class="linkenglish">videos</span></a></li>
		</ul>
	</div>
	
			
	<div id="content">
		<div class="sp1">
		<h1>Portfolio</h1>
		<p>In diesem Bereich  knnen Sie die Entwicklung der Arbeitstechniken der erstelleten Projekte begutachten. Verwendete Programme: Photoshop, Illustrator, Cinema4d, After Fx, Flash Real-Flow, InDesign.In diesem Bereich  knnen Sie die Entwicklung der Arbeitstechniken der erstelleten Projekte</p>
			</div>
		
		<div class="sp2">
		<h2></h2>
		<p>In diesem Bereich  knnen Sie die Entwicklung der Arbeitstechniken der erstelleten Projekte begutachten. Verwendete Programme: Photoshop, Illustrator, Cinema4d, After Fx, Flash Real-Flow, InDesign.In diesem Bereich  knnen Sie die Entwicklung der Arbeitstechniken der erstelleten Projekte</p>
			</div>
		
		<div class="sp3">
		<h2></h2>
		<p>In diesem Bereich  knnen Sie die Entwicklung der Arbeitstechniken der erstelleten Projekte begutachten. Verwendete Programme: Photoshop, Illustrator, Cinema4d, After Fx, Flash Real-Flow, InDesign.In diesem Bereich  knnen Sie die Entwicklung der Arbeitstechniken der erstelleten Projekte</p>
			</div>	
	
		</div>
</div>
	
</body>
</html>


mfg Maik
 
Dank dir - wieder was dazu gelernt - mir ging es aber vom Ding her fast weniger um den effekt als mal erfolgreich js einzubinden!

Tja hat wohl nicht sollen sein :(
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück