[thelist] tip: IE filters used well

John Corry john at neoncowboy.com
Tue Dec 11 00:15:17 CST 2001


<tip>
When I saw this for the first time (earlier today), it was so cool I assumed
it must be Flash. It's not though, just one of those weird, non-standard
features built into the IE browser. I'm not sure which all versions do or
don't offer support for this, it works in my ie 5.5 but doesn't do anything
in NN 4.5. Anyway, it doesnt' matter since it only takes about 1K of code to
do.

http://www.mauiatvadventures.com/photos.php

The thumbnails on this page have have onmouseover/out attached to the <img>
tag. They also all have  <style> filter: alpha(opacity=80)</style> (I guess
you can either apply this inline or with a class from a global or document
stylesheet file).

Here's the script:
<script>
function high(which2)
{

theobject=which2
highlighting=setInterval("highlightit(theobject)",10)
}

function low(which2){

clearInterval(highlighting)
which2.filters.alpha.opacity=60
}

function highlightit(cur2){

if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearInterval(highlighting)
}
<script>

As you can see...it's pretty simple. Each thumbnail, on mouseover, passes
itself as an argument to the high() function. This function basically just
passes it to another function, highlightit(), which incrementally adjusts
the opacity style of the image up until it reaches 100%.

The effect is really smooth, alpha-transparency increase when you mouseover
the thumbnails. Gimmicky for sure, but also very eyecatching!

And its all just code! How cool!
</tip>

John Corry
Neon Cowboy Design
http://www.neoncowboy.com
T 808.572.8494	M 808.283.7063
email: john at neoncowboy.com
mobile: cellphone at neoncowboy.com





More information about the thelist mailing list