Unique mouseover Options

[Lorelai Gilmore]

I hope this is the right place to post a question about a specific mouseover effect...if not, I honestly am sorry.

I was just wondering if anyone knew a site that has cool kinds of mouseovers. I've been looking all over for this person's mouseover. Thanks in advance.

www.xanga.com/shellygurl2004

[*NatiMarie*]

Oh there's a topic about it at Topic. Hope that helps. bye!

[ObliviousAsian12...]

i was wondering if there was a mouseover [hover] and a different backround image would appear...that'd be cool

[puppylove54321]

umm go to blogrings.net i think they have mouse hover stuff that changes the color of the links iono ........

[xjjajeengx]

here are some::


hovers
xjjajeengx Posted on: Feb 6 2004, 6:58 PM

Replies: 0
Views: 0 i've noticed a lot of people ask for these. i posted these already, but o well.
hovers? erm...

QUOTE
<style>
a:hover
{border: HOW THICK YOU WANT IT I DID 1px TYPE OF LINE YOU WANT I USED solid #HEX CODE;
color: #FONT COLOR I USED 000000;
background-color: #BG COLOR I USED transparent;
cursor: THE TYPE OF CURSOR I USED e-resize;
text-transform: THE WAY YOU WANT YOUR TEXT TO APPEAR WHEN YOU HOVER OVER IT I DID lowercase;
letter-spacing: LETTER SPACING I USED 1px;
FONT-SIZE: YOUR FONT SIZE I USED 8pt;}
</style>




blur hover

