Using cyclic function in javascript

Recently I was working on a design for our client 'Your Tribute'. For this design, a slide show was required. One can find a number of slideshows on Internet, but the glitch with this one was it was having bullets related to each image and this slideshow could be paused by hovering over any of these bullets. You can have details by having a look at Your Tribute's website.

The difficulty here is that if user hovers over a bullet (or side tabs) then the respective slide should be displayed and once the user hovers-out of the bullet then the slide-show should resume.
After searching for long on Internet, I decided to write one jQuery plugin for this slideshow by myself.

While working on this I learnt the difference between setTimeout and setInterval. I also used the clearInterval to interrupt the time interval ion javascript.

Whenever we have to use recursive functions like this:


function recrFunc(){
.
.
setTimeout('recrFunc();', 10000);
.
.
}


...then it's better to use setInterval() function something like this:


timeoutid = setInterval('recrFunc();', 10000);
function recrFunc(){
...
}


... the use of setInterval function is that this time can be cleared anytime by using clearInterval() function like this:


clearInterval(timeoutid);


So, crux of the story is that if you have to call a function recursively after a specific time interval then use setInterval instead of setTimeout and if you have to call a function only once after pausing for a specific time period then use setTimeout

Bevel Images with only CSS

CSS method for adding a beveled effect to images like this:

CSS:

span.bevel {
position:relative;
width:200px; /*width of image*/
height:200px; /*height of image*/
display:block;
}
span.bevel span {
position:absolute;
left:0;
top:0;
display:block;
width:190px; /*width of image - 2(width of bevel*/
height:190px;/*height of image - 2(height of bevel)*/
border:5px solid;
border-color:#fff #000 #000 #fff;
filter:alpha(opacity=40);
opacity:0.4;
}



HTML:

<span class="beveled">
<img src="http://www.blogger.com/stormtroopers.jpg" alt="LegoStormtroopers" />
<span></span></span>
<!--Do NOT remove this extra span-->