Image fade in/fade out on hover [+rep] [Archive]

Holofoil

29-09-2008, 08:44 PM

Hi, I'd like to know how to do what this guy's done on his website. I just found it on the net and liked it.

http://www.dotaudesigns.com/

click on Photoshop on the menu bar

When you hover over the images they fade in or whatever

How is this done? I have dreamweaver if anyone knows how to do it like that, otherwise the coding would help :]

Thanks

Excellent2

29-09-2008, 08:52 PM

Meti

30-09-2008, 01:26 PM

Yh. You could copy the code, then download the files, example if the file name is javascript.js, it should probably like:
http://www.dotaudesigns.com/javascript.js

Then use the code Lucas gave you ;)

But remember!!: They could of done the script theirself, and therefore you might don't have the rights to use it without permission from them.

L?KE

30-09-2008, 03:15 PM

There is nothing stating that the code cannot be used and besides it is hardly anything and not worth their while making a fuss over.

Jme

02-10-2008, 06:59 PM

There is nothing stating that the code cannot be used and besides it is hardly anything and not worth their while making a fuss over.

Creative commons :)

L?KE

03-10-2008, 05:04 PM

Lol I guess.
and tbh, who's gona find it on his site :P:rolleyes:

Holofoil

04-10-2008, 07:58 PM

thanks everyone

Holofoil

04-10-2008, 08:42 PM

Hi again, sorry for dp, I saved that code, and it doesn't do the fade in thing, it just shows the images as they are and doesnt change when i hover over them :S

iUnknown

04-10-2008, 09:12 PM

You have to save the .js files that it uses also.

Holofoil

05-10-2008, 05:33 PM

You have to save the .js files that it uses also.

how can i do that?

iUnknown

17-10-2008, 04:49 PM

Make a new .html file and put this as it's contents:

<script type="text/javascript" src="slimbox/mootools.js"></script>
<script type="text/javascript" src="slimbox/slimbox.js"></script>
<script type="text/javascript">
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.sty le.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>

</head>

<body>
<div class="section clearfix">
<p class="txt">
<span class="underline">photoshop</span><br />

<a href="http://dotaudesigns.com/photoshop/full/vintage.jpg" rel="lightbox[photoshop]" title="Vintage"/><img src="http://dotaudesigns.com/photoshop/thumb/vintage.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/pokerpeak.jpg" rel="lightbox[photoshop]" title="Website Banner Concept"/><img src="http://dotaudesigns.com/photoshop/thumb/pokerpeak.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/colourcloud.jpg" rel="lightbox[photoshop]" title="Clouds of Colour"/><img src="http://dotaudesigns.com/photoshop/thumb/colourcloud.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/lost in the wind.jpg" rel="lightbox[photoshop]" title="Lost in the Wind"/><img src="http://dotaudesigns.com/photoshop/thumb/lost in the wind.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/bleak.jpg" rel="lightbox[photoshop]" title="Bleak"/><img src="http://dotaudesigns.com/photoshop/thumb/bleak.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a><br />
<a href="http://dotaudesigns.com/photoshop/full/darkness.jpg" rel="lightbox[photoshop]" title="Darkness"/><img src="http://dotaudesigns.com/photoshop/thumb/darkness.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/urban landscape.jpg" rel="lightbox[photoshop]" title="Urban Landscape"/><img src="http://dotaudesigns.com/photoshop/thumb/urban landscape.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/heavens-above.jpg" rel="lightbox[photoshop]" title="Heavens Above"/><img src="http://dotaudesigns.com/photoshop/thumb/heavens-above.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/urban jungle.jpg" rel="lightbox[photoshop]" title="Urban Elephant"/><img src="http://dotaudesigns.com/photoshop/thumb/urban jungle.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/sand-boarder.jpg" rel="lightbox[photoshop]" title="Sand Boarder"/><img src="http://dotaudesigns.com/photoshop/thumb/sand-boarder.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a><br />
<a href="http://dotaudesigns.com/photoshop/full/quad shoe.gif" rel="lightbox[photoshop]" title="BBall Shoes - Spraypaint, Charcoal"/><img src="http://dotaudesigns.com/photoshop/thumb/quad shoe.gif" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/heavens.jpg" rel="lightbox[photoshop]" title="Castle in the Sky"/><img src="http://dotaudesigns.com/photoshop/thumb/heavens.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/Aussie-Desert.jpg" rel="lightbox[photoshop]" title="Aussie Desert"/><img src="http://dotaudesigns.com/photoshop/thumb/Aussie-Desert.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/slack attack.jpg" rel="lightbox[photoshop]" title="Mellow"/><img src="http://dotaudesigns.com/photoshop/thumb/slack attack.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/digital-image.gif" rel="lightbox[photoshop]" title="Federation Square"/><img src="http://dotaudesigns.com/photoshop/thumb/digital-image.gif" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a><br />
<a href="http://dotaudesigns.com/photoshop/full/clone tim.jpg" rel="lightbox[photoshop]" title="Tim - Clone"/><img src="http://dotaudesigns.com/photoshop/thumb/clone tim.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/clone stu.jpg" rel="lightbox[photoshop]" title="Stu - Clone"/><img src="http://dotaudesigns.com/photoshop/thumb/clone stu.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/at peace.jpg" rel="lightbox[photoshop]"title="At Peace with the World" /><img src="http://dotaudesigns.com/photoshop/thumb/at peace.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/question.jpg" rel="lightbox[photoshop]" title="What Could it be"/><img src="http://dotaudesigns.com/photoshop/thumb/question.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/angel.jpg" rel="lightbox[photoshop]" title="Imagination"/><img src="http://dotaudesigns.com/photoshop/thumb/angel.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a><br />
<a href="http://dotaudesigns.com/photoshop/full/moon.jpg" rel="lightbox[photoshop]" title="From the Moon"/><img src="http://dotaudesigns.com/photoshop/thumb/moon.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/dark secrets.jpg" rel="lightbox[photoshop]" title="Dark Secrets"/><img src="http://dotaudesigns.com/photoshop/thumb/dark secrets.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/roxy.gif" rel="lightbox[photoshop]" title="Roxy"/><img src="http://dotaudesigns.com/photoshop/thumb/roxy.gif" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/halloween.jpg" rel="lightbox[photoshop]" title="Halloween"/><img src="http://dotaudesigns.com/photoshop/thumb/halloween.jpg" width="63" height="63" border="0" class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)"/></a>
</div></div>

