Webkoof

When you do not have an index.html (or index.php) in your folder, then people can see the listing of all the files by typing the URL of that folder. So, if the server does not deny it by default, an user can see the content of the folder.

We can use htaccess file to prevent it.

Step 1.
Create a file name .htaccess in your folder. (If you already have one, open it and edit)
Step 2.
To ignore all file listing, Write: IndexIgnore *
To ignore special file listings, Write: IndexIgnore *.zip *.gif
(The line above will list all files except the files having zip and gif as extension.

Sometimes, the opposite is required. That means, server denies the directory listing by default but you want to enable it for some reason. This can be achieved using htaccess as well.

Step 1.
Create a file name .htaccess in your folder. (If you already have one, open it and edit)
Step 2.
Write: Options +Indexes

The idea of this approach is following

1. Take two identical images: one colored and one grayscale.

2. Position them on exact same position. Grayscale image on top using CSS positioning and z-index.

<img src="gray.png" id="gray" 
       style=" position: absolute; top: 20px; left: 20px; z-index: 100">
<img src="color.png" id="color" 
       style=" position: absolute; top: 20px; left: 20px; z-index: 1">

3. Onmouseover event of the gray image, reduce its opacity to zero. It can be done by including following in the head section of the HTML page.

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {				
		$(this).find("img#gray").hover( function() {
			$(this).animate({ opacity: 0 }, 300);
                }, function(){
			$(this).animate({ opacity: 1 }, 300);
		});	
	});

I am using jquery here to animate the opacity change. The number “300″ indicated time of animation.

That’s it. We are done. Look at the demo here. (In the demo, I have separated the CSS, instead of inline styles)