| opacity und css links verbinden |
Raising
Pixelschubser
Beiträge: 3
|
Also ich hab folgendes Problem.
Ich habe auf so einigen seiten bereits gesehen, dass wenn man auf einen normalen textlink geht dass sich nicht nur die farbe ändert sondern, dass sie langsam ineinander übergehen, aus dem quelltext war zu erkennen, dass der befehl "opacity" benutzt wird, ich hoffe ich lieg da richtig. Könnt ihr mir weiter helfen, also ich will nur dass der lin meinetwegen von schwarz zu weiss nicht blitzartig sondern langsam ineinander übergeht.
Viel ahnung habe ich von css und javascript nicht.
| | Profil
E-Mail
Editieren
Zitieren
|
Raising
Pixelschubser
Beiträge: 3
|
So ich hab die lösung:
in "<head></head>"
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101: | <script>
<!--
startColor = "#000000"; // initial link color
endColor = "#ffffff"; // final link color
stepIn = 35; // delay when fading in
stepOut = 35; // delay when fading out
autoFade = true;
sloppyClass = false;
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
document.onmouseover = domouseover;
document.onmouseout = domouseout;
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}
function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}
function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];
if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
}
for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}
//-->
</script> |
| | Profil
E-Mail
Editieren
Zitieren
|
gezeichnet
Fachidiot
Beiträge: 109
|
HI
kannst du mir sagen, ob das funzt?
wenn ja, bei welchen Browsern, alle interpretieren die opacity nicht, OK?
greetings
gezeichnet
---
frag ned bled und schau moi do:
http://www.spezialedition.com
| | Profil
E-Mail
Website
Editieren
Zitieren
|
Raising
Pixelschubser
Beiträge: 3
|
Ja es funktioniert.
Ich habs probiert. Ich weis jedoch nicht bei welchen browsern. Ich war selber froh, als ich es gefunden habe!
mein script siet folgendermaßen aus:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125: | <html>
<head>
<STYLE type=text/css>
BODY
A:link {
COLOR: #ffffff; TEXT-DECORATION: none
}
A:active {
COLOR: #ffffff; TEXT-DECORATION: none
}
A:visited {
COLOR: #ffffff; TEXT-DECORATION: none
}
A:hover {
COLOR: #000000; TEXT-DECORATION: none
}
</STYLE>
<script>
<!--
startColor = "#ffffff";// initial link color
endColor = "#000000";// final link color
stepIn = 35; // delay when fading in
stepOut = 35; // delay when fading out
autoFade = true;
sloppyClass = false;
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
document.onmouseover = domouseover;
document.onmouseout = domouseout;
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}
function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}
function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];
if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
}
for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}
//-->
</script>
</head>
<body bgcolor="c0c0c0">
<a href="#">Test Link</a>
</body>
</html> |
Mit dem css befehl vorher, wollte ich eigentlich nur, dass der unterstrichene weg ist.
Mit: "startColor" legst du den wert fest der am anfang erscheinen soll
"endColor" legst du den wert fest der am ende erscheinen soll
Mit: "stepIn" legst du die geschwindigkeit fest, wie schnell sich die farbe beim mouseover verändert
"stepOut" legst du die geschwindigkeit fest, wie schnell sich die farbe beim mouseout verändert
Tja weis nicht wie ich weiter helfen kann, sry
| | Profil
E-Mail
Editieren
Zitieren
|
sondermuelli
Quasselstrippe
Beiträge: 369
|
das dürfte wohl nur im internet explorer funktionieren.
---
wer hilft mir beim geschirr spülen?
| | Profil
E-Mail
Website
Editieren
Zitieren
|
gezeichnet
Fachidiot
Beiträge: 109
|
THX, Raising
wollte nur wissen in welchen Browsern das funktioniert...
Denke sondermuelli hat recht, mal probieren.
greetings
gezeichnet
---
frag ned bled und schau moi do:
http://www.spezialedition.com
| | Profil
E-Mail
Website
Editieren
Zitieren
|
c3o
Posting-Schinder
Beiträge: 586
|
So ist es, das ist nur für IE geschrieben -- grundloserweise, weil das nämlich überhaupt nix mit opacity zu tun hat, sondern ganz einfach Farbzwischenwerte rechnet.
Übrigens, Transparenz funktioniert in
IE >5.5: filter:alpha(opacity=50) (Objekt muss definierte width oder height haben)
Mozilla <1.7: -moz-opacity:0.5
Safari <1.2: color:rgba(255, 255, 255, 0.5) oder -khtml-opacity:0.5
Mozilla >=1.7, Safari >= 1.2: opacity:0.5
-- also außer Opera in allen aktuellen Browsern. (Anwendungsbeispiel, kombiniert mit alphatransparenten PNGs: http://www.ost-feinguss.at)
| | Profil
E-Mail
Website
Editieren
Zitieren
| |