</div> 
</div> 
</p>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-2362132-1";urchinTracker();</script>
</body>
</html>Then go to:

http://www.dotaudesigns.com/js/effects.js
http://www.dotaudesigns.com/js/prototype.js
http://www.dotaudesigns.com/js/scriptaculous.js

For each one, press file > save as and save it to your computer. Where you created the HTML file, make a new folder and called it js - then upload those 3 files to it.

Voila, view the HTML file and edit out the bits you dont want.

Edit: Also download the following files the same way as the earlier ones:

http://www.dotaudesigns.com/slimbox/mootools.js
http://www.dotaudesigns.com/slimbox/mootools.v1.11.js
http://www.dotaudesigns.com/slimbox/slimbox.css
http://www.dotaudesigns.com/slimbox/slimbox.js

And this time create a new folder where you create the html file called slimbox and upload those files to that.

Holofoil

17-10-2008, 05:45 PM

Make a new .html file and put this as it's contents:

<script type="text/javascript" src="slimbox/mootools.js"></script>
<script type="text/javascript" src="slimbox/slimbox.js"></script>
<script type="text/javascript">
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.sty le.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>

</head>

<body>
<div class="section clearfix">
<p class="txt">
<span class="underline">photoshop</span><br />

<a href="http://dotaudesigns.com/photoshop/full/vintage.jpg" rel="lightbox[photoshop]" title="Vintage"/><img src="http://dotaudesigns.com/photoshop/thumb/vintage.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/pokerpeak.jpg" rel="lightbox[photoshop]" title="Website Banner Concept"/><img src="http://dotaudesigns.com/photoshop/thumb/pokerpeak.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/colourcloud.jpg" rel="lightbox[photoshop]" title="Clouds of Colour"/><img src="http://dotaudesigns.com/photoshop/thumb/colourcloud.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/lost in the wind.jpg" rel="lightbox[photoshop]" title="Lost in the Wind"/><img src="http://dotaudesigns.com/photoshop/thumb/lost in the wind.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/bleak.jpg" rel="lightbox[photoshop]" title="Bleak"/><img src="http://dotaudesigns.com/photoshop/thumb/bleak.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a><br />
<a href="http://dotaudesigns.com/photoshop/full/darkness.jpg" rel="lightbox[photoshop]" title="Darkness"/><img src="http://dotaudesigns.com/photoshop/thumb/darkness.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/urban landscape.jpg" rel="lightbox[photoshop]" title="Urban Landscape"/><img src="http://dotaudesigns.com/photoshop/thumb/urban landscape.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/heavens-above.jpg" rel="lightbox[photoshop]" title="Heavens Above"/><img src="http://dotaudesigns.com/photoshop/thumb/heavens-above.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/urban jungle.jpg" rel="lightbox[photoshop]" title="Urban Elephant"/><img src="http://dotaudesigns.com/photoshop/thumb/urban jungle.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/sand-boarder.jpg" rel="lightbox[photoshop]" title="Sand Boarder"/><img src="http://dotaudesigns.com/photoshop/thumb/sand-boarder.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a><br />
<a href="http://dotaudesigns.com/photoshop/full/quad shoe.gif" rel="lightbox[photoshop]" title="BBall Shoes - Spraypaint, Charcoal"/><img src="http://dotaudesigns.com/photoshop/thumb/quad shoe.gif" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/heavens.jpg" rel="lightbox[photoshop]" title="Castle in the Sky"/><img src="http://dotaudesigns.com/photoshop/thumb/heavens.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/Aussie-Desert.jpg" rel="lightbox[photoshop]" title="Aussie Desert"/><img src="http://dotaudesigns.com/photoshop/thumb/Aussie-Desert.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/slack attack.jpg" rel="lightbox[photoshop]" title="Mellow"/><img src="http://dotaudesigns.com/photoshop/thumb/slack attack.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/digital-image.gif" rel="lightbox[photoshop]" title="Federation Square"/><img src="http://dotaudesigns.com/photoshop/thumb/digital-image.gif" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a><br />
<a href="http://dotaudesigns.com/photoshop/full/clone tim.jpg" rel="lightbox[photoshop]" title="Tim - Clone"/><img src="http://dotaudesigns.com/photoshop/thumb/clone tim.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/clone stu.jpg" rel="lightbox[photoshop]" title="Stu - Clone"/><img src="http://dotaudesigns.com/photoshop/thumb/clone stu.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/at peace.jpg" rel="lightbox[photoshop]"title="At Peace with the World" /><img src="http://dotaudesigns.com/photoshop/thumb/at peace.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/question.jpg" rel="lightbox[photoshop]" title="What Could it be"/><img src="http://dotaudesigns.com/photoshop/thumb/question.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/angel.jpg" rel="lightbox[photoshop]" title="Imagination"/><img src="http://dotaudesigns.com/photoshop/thumb/angel.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a><br />
<a href="http://dotaudesigns.com/photoshop/full/moon.jpg" rel="lightbox[photoshop]" title="From the Moon"/><img src="http://dotaudesigns.com/photoshop/thumb/moon.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/dark secrets.jpg" rel="lightbox[photoshop]" title="Dark Secrets"/><img src="http://dotaudesigns.com/photoshop/thumb/dark secrets.jpg" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/roxy.gif" rel="lightbox[photoshop]" title="Roxy"/><img src="http://dotaudesigns.com/photoshop/thumb/roxy.gif" width="63" height="63" border="0" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"/></a>
<a href="http://dotaudesigns.com/photoshop/full/halloween.jpg" rel="lightbox[photoshop]" title="Halloween"/><img src="http://dotaudesigns.com/photoshop/thumb/halloween.jpg" width="63" height="63" border="0" class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)"/></a>
</div></div>

