pApple TUT

Also um die Werbung zu platzieren braucht ihr erst mals diesen Code:
 

  

td[height="102"] { position: absolute; left: 50%; top: 5 px; margin-left: -370px;}

 

 

Erklärung:

top = Abstand zum oberen Rand (Größe in px)

margin-left = Abstand zu Linken Rand (Größe in px)

Mehr müsst ihr in diesem MOment noch nicht wissen.
 

Und weiter geht es mit Schritt 2

Nun kommen ein paar Codeschnipsel zu dem jetzigen Code hinzu.
 

td[height="102"] { filter: alpha(opacity=3); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; position: absolute; left: 50%; top: 5px; margin-left: -370px;}

 

Erklärung:

Was nun hinzu kam war die Transparenz der Werbung diese wird mit :

filter: alpha(opacity=3);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;

eingestellt momentan ist sie auf 30% eingestellt. Ihr könnt sie editieren in dem ihr die 3 (0.3) durch z.B. eine 6 ersetzt dan ist die Werbung zu 60% Transparent.
 

Und wieder ein Schritt vollbracht

Nun geht es an Schritt 3 und jetzt kommt langsam der schwierige Teil
 

Der Hovereffekt
 

Dazu benötigt ihr dieses Codeschipsel hover nun wird dies noch in den Code eingefügt:
 

 

td[height="102"] { filter: alpha(opacity=3); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; position: absolute; left: 50%; top:-20px; margin-left: -370px;} td[height="102"]:hover { filter: alpha(opacity=0.9); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; position: absolute; left: 50%; top: 5px; margin-left: -370px;}

 

Erklärung:

Wenn ihr euch alles von davor gemerkt habt dann wisst ihr jetzt zum Beispiel das mit dem Hovereffekt die transparenz geändert wird.

Hier noch mal der Vergleich:


 td[height="102"] {
filter: alpha(opacity=3);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
position: absolute;
left: 50%;
top:-20px;
margin-left: -370px;}

 td[height="102"]:hover {
filter: alpha(opacity=0.9);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
position: absolute;
left: 50%;
top: 5px;
margin-left: -370px;}

Hier sieht man nun hoffe ich gut das die Trasparenz von 30 % auf 90 % seigt sobald man mit der maus auf die Werbung kommt.
 

Nun kann man auch die Position noch änder das die Werbung z.B. oben nur zum Teil sichtbar ist und sie dan nach unten ausklappt.

Genau dies wollen wir nun versuchen.
 

td[height="102"] { filter: alpha(opacity=3); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; position: absolute; left: 50%; top:-20px; margin-left: -370px; position:absolute;} td[height="102"]:hover { filter: alpha(opacity=9); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; position: absolute; left: 50%; top: 5px; margin-left: -370px;}

 

Erklärung:

Beeinflussen kann man das in dem man einfach den top Wert ändert und das sieht dann im vergleich so aus:


 td[height="102"] {
filter: alpha(opacity=3);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
position: absolute;
left: 50%;
top:-20px;
margin-left: -370px;
position:absolute;}

 td[height="102"]:hover {
filter: alpha(opacity=7.5);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
position: absolute;
left: 50%;
top: 5px;
margin-left: -370px;
position:absolute;}

Ich denke man kann dies klar erkennen.
 

Man kann auch den margin-left Wert ändern so das die webung von links ins Bild kommt.