Animating images with Javascript

Warning: This is a really stupid web design trick. You are almost always better off using an animated GIF instead of relying on the browser to animate your image for you. The only excuse that makes this even marginally acceptable is that you might need the partial alpha transparency PNGs afford.

That said, it's really easy to create animations with Javascript's setInterval command:

<script type="text/javascript"><!-- setInterval(function() {animate('myElement');}, 1000); // change frames every 1000 ms function animate(id) { var elem = document.getElementById(id); var img = elem.style.backgroundImage; if (img == null) return; if (img.indexOf('images/image2.png') != -1) { elem.style.backgroundImage = 'url(images/image1.png)'; } else { elem.style.backgroundImage = 'url(images/image2.png)'; } } --></script>

The preceding example will animate the background image of the element with the ID "myElem."

Again, I don't recommend using this without a good reason. So here it is; take it with a grain of salt.

Converting a text field to a password

A project I'm working on called for the login fields to display the words "EMAIL ADDRESS" and "PASSWORD" in gray, until the user clicked on them, at which point the fields were to behave normally. Here's the script I used -- this is vanilla Javascript, no jQuery.

function convertField(field, isPassword) { field.style.color = '#000000'; field.style.backgroundColor = '#FFFFFF'; field.onfocus = null; field.value = ''; if (isPassword) { var field2 = field.cloneNode(false); field2.type = 'password'; field2.onfocus = null; field.parentNode.replaceChild(field2, field); setTimeout(function () { field2.focus(); }, 5); } }

For your HTML, you want something like this:

<input type="text" value="EMAIL ADDRESS" onfocus="convertField(this, false)"> <input type="text" value="PASSWORD" onfocus="convertField(this, true)">

The password field is text-type; that's not a mistake. It will become a password field when focused, but until then, we want the contents to be displayed in plain text.

An example in action (with a little extra styling):

jQuery crossfade

I spent a significant chunk of my time today looking for a simple way to crossfade one element into another on hover. Nothing I found was a great fit, and the one I eventually decided to try degraded until I realized I wasn't actually using any of the code I'd picked up. Here's what I ended up with:

$(document).ready(function() { $('.crossfade').css('position', 'relative'); $('.crossfade').children().css({position: 'absolute', top:0, left:0}).each(function(i) { $(this).css('z-index', i); }); $('.crossfade img:last-child').hide(); $('.crossfade').hover(function() {$(this).children('img:first-child').fadeOut(500); $(this).children('img:last-child').fadeIn(250);}, function() {$(this).children('img:first-child').fadeIn(250); $(this).children('img:last-child').fadeOut(500);}); });

The HTML is extra-simple:

<div class="crossfade"> <img src="image1.png" /> <!-- this is the regular image --> <img src="image2.png" /> <!-- this image shows up on hover --> </div>

That's it -- the only other thing you need to do is make sure your div is the right size. Very easy to plug into your page. Note that the fadeIn is faster than the fadeOut; this makes the transition smoother.

This script can easily be adapted to use other triggers or to work with non-image elements.

And an example – hover to try it out: