PDA

Click to See Complete Forum and Search --> : Mousover Efects!!!

BennieBlanco
03-20-2004, 07:54 PM
I need a code for a hyperlink mousover efect
It should change the colore transition slow when you go over and slowly come back when you leave

here is a link to a site thet alredy have it . http://www.2beat.com/
Daniel T
03-20-2004, 09:08 PM
Well, i don't see what you are describing anywhere on that site, but if I understand your description correctly, I'd say this kind of thing is best done with Flash. Do you have Flash development software?
-Dan
BennieBlanco
03-20-2004, 09:23 PM
[Sorry here is exact position

here is a link to a site thet alredy have it . http://www.2beat.com/
look in the box "TOP LOCATION"

go over this ::mehr infos


Thanks
Daniel T
03-20-2004, 09:31 PM
Javascript:<script type="text/javascript">
startColor = "#FFFFFF"; // initial link color
endColor = "#FF9900"; // final link color


stepIn = 10; // delay when fading in
stepOut = 20; // 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>
That's the Javascript for it. I didn't see any special event-handlers to initialize them, so just try that out and see what happens.
-Dan

**EDIT**
This function is IE-specific, meaning it will only work in Internet Explorer:(
BennieBlanco
03-20-2004, 10:08 PM
I am having trouble placin the code
what is the tag?
Daniel T
03-21-2004, 12:31 AM
Ok, I've edited the code I posted above. Place that somewhere between <head> and </head>. Then, place the following code in your body, to make the link:
<a href="foo.html">Bar</a>
Let me know if it works!
-Dan
BennieBlanco
03-21-2004, 02:23 AM
Thank's Daniel

I already find the way and the fade.js

check out my site now

www.nocniagenti.com/index
Daniel T
03-21-2004, 12:37 PM
Originally posted by BennieBlanco
check out my site now

www.nocniagenti.com/index
Very nice site. Though, it would look even better from a web developers point of view(by this, I mean, the source code), had it not used tables for layout:(. Also, why is half of it in English and half of it in <insert="some-unknown-foreign-language" /> Also: © 2005 Nocni Agenti.com Team
Ok, I'm not sure, but last time I checked, my calendar said 2004:p
-Dan
BennieBlanco
03-21-2004, 02:16 PM
O
the language is Yugoslavian the site is not done jet
this is just test faze
I am modifiying all modules firs
James L.
03-21-2004, 04:32 PM
I like the design, but I would lose all the flashy crap. I counted 6 different spots where there were different animations (ads, clocks, etc) going on... very distracting when trying to read the page.

...just my 2 cents,

James
BennieBlanco
03-21-2004, 04:59 PM
I think you are righ I will take a look at it

thanks'
Daniel T
03-21-2004, 06:01 PM
Making the top banner image a still image, rather tthan an animated GIF would be a BIG improvement!
-Dan
Conor
03-21-2004, 08:17 PM
o no its not valid

http://validator.w3.org/check#result