Printable View
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
His HTML for that page (http://www.dotaudesigns.com/photoshop.html) is in the spoiler, check it.
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.
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 :)Quote:
Originally Posted by L?KE
Lol I guess.
and tbh, who's gona find it on his site :P:rolleyes:
thanks everyone
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
You have to save the .js files that it uses also.
how can i do that?Quote:
Originally Posted by iUnknown
Make a new .html file and put this as it's contents:
Then go to:Code:<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> <!-- end #center-in -->
</div> <!-- end #content-wrap -->
</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>
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...Quote:
Originally Posted by iUnknown
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
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....