</div> 
</div> 
</p>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-2362132-1";urchinTracker();</script>
</body>
</html>Then go to:

http://www.dotaudesigns.com/js/effects.js
http://www.dotaudesigns.com/js/prototype.js
http://www.dotaudesigns.com/js/scriptaculous.js

For each one, press file > save as and save it to your computer. Where you created the HTML file, make a new folder and called it js - then upload those 3 files to it.

Voila, view the HTML file and edit out the bits you dont want.

Edit: Also download the following files the same way as the earlier ones:

http://www.dotaudesigns.com/slimbox/mootools.js
http://www.dotaudesigns.com/slimbox/mootools.v1.11.js
http://www.dotaudesigns.com/slimbox/slimbox.css
http://www.dotaudesigns.com/slimbox/slimbox.js

And this time create a new folder where you create the html file called slimbox and upload those files to that.

I've done everything you said but it's not working :( The images are just like they'd be usually...

Holofoil

17-10-2008, 07:30 PM

Ok, I've done what you guys told me to do.... but I've ended up with this:

http://www.freewebs.com/sketchnet/fadeinout.html (http://www.freewebs.com/sketchnet/fadeinout.html)
The images are all like normal, and then when i hover over them they fade in, then fade out when the mouse goes off them. So I can hover my mouse over all of them, and it goes to how I want it. But how do I make them all faded out to start with?
So I have no idea why it happens....