Help - Search - Members - Calendar
Full Version: Hovers & Plugs
Forums > Resource Center > Webmasters' Corner > Resolved Topics
bigtrey90
If you go to this page, and scroll down to the left side of the page, their is a description about the user with their picture called "REINE". When you hover over the image link it lights up slowly and I wanted to know the code so I can do that for my website cause it looks really neat l0l.



Also with each personal blog/website, I have seen plugs where the user has different people's websites I guess as thank you's but idk so I was wondering what the plugs meant
freeflow
The only way you can have plugs that come automatically is if you get a blogging program. According to your last few topics you chose haloscan. If youw ant to use haloscan and have plugs you have to add the plugs one by one.


For the image you can try this: http://xoxmariah.com/wp-content/tuts/fadedimagestut.php
Basically thats kind of what your looking for. Only problem is it doesn't work in all browsers. But oh well.
bigtrey90
thanks
talcumpowder
If you are worried about cross-browser compatibility (which you should be), the actual code they're using is this:
CODE
<script type="text/javascript">

/***********************************************
* Gradual Highlight image script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>
And then, for the image in question, you'd use this:
CODE
<img src="http://" title="alt text" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)" align="left">
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.