QUOTE
<style>
a:hover, a:link, a:visited
{filter:blur; .alpha
{width: inherit; height: 1;
filter: alpha
(Opacity=100, FinishOpacity=20, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0);}
</style>





hover border

QUOTE
<style>
a:hover
{border: 1px solid #ANY COLOR YOU WANT IN A HEX CODE;}
</style>




underline, over line, etc

QUOTE
<style>
a:link
{text-decoration: line-through overline underline;}

a:hover
{text-decoration: overline underline;}

a:visited
{text-decoration: line-through;}
</style>




space out hover

QUOTE
<style type="text/css"><!-- a:hover{letter-spacing:5px} //--></style>




cursor change hover

QUOTE
<style type=text/css><!-- body{cursor:crosshair} //--></style>




can be changed with crosshair
hand
help
move
text
wait
n-resize
ne-resize
nw-resize
s-resize
se-resize
sw-resize
e-resize
w-resize


hover link goes upside down

QUOTE
<style type="text/css">
<!--
A:hover {filter: flipv}
-->
</style>




blur:

QUOTE
<style>
a:hover{filter: blur(add=0, direction=90, strength=10.5);}</style>




link fades hover

QUOTE
<style>

a:hover
{filter: blur(add=100, direction=180, strength=17.5); height: 0}

</style>




hover changes into other color slowly

QUOTE
<script language="JavaScript">
<!--

var fadeTo = "ffffff";

var fiBy = 5;

var foBy = 5;

var speed = 18;

var ignoreClass = "ignore";
var opera, ie, dom, x = 0, oc, fader, ocs = new Array();
if (navigator.userAgent.indexOf("Opera") != -1) opera = true
else if (document.all && !opera) ie = true
else if (!document.all && document.getElementById) dom = true;
function convertRGB(z)
{
var newfcS = "", splitter = "";
splitter = z.split(",");
splitter[0] = parseInt(splitter[0].substring(4, splitter[0].length));
splitter[1] = parseInt(splitter[1]);
splitter[2] = parseInt(splitter[2].substring(0, splitter[2].length-1));
for (var q = 0; q < 3; q++)
{
splitter[q] = splitter[q].toString(16);
if (splitter[q].length == 1) splitter[q] = "0" + splitter[q];
newfcS += splitter[q];
}
return newfcS;
}
function currentColour(index)
{
var temp, cc;
if (opera) cc = document.links[index].style.color
else if (ie) cc = document.links[index].currentStyle.color
else if (dom) cc = document.defaultView.getComputedStyle(document.links[index], '').getPropertyValue("color");
if (cc.length == 4 && cc.substring(0, 1) == "#")
{
temp = "";
for (var a = 0; a < 3; a++)
temp += cc.substring(a+1, a+2) + cc.substring(a+1, a+2);
cc = temp;
}
else if (cc.indexOf("rgb") != -1) cc = convertRGB(cc)
else if (cc.length == 7) cc = cc.substring(1, 7)
else cc = fadeTo;
return cc;
}

function convert2Dec(hex)
{
var rgb = new Array();
for (var u = 0; u < 3; u++)
rgb = parseInt(hex.substring(u*2, u*2+2), 16);
return rgb;
}
function newRGB(f, n, d)
{
var change;
if (d == 1) change = fiBy
else change = foBy;
for (var g = 0; g < 3; g++)
{
if (n[g] > f[g] && n[g] - change >= 0) n[g] -= change;
if (n[g] < f[g] && n[g] + change <= 255) n[g] += change;
}
return n;
}
function fade(index, d)
{
var fc, nc, temp = new Array(), finished = false;
nc = convert2Dec(currentColour(index));
if (d == 1) fc = convert2Dec(fadeTo)
else fc = convert2Dec(ocs[x]);
temp = convert2Dec(currentColour(index));
nc = newRGB(fc, nc, d);
if ((nc[0] == temp[0]) && (nc[1] == temp[1]) && (nc[2] == temp[2]))
finished = true;
if (!finished) document.links[x].style.color = "rgb(" + nc[0] + "," + nc[1] + "," + nc[2] + ")"
else clearInterval(fader);
}
function findLink(over)
{
if (document.layers) return;
if (fader)
{
clearInterval(fader);
document.links[x].style.color = "#" + ocs[x];
}
if (over && !this.id) this.id = over;
x = 0;
while (!(this.id == document.links[x].id) && (x < document.links.length))
x++;
if (this.id == document.links[x].id)
{
oc = currentColour(x);
fader = setInterval("fade(" + x + ", 1)", speed);
}
}
function clearFade()
{
if (document.layers) return;
if (fader) clearInterval(fader);
fader = setInterval("fade(" + x + ", 0)", speed);
}
function init()
{
for (var i = 0; i < document.links.length; i++)
{
ocs[i] = currentColour(i);
var currentOver = document.links[i].onmouseover;
var currentOut = document.links[i].onmouseout;
var ignoreIt = document.links[i].className == ignoreClass;
if (!ignoreIt) document.links[i].id = "link" + i;
if (!currentOver && !currentOut && !ignoreIt)
{
document.links[i].onmouseover = findLink;
document.links[i].onmouseout = clearFade;
}
}
}
if (opera || ie || dom) window.onload = init;
-->
</script>


you can change the speed and color.

creditz to soompi <3

[FranzKemmerich]

Do you mean how to change the color/text/etc. of the link when the mouse hovers over it? or the cursor?

You can get scripts for both of them at www.dynamicdrive.com That site is great.

[Smallbubba89]

you can also add gradient backgrounds for hovers:

CODE

<!-- begin code provided by createblog.com -->


<style type="txt/css">
a:hover {
progid:DXImageTransform.Microsoft.Gradient(gradientType=1,
startColorStr=#527BCE, endColorStr=#ffffff);
}


<!-- end code provided by createblog.com -->

image backgounds:

CODE

<!-- begin code provided by createblog.com -->

<style tyle="text/css">
a:hover {
color:0033CC;
background: URL(http://members.asianavenue.com/AA_cute_pic_4_u/dividestars.gif);

}</style>


<!-- end code provided by createblog.com -->

for other bg's you can make your own or google them. if you're real lazy try

http://members.asianavenue.com/AA_cute_pic_4_u