Dreamweaver: Fading Image Effect (Using Spry) - Tutorial

How to make images fade in when they load, are clicked or hovered on using Adobe Dreamweaver.

Website: http://www.tutsandtech.com

For web design, print design, brand design or illustration services, visit my site - http://www.jeremycassisi.com - Here you can view my work and contact me!

Category:

Education

Tags:

• tutorial
• dreamweaver
• spry
• effect
• fade
• images
• text
• links
• cs3
• cs4
• cs5
• hover
• rollover
• click
• appear
• grow
• shink
• javascript
• simple
• easy
• basic
• how to
• gallery
• photo
• picture
• adobe

[Xrocksfox]

thnx

[SonorSonicFan]

How would I get multiple images to work in a fade sequence? Any thoughts?

By the way, you videos are great.

[slicecbr]

Amazing...thanks for sharing! So simple but makes a huge difference when loading images.

[MrRocknost]

@bearcatnat Fortunately for me and unfortunately for anyone who read my below post, I realize now how stupid it was. Using the body tag at the bottom is definitely the easiest way to do all that. Still though, how hard would it have been to add the OnLoad feature right away to text without having to deal with screwing around with the body tag at the bottom? You don't have to ID images to get the OnLoad to work. And the other features such as onclick and mouseover still work, why not OnLoad?

[bearcatnat]

@MrRocknost This is a really bad idea. First of all, using "print screen" will not give you an editable image file. The text should be reset in Adobe Photoshop. Also, it is never a good idea to use an image as text, as this makes your webpage not indexable by the search engines and inaccessible to those who use screen readers (the blind or visually impaired). The only time you should use an image as text is for a logo or short phrase.

[kingadex]

I wanted to do a fade in/out but using several images. How can I do this? I want to avoid using flash if possible.

I will appreciate any respond

[MrRocknost]

Any tips on how to get the text to fade in? I have CS5 now and still can't get the text to fade in...no OnLoad function.

[MrRocknost]

@gigsywigsy45

I have DwCS4 as well and I ran into the same problem. You can get around it once all the details on the page are done. Add the fade in effect last. Hit print screen and paste the image in an image editor such as MS paint or photoshop. Crop the image around your text so that only the text is showing. Basically save the text as an image and then move it into your website file. The OnLoad function will appear for the "image" which is actually your text. Give it a try...

[xlive007]

*props*

[dillydon]

Thank You bro that helped a shit load