Rainbow Link
Replies
I have this code
<script src="http://mrfrufru.com/rainbow.js">
/*
Rainbow Links Script- TAKANASHI Mizuki
For full source code, 100's more DHTML scripts, and TOS,
Visit http://www.dynamicdrive.com
*/
</script>
that I use on two of my sites, so when I mouse over links, there is a rainbow effect. How would I put this on my profile page so that the links on my profile page are the same way?
this is my profile page layout. I used one of the layouts on SubetaLodge, and I DID get permission to slightly modify it
Autumn Leaves
<style>body {background-color: ;background-image: url(http://www.subetalodge.org/images/graphics/profiles/autumn_leaves_profile.png); background-repeat:no-repeat;height:700px; width: 900px; }
{height:100% !important;}
;){kind=link}
{position:absolute; width:235px; left:2px; top:250px; height: 355px; text-align: left; overflow:hidden; } :hover {overflow:auto;} {position:absolute; width:232px; left:295px; top:250px; height: 355px; text-align: left; overflow:hidden;} :hover {overflow:auto;} {position:absolute; width:235px; left:577px; top:250px; height: 355px; text-align: left; overflow:hidden;} :hover {overflow:auto;} :hover {overflow:auto;}
body,html,div,table,td,tr,a{font-family: Times New Roman; font-size: 10px; color: ;align:left;} a:link,a:visited{color:;} a:hover{color: ; text-decoration:underline; background: url(http://img131.imageshack.us/img131/6821/glitter3zl.gif)}
.textbox {background-color:; font-size: 11px; color: ; border:1px;height: 120px !important; width:170px; text-align: left;} textarea:focus {background-color:; border:1px solid ;} .forminput{background-color: transparent; height:30px; width:200px !important; color: ; border:1px;height:10px; padding:20px;text-align: center !important;position:relative;top:-35px;left:-5px;}
{text-align:left;}
{display:none;} li, li, li {border-top: 0px solid; border-right: 0px solid; border-left: 0px solid; border-bottom: 0px solid; background-color: transparent;} .header {font-size: 10px; font-family: century gothic; text-align: right;font-weight:bold; color: ; background:none; border-bottom: 1px dashed ; letter-spacing:0px; width:auto; height:auto; text-transform: uppercase} {display:none;}
.wishlist_item, , td, td { vertical-align:top;} .sp-table img:hover, img:hover, img:hover, img:hover, img:hover, img:hover, img:hover {filter:alpha(opacity=90);opacity:0.9;} {display:none;}
img { height: 50px; width: 50px; border: 2px solid ; filter:alpha(opacity=70);opacity:0.7; }
img { border: 2px solid ; filter:alpha(opacity=70);opacity:0.7; } td+td img {width:15px; height:15px;border:none;}
img { height: 75px; width: 75px; border: 2px solid ; filter:alpha(opacity=70);opacity:0.7; } img { height: 50px; width: 50px; border: 2px solid ; filter:alpha(opacity=70);opacity:0.7; }
img { height: 50px; width: 50px; border: 2px solid ; filter:alpha(opacity=70);opacity:0.7; } img { height: 50px; width: 50px; border: 2px solid ; filter:alpha(opacity=70);opacity:0.7; } img {border: 1px solid ; } , , {display:none;}
body { background-repeat:no-repeat; }
{ background-color: transparent; }
,.comment_table,.header,.block,.info_block { background-image:url(''); }</style>
: Scripts don't work on Subeta profiles. What's the exact effect? Maybe I can try to recreate it with CSS...
Look here ^^
I can think of a terribly-not-subtle-at-all solution : make a gif of your link doing that rainbow effect. You "just" have to adjust it for each link.
Now I'm waiting for to give the clever solution XD
Oh oh oh oh I got an idea ! With CSS3 transition ? Add maybe 7 transitions with a different time set, for 7 colors ? Wouldn't that work ?
, :
Got it, with CSS3 animations. :3 You can see the effect here on a pet profile, but it should work for user profiles as well. Just use this <style>
rainbow {
0% {color: red!important;}
12.5% {color: orange!important;}
25% {color: yellow!important;}
37.5% {color: green!important;}
50% {color: blue!important;}
62.5% {color: indigo!important;}
75% {color: violet!important;}
87.5% {color: red!important;}
}
@-moz-keyframes rainbow { 0% {color: red!important;} 12.5% {color: orange!important;} 25% {color: yellow!important;} 37.5% {color: green!important;} 50% {color: blue!important;} 62.5% {color: indigo!important;} 75% {color: violet!important;} 87.5% {color: red!important;} }
@-webkit-keyframes rainbow { 0% {color: red!important;} 12.5% {color: orange!important;} 25% {color: yellow!important;} 37.5% {color: green!important;} 50% {color: blue!important;} 62.5% {color: indigo!important;} 75% {color: violet!important;} 87.5% {color: red!important;} }
a:hover {animation: rainbow 5s infinite; -moz-animation: rainbow 5s infinite; -webkit-animation: rainbow 5s infinite;} } </style> This works for all webkit browsers + firefox (so no IE support).
It might look mighty confusing, but it's rather easy. The three first @ things are the same each time, but simply with different prefixes (first is keyframes, second is -moz-keyframes and third is -webkit-keyframes). So if you change on function, simply copy-paste its contents into the other three. The last line calls the animation, tells how long it should take and how many times it should run (in this case infinitely).
The colours might be off, I simply used ROYGBIV names, but you can adjust them to the hexadecimal values of the colours that you want.
If you need more help with this, feel free to ping me! :]
YeahI knew you'd do it ! (I really need to have a look at CSS3 animations now that I updated my browser and am able to see them XD)