Mit CSS "transparenten Schein" auf Tabellen-Zelle

derchris

Hallo,

habe eine Grafik (gesliced) für eine Webseite, welche in einer Tabelle dargestellt wird. Allerdings habe ich keine zweiten Bilder für das Navi als Mouseover, und würde hier gerne was mit CSS machen.

Ich habe mir vorgestellt, dass wenn einer mit der Maus über einen Navi-Button (Grafik in einer Tabellen-Zelle) fährt, hier eine Art "transparenter Schein" drübergeworfen wird, aber nur auf die aktuelle Zelle.

Ist das irgendwie machbar.

Hier ein Auszug des Codes (vom Navi):

Code

<tr>
		<td>
			[img]images/v1_forum_05.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_06.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_07.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_08.gif[/img]</td>
	</tr>


usw.

Alles anzeigen

Danke und gruß
Chris

webcool

Ja das ist machbar das verwende ich au auf meiner seite

es ist ab css 3 verfügbar

es ist aber nicht valide um ein valides css zu haben solltest du diese eigenschaft mit dem style attribut einbinden !

für Mozilla usw.

style="opacity:0.5;" <-- 1 keine Transparenz 0.0 totale transparenz

für Internet Explorer :

style="filter:alpha(opacity=50);" <-- 100 keine Transparenz 0 totale transparenz

der rest mit JavaScript und onmouseover sollte klar sein, wenn nicht Fragen !

ach ja man kann mit Hilfe von JS die Transparenz auch ein und ausblenden lassen, nur so als Tip !

MFG
WebCool

derchris

webcool
Erstmal vielen Dank für die Antwort.
Habe leider damit noch nie was gemacht, wenn du mir nen Beispiel schicken könntest wie/wo ich was einbauen muss in das html-Gerüst, wäre ich dir sehr dankbar.

Gruß
Chris

webcool

Die Frage ist möchtest du das diese Image beim onmouseout transparent ist und nur ein bisschen sichtbar ist und beim überfahren mit der Maus dann keine Transparenz mehr hat oder möchtest du die ausgrauen solange man sie nicht makiert oder mit der Maus berührt ?

derchris

Also ich möchte, das der User sieht/erkennt, wenn er mit der Maus über einem Link ist und zwar solange, bis er diesen Button (das Bild) anklickt.
Wie auch quasi bei einem Mouseover mit einem 2. Bild! Es würde auch langen, wenn ein Rahmen ausenrum gezogen wird, wenn man über das Link-Bild mit der Maus fährt.

Aber sowas wäre auch cool, das es nur ein bischen transparent ist beim onmouseout und beim drüber fahren dann keine Transparenz mehr hat, das wäre genial, ja

webcool

ich würde es lieber ausgrauen aber nagut ist ja deine sache

Code

!! LÖSUNG WEITER UNTEN !!

Das müsste funktionieren hab es noch nicht getestet !

Wenn du XHTML benutzt muss du statt  das //]]>
eintragen damit es valide bleibt und es ist darauf zu achten das du nicht die gleichen id`s hast das ist 1. nicht valide und 2. weiss das script dann nicht welche Image er bearbeiten soll !

derchris

Hm, bekomme es irgendwie nicht hin, dann zeigt er mir garkein Bild mehr an.
Vielleicht werde ich doch nen 2. Button/Bild erstellen und nen normalen Rollover-Effekt machen.

Trotzdem Danke für deine Bemühungen.

webcool

zeig doch mal die seite und gib nicht auf !

das klppt schon

derchris

Bist aber hartnäckig, aber find ich ok
Also hier mal der Code:

HTML

<html>
<head>
<title>v1_forum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">




<table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			[img]images/v1_forum_01.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_02.gif[/img]</td>
		<td rowspan="12" style="background-image: url(images/v1_forum_03.gif);" width="657">
                 <iframe src="test.html" name="content" allowtransparency="true" frameborder="0" cellpadding="0" width="650" height="533"></iframe></td>




		<td rowspan="12">
			[img]images/v1_forum_04.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_05.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_06.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_07.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_08.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_09.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_10.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_11.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_12.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_13.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_14.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/v1_forum_15.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="3">
			[img]images/v1_forum_16.gif[/img]</td>
	</tr>
</table>


</body>
</html>

Alles anzeigen

Die Bilder ..05 bis ...14 sind die Links-Button in der Navi-Leiste.

derchris

webcool
Und, haste ne Lösung hierfür bzw kannst mir den CSS-Teil, den ich bräuchte in den Code mal mit reinschreiben, wie du denkst, dass es funktionieren sollte?

Wäre echt super.

webcool

hi ich habe eine andere Lösung gefunden eine JavaScript unabhängige die besser ist ! den nicht jeder hat ja JavaScript aktiviert !

wir machen das mal lieber mit css hätte ich au gleich drauf kommen können

das kommt in den head bereich

Code

<style type="text/css">
<!--
.effekt {
	filter:alpha(opacity=30);
	opacity:0.3;
}
a:hover .effekt {
	filter:alpha(opacity=100);
	opacity:1;
}
//-->
</style>

Alles anzeigen

und die bilder müssen dann so ausgezeichnet werden ! :

Code

<tr>
      <td>
         [url='die adresse'][img]images/v1_forum_05.gif[/img][/url]</td>
   </tr>

und so hast du ein menü wo die bilder transparent sind und wenn man mit der maus drüber geht sind sie es nicht mehr

das geht nur wenn der img-Tag in einen a-Tag umschlossen ist !

hier ist ein beilspiel :
http://webcool.ordana.net/s.htm

derchris

webcool
Hey super, vielen Dank dir, funzt 1a und auch danke für die sehr schnelle Antwort (wie eigentlich immer hier im Forum)
Echt spitze, bis zur nächsten "blöden" Frage

Gruß
Chris

PS: Gibts ne Seite, wo man sowas über CSS lernen kann (außer css4you), wo solche Beispiele auch einsehbar sind und so?

webcool

öhm das habe ich mal vor einen Jahr bei css4you gelernt ich hatte damals den workshop gemacht hier
http://www.css4you.de/wscss/index.html

die anwendung die ich benutzt habe findest du hier :
http://www.css4you.de/wscss/css04.html#moreselector

ganz nach unten scrollen!

derchris

webcool
Nochmals vielen Dank, werde es mir mal anschauen.

derchris

webcool
Kann man die Stärke des "Schleiers" eigentlich mit den zahelnwerten bestimmen, oder ist das fix. Wenn ja, welche Möglichkeiten/Werte gibt es da?

Danke.

webcool

Zitat von webcool

für Mozilla usw.

style="opacity:0.5;" <-- 1 keine Transparenz 0.0 totale transparenz
, du kannst also ein Wert zwischen 0.0 und 1 verwenden

für Internet Explorer :

style="filter:alpha(opacity=50);" <-- 100 keine Transparenz 0 totale transparenz, du kannst also ein Wert zwischen 0 und 100 verwenden

derchris

Die Antwort-Geschwindigkeit, "der Hammer"
Alles klar, nochmals vielen Dank.

derchris

Hallo,

kann ich diese Funktion auch grad "andersrum" verwenden, also dass der "transparente Schein" erst auf den Linkbutton fällt, wenn ich mit der Maus drüber geh? Wie müsste dann der Code für CSS lauten?

Vielen Dank.

derchris

Hat sich erledigt, war nen blöder Denkfehler, sorry.

Tags