Related Posts

1. Displaying Static, Random HTML And Images On A Web Page Via AJAX (17)
2. Showing A Larger Image On Thumbnail MouseOver with JavaScript / DOM (15.6)
3. The Simplest Ways To Do Image Rollover Effects: JavaScript And CSS-Only (15.4)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]>

Anne Hathaway

Almost all those examples are stupid or just plain wrong. For that, you have my apologies, and I aim to rectify those mistakes with this post.

First, why would we want to preload an image? Simply put, we intend to show it later on our Web page — either as a result of a mouseover, or a click, or some other sort of Document Object Model (DOM) event.

For example, maybe we want to mouseover a series of thumbnails, and show a larger version of that image in the same place.

Rather than making the end user wait for a new image to load as a result of doing something on a Web page, it makes sense to load the image we intend to show in advance, so it will display almost instantaneously as a result of an event.

I’ll first show why two of my previous methods for preloading images are wrong or dumb, then describe two correct ways to preload images: via basic JavaScript and via jQuery.

The lovely Anne Hathaway will be our model.

The Wrong Way: A Single img Tag And JavaScript src Loop

I previously favored preloading images by applying a single HTML img tag on a page, one without a src attribute and also hidden via CSS:

<img id="hiddenImg" src="" alt="" style="display: none;" />

Then, I would create a preloadImages() function, which took as its arguments the paths to the images I wanted to preload. I would then loop through those arguments, setting the src attribute for hiddenImg to be the paths passed to the function:

function preloadImages() {
	var img = document.getElementById('hiddenImage');
	var i;

	for(i = 0; i < arguments.length; i++) {
		img.src = arguments[i];
	}
}

window.onload = function() {
	preloadImages('i/d01.jpg', 'i/d02.jpg', 'i/d03.jpg', 'i/d04.jpg', 'i/d05.jpg');
}

Unfortunately for me, this simply doesn’t work. And the reason why it doesn’t work is because, if I pass more than one image to the preloadImages() function, they simply don’t have enough time to load before the next image is called.

In short, the only image that actually preloads under this methodology is the last one in the arguments list. And that pretty much makes this approach useless.

You can see what I am talking about here: http://www.dougv.com/demo/js_preload_images/wrong.htm

The Dumb Way: Using HTML And CSS

Better in the technical sense, but just as bad in the practical sense, is using HTML and CSS alone to preload images.

In this case, we simply add, to the end of the page, a bunch of img tags that bring in the pictures we intend to display via JavaScript, based on a DOM event. We either place them inside a hidden div or assign those images to a CSS class that sets them to display: none.

<div id="hiddenImages" style="display: none;">
	<img src="i/a01.jpg" alt="" />
	<img src="i/a02.jpg" alt="" />
	<img src="i/a03.jpg" alt="" />
	<img src="i/a04.jpg" alt="" />
	<img src="i/a05.jpg" alt="" />
</div>

You can see an example here: http://www.dougv.com/demo/js_preload_images/index.htm

While this is better than the wrong way, because at least all the images manage to get preloaded, this is dumb.

Suppose our client has disabled JavaScript. This approach doesn’t care; the images for our JavaScript-driven effects will still load in the background.

In other words, we encumber all the overhead of bringing in effect images for an effect that will not be seen. That’s wasteful. Maybe it’s no big deal, given that the average user has plenty of computing power and bandwidth to spare, but it’s inelegant. And by now, you know that little puts a burr in my butt more than wasteful code.

Example 1: Using JavaScript’s appendChild() Method

The proper way to preload images with JavsScript (and this time, I mean it) is to:

• create an HTML div that is hidden;
• dynamically create an img element for each image we want to preload;
• assign each of those dynamically created elements a src attribute that is a path to an image we want to preload; then
• append that dynamic img element to the hidden div.

So first, the HTML:

<div id="hiddenImages" style="display: none;"></div>

And next, the JavaScript function:

function preloadImages() {
	var hiddenDiv = document.getElementById('hiddenImages');
	var i;
	var img;

	for(i = 0; i < arguments.length; i++) {
		img = document.createElement('img');
		img.src = arguments[i];
		img.alt = '';
		hiddenDiv.appendChild(img);
	}
}

To invoke this, we simply call the function:

preloadImages('i/b01.jpg', 'i/b02.jpg', 'i/b03.jpg', 'i/b04.jpg', 'i/b05.jpg');

Witness this in action: http://www.dougv.com/demo/js_preload_images/example1.htm

I prefer to put the preloadImages() function in the head of the page, and call it just before the closing body tag.

That way, the page gets a chance to load all its elements, before we start calling the images that we intend to show later. In other words, the page gets a chance to at least start loading the images it’s supposed to be displaying at first glance, before it starts loading the images we’ll show based on clicks / mouseovers / whatever.

Example 2: Using jQuery And document.ready

Of course, no discussion about JavaScript these days is complete without showing a jQuery version. So here’s mine.

In our case, we can use the same basic methodology as in Example 1. However, there are a few changes:

• Because jQuery has the .hide() method built-in, we’ll just hide each image as we create it. That means the div into which we are adding these images need not be hidden at all.
• We need to call $(document).ready() sometime after we create the hiddenImages div. Otherwise, jQuery doesn’t see where it’s supposed to add the images it’s creating, and thus silently fails. So, for simplicity’s sake, I am adding both the preloadImages() function and my call to $(document).ready() just before the closing body tag.

So here’s our hiddenImages div (again, no need to hide it):

<div id="hiddenImages"></div>

And here’s the JavaScript we place, sometime after it, to preload:

function preloadImages() {
	for(var i = 0; i < arguments.length; i++) {
		$('<img />').attr({ src: arguments[i], alt: '' }).appendTo('#hiddenImages').hide();
	}
}

$(document).ready(preloadImages('i/c01.jpg', 'i/c02.jpg', 'i/c03.jpg', 'i/c04.jpg', 'i/c05.jpg'));

Working example: http://www.dougv.com/demo/js_preload_images/example2.htm

So, whether you prefer to go the old-school JavaScript route, or to get newfangled with jQuery, the proper way to preload an image for DOM-event-based display is to create image elements via JavaScript, then add those elements to some other element on the page — either an element that’s already hidden, or by hiding the images as they are created.

You can download the source code here: http://www.dougv.com/wp-content/uploads/2012/03/js_preload_images.zip

All links in this post on delicious: http://delicious.com/dougvdotcom/preloading-images-with-javascript

Related Posts

1. Using jQuery To Show A Form Over A Reduced-Opacity Image (17.4)
2. Sorting Your MySQL Results Set In PHP Using jQuery (And A More Traditional Approach) (17.3)
3. Parent – Child Select Lists Revisited: Validating Selected Options Via jQuery And PHP (14.6)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> Many Web developers find themselves in an environment where the design of a Web page is handled by a graphic designer or junior programmer, either as part of their team or from a subcontractor or the client himself.

Unfortunately, traditional HTML / XHTML requires most element events handlers — onmouseover, onclick, onfocus, etc. — to be coded as attributes of the tag, like this:

<img id="myimage" src="pic1.jpg" alt="My Image" onmouseover="this.src='pic2.jpg'" onmouseout="this.src='pic1.jpg'" />

That’s not a problem if you’re the end point of the code; that is, if the graphic designer hands you a final page that won’t be modified again. But in the real world, pages and their associated code need to be moved back and forth constantly, with changes aplenty. That can have a real impact on your work, especially if the designer changes or removes your event handlers from page elements.

That’s the idea behind MVC (model, view, controller). We break the chain of custody for a Web request into three parts: A controller accepts a request from the user and determines which model should be used to handle the request.

The selected model, in turn, does something with the request sent to it by the controller; for example, one model might serve up some static content; another model returns search query results; another model returns data based on an environment variable, such as the geolocation of the user’s IP address (that is, gives a page in Russian to a user from Russia, by default); and so on.

Finally, the view — the end output the user sees — is applied by the controller to the model’s results.

While this is a worthwhile development approach, it may be a bit of overkill for a site that doesn’t have too much dynamic content, or that simply needs an image rollover effect, a countdown clock, etc. We still want to protect our coding from alteration by the designer, but we don’t want to employ a $10 solution to a 10-cent problem.

Enter, once again, jQuery, which can automatically bind (that is, “wire up”) event handlers for us once the page loads.

$(document).ready() To The Rescue

The jQuery library includes a class named document (a half-brother of JavaScript’s document class) and a method of that class called ready(). This fundamentally acts the same as the onload event handler of either the window or body HTML DOM objects in JavaScript — except that $(document).ready() does not require us to hard-code it into an DOM element.

As always, we start by downloading the latest version of jQuery, if we haven’t already done so, and adding a reference to it on our page.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

To wire up an event for a single tag, we simply call $(document).ready(), reference the element we want into a jQuery Element object, then bind the event handler we want to use.

You’ll note in the jQuery documentation that there are several different ways to bind an event to an element. I’m going to use the most direct method: namely, calling the appropriate event property of the element and assigning a function that way.

Let’s use the example of an image rollover. Assume we have the following HTML for the image:

<img id="myimage" src="out.jpg" alt="my image" />

Let’s suppose the rollover image is named over.jpg. Let’s add — “wire up” — onmouseover and onmouseout event handlers:

$(document).ready(function () {
	$("#myimage").mouseover(function() {
		$("#myimage").attr("src", "over.jpg");
	});
	$("#myimage").mouseout(function() {
		$("#myimage").attr("src", "out.jpg");
	});
});

What if we want to wire up several event handlers? We certainly can do so by coding them individually, as we do above. But we can also wire up the same event handler to all the same elements, elements in the same class, elements with the same attribute, alternating elements, child or sibling elements, etc. — pretty much any relationship or similarity can be accounted for.

Suppose we want to pop up an alert box, any time a checkbox is checked, with the value of that checkbox:

$(document).ready(function () {
	$("input[type='checkbox']").click(function() {
		alert("You just clicked the " + $(this).val() + " checkbox!");
	});
});

Or maybe, we want to change the background color of all alternate table rows; change the color of a row when we mouse over it; and change the color of a row when we click on it:

$(document).ready(function () {
	$("tr:even").addClass("row-alt");
	$("td").mouseover(function() {
		$(this).parent().addClass("row-over");
	});
	$("td").mouseout(function() {
		$(this).parent().removeClass("row-over");
	});
	$("td").click(function() {
		$(this).parent().toggleClass("row-click");
	});
});

.row-alt {
	background-color: #eee;
}

.row-over {
	background-color: #ffc;
}

.row-click {
	background-color: #fc9;
}

You can see all of these in effect here: http://www.dougv.com/demo/jquery_event_wireup/

I distribute code under the GNU GPL version 3.

Hopefully, this gives you an idea of the power of jQuery, and its ability to help you adopt object-oriented concepts, such as modularity and abstraction, in your traditional Web projects.

Related Posts

1. Working With A Simple Structure Array In VB.NET (17.7)
2. In Reply To Comments Made On "Working With A Simple Structure Array In VB.NET" (16.2)
3. Dynamically Populating A Listbox From A Textbox Via JavaScript / DOM (14.5)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> One of the nicest features of JavaScript is the ability to treat function arguments as an array. We all know how to write a function that takes a known number of arguments:

function foo(bar) {
	alert(bar);
}

function getArea(shape, measure, unit) {
	var output = 'The area of a ' + measure + ' ' + unit + ' ' + shape + ' is ';
	switch(shape) {
		case 'square':
			output += (measure * measure);
			break;
		case 'circle':
			output += (3.14 * (measure * measure));
			break;
		default:
			output += 'unknown to this function.';
	}
	alert(output);
}

But sometimes, your script will require you to pass some unknown number of parameters to a function. So how do you deal with that?

Luckily, JavaScript functions treat all of their arguments as an array. So, if you’re not certain how many arguments your function will take, don’t declare them in your function code; simply use the reserved word arguments to iterate the array of arguments passed to the function.

function allTheAnimals() {
	var output = 'The animals you provided are: ';
	for(var i = 0; i < arguments.length; i++) {
		output += arguments[i] + ', ';
	}
	output = output.substring(0, (output.length - 2)); //remove trailing comma and space
	alert(output);
}

Note that we can ask for specific indexes of the array, but should ensure there are at least that many elements in the array before asking:

function threeIsAMagicNumber() {
	if(arguments.length < 3) {
		alert('There is no third argument!');
	}
	else {
		alert('The value of the third argument passed to this function is ' + arguments[2].toString());
	}
}

We can even pass an unknown number of arguments from one function to another, via the apply method:

function parentFunction() {
	var output = 'Arguments received by parent function: ';
	for(var i = 0; i < arguments.length; i++) {
		output += arguments[i] + ', ';
	}
	output = output.substring(0, (output.length - 2));
	output += "\n\nDo you want to send these to the child function? OK to submit to child function, Cancel to abort.";
	if(confirm(output)) {
		childFunction.apply(this, arguments);
	}
}

function childFunction() {
	var output = 'Arguments received by the child function: ';
	for(var i = 0; i < arguments.length; i++) {
		output += arguments[i] + ', ';
	}
	output = output.substring(0, (output.length - 2));
	alert(output);
}

You can see a demonstration of all these here: http://www.dougv.com/demo/js_function_arguments_array/

I distribute code under the GNU GPL version 3.

Related Posts

1. Simple Image Rollover Via CSS Only (48.3)
2. Displaying A New Image Based On Image Choices Via Checkboxes, the HTML DOM and JavaScript (26.2)
3. Changing CSS Styles Via JavaScript, Based On The User's Web Browser (23.4)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> A common question on Yahoo! Answers is how to do image rollover effects simply.

There are two ways to do so: With JavaScript, and via CSS alone. Of the two, I prefer the JavaScript method, as it doesn’t require marking up your code too much; but the CSS method is fine, too, and takes away the worry of dealing with users who have disabled JavaScript in their browsers.

This topic also allows me to address the best way to “preload” images for use via JavaScript / CSS; previous articles I’ve written have used less efficient methods, and I’d like to go on record with the proper way to preload.

Last things first, then. The proper way to “preload” images is to use a standard XHTML img tag, using a CSS class to “hide” the image(s) being preloaded via display: none. These images should then appear directly before the closing body tag, to speed page loading by loading the “preloaded” images last.

img.hide {
        display: none;
}

        <img src="home-over.png" alt="" class="hide" />
        <img src="about-over.png" alt="" class="hide" />
        <img src="services-over.png" alt="" class="hide" />
        <img src="contact-over.png" alt="" class="hide" />
</body>

Using CSS to hide images should work for all current Web browsers, including versions 5+ of Internet Explorer.

CSS-Only Rollovers

You can create CSS-only rollovers. However, there are two drawbacks to this approach.

Because this method uses CSS, appearance problems may arise with various browsers, especially versions of Internet Explorer prior to version 8, but any browser that’s more than a couple years old could render things oddly.

The CSS only route basically replaces all rollover-effect img tags with div tags. Each such div receives a unique ID, so we can write CSS that targets just that item. Because of that, you cannot add alt attributes to your images; and this will affect their ability to index with image search engines. (Some people may see that as a benefit; but for those who want their images to index well, this method will likely seriously impede that desire.)

We first set the CSS properties of all the rollover div elements, fixing their display as inline-table. We do that because we want to ensure the image will flow into our layout; most Web browsers treat div elements as block elements, meaning that they appear as though they are followed by a br. That, generally speaking, will prevent our div-nee-img from lining up properly in most layouts.

#home, #about, #services, #contact, #leelee {
	display: inline-table;
}

Next, we fix the size of each div to be the same as the background image we will use, and make that background image the normal, or “up,” state of the image:

#home {
	width: 45px;
	height: 20px;
	background: #ddd url(images/home.png) no-repeat;
}

#about {
	width: 45px;
	height: 20px;
	background: #ddd url(images/about.png) no-repeat;
}

#services {
	width: 65px;
	height: 20px;
	background: #ddd url(images/services.png) no-repeat;
}

#contact {
	width: 60px;
	height: 20px;
	background: #ddd url(images/contact.png) no-repeat;
}

#leelee {
	float: left;
	padding-right: 10px;
	width: 154px;
	height: 300px;
	background: #fff url(images/leelee1.jpg) no-repeat;
}

To actually do the rollovers, we create a :hover pseudoclass effect, which changes the background of the given div to be the image we want shown on mouseover.

Note that not only can we change the height and width of the image, we can add or remove any effect we’d like, as well, such as changing the border color.

#home:hover {
	background: #ddd url(images/home-over.png) no-repeat;
}

#about:hover {
	background: #ddd url(images/about-over.png) no-repeat;
}

#services:hover {
	background: #ddd url(images/services-over.png) no-repeat;
}

#contact:hover {
	background: #ddd url(images/contact-over.png) no-repeat;
}

#leelee:hover {
	width: 200px;
	height: 300px;
	background: #fff url(images/leelee2.jpg) no-repeat;
}

And with that, we have CSS-only rollovers. You can see this in action here: http://www.dougv.com/demo/js_image_rollovers/index.html

JavaScript Rollovers

The benefit of the JavaScript approach is that it uses actual images to achieve its rollover effects. However, this methodology requires you to add onmouseover and onmouseout event handlers to your rollover images’ tags; while that doesn’t mean more coding versus the CSS-only methodology, it does mean tinkering with XHTML source code, which some users might be reluctant to do for design / team development / WYSIWYG editor issues that may raise.

A way to avoid adding event handlers directly to your image tags is to use a library, such as jQuery, that allows you to add event handlers via JavaScript.

Under the JavaScript method, we again preload our images. And we then use img tags to place our “up-state” images wherever we want them to go.

We then add onmouseover and onmouseout event handlers to each tag. Using the reserved word this, which tells JavaScript we mean the image that is triggering the event, we change the image’s src attribute to be the path to whichever image we want to have displayed.

In the case of onmouseover, we want the “down-state” image to replace the “up-state” image; with onmouseout, we want the “up-state” image restored.

<img src="images/home.png" alt="Home" onmouseover="this.src='images/home-over.png'" onmouseout="this.src='images/home.png'" />
<img src="images/about.png" alt="About" onmouseover="this.src='images/about-over.png'" onmouseout="this.src='images/about.png'" />
<img src="images/services.png" alt="Services" onmouseover="this.src='images/services-over.png'" onmouseout="this.src='images/services.png'" />
<img src="images/contact.png" alt="Contact" onmouseover="this.src='images/contact-over.png'" onmouseout="this.src='images/contact.png'" />

<img id="leelee" src="images/leelee1.jpg" alt="Leelee Sobieski" onmouseover="this.src='images/leelee2.jpg'" onmouseout="this.src='images/leelee1.jpg'" />

And that’s all there is to that. You can see a working demo here: http://www.dougv.com/demo/js_image_rollovers/js.html

I distribute all code under the GNU GPL version 3.

Related Posts

1. Displaying A New Image Based On Image Choices Via Checkboxes, the HTML DOM and JavaScript (18.5)
2. Showing Or Hiding HTML Form Elements With JavaScript (14.8)
3. Simple Image Rollover Via CSS Only (14.8)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> It’s an awful thing, waiting for a question at Yahoo! Answers that would be fun to discuss as a blog entry. There is an awful lot of chaff to be sorted before one finds such wheat, and even then, sometimes the supposed grains turn out to be mouse turds.

Consider the following:

How would this be done? Java, flash, php, etc?
Okay, for my site.. on the main page, i have four main pictures lined next to eachother..

each one is linked.

The site can be logged into, logged out, you can create an account on it, etc.

What i want to do though, is when a member clicks on one of the pictures, per se if one picture was a large rectangle and it was linked to the login deal,
i would want the picture to fade out, as then the login deal would appear within the rectangle of the picture.

for example:

|“““““““`|
|““`pic“““|
|“““““““`|
—————-

user clicks on pic:

_________ ““““““`_________
|—————|““““““`|-user[ ]-|
|-fade out–|““—>““|-pass[ ]–|
|—————|““““““`|-submit…
—————-““““““`———…

how would i do this?

i’m thinkin Java.. but does anyone know of any tutorials on how to do this or anything?

thanks

hope the diagram makes sense. ha

Hoo, boy. A compelling problem, wrapped in a complete abortion of a question. What should I do?

I want to solve this, especially since it gives me my first chance to discuss jQuery, with which I have fallen completely in love. But I don’t want to reward the total disregard for common sense, the English language and basic programming terminology exhibited in this question, either.

• “Per se” is Latin for “by itself.” It is most commonly used by lawyers as a synonym for “inherently,” as in, “A slippery floor is hazardous per se, but a sign that warns the floor is wet helps mitigate the floor owner’s liability.” “Per se” is not used to introduce an example. “Say” is used for that purpose. It might seem like picking nits, but it is absolutely impossible to take people seriously if they so blatantly misuse words.
• “Java” is not shorthand for “JavaScript” (a fact the questioner later realized). Java and JavaScript are completely different things, the way crack cocaine and Cracker Jack are completely different things. It is impossible to take a Web designer seriously if he doesn’t understand that Java and JavaScript aren’t the same thing, or at best, that he cannot use the terms interchangeably, the same way no one asks for an eight ball of candy-coated popcorn and peanuts.
• At least, the questioner figured out that the ASCII drawing ought to be replaced by an actual drawing. The amusing thing is, neither was needed; his text description was fine.

OK, my spleen is vented. Let’s do this thing.

The Basic Approach: jQuery Does The Dirty Work

With all this question’s failings, its aim is clear:

• There’s a full-opacity image.
• User clicks on that image.
• Image fades down to limited opacity.
• Form fades up to full opacity over image.

This is easy as pie to do, and thanks to jQuery, we don’t even need to code much. The nice thing about jQuery is that it works as a cross-browser implementation of certain DOM manipulation effects; among those stock effects is fading elements up and down. So we’ll use this version of the wheel to achieve our desired effect.

So our first task is to download jQuery’s current release.

A quick aside on minimized / packed / uncompressed script: It doesn’t really matter which jQuery source file you download (minimized / packed / uncompressed). You only need to download one, and which one is up to you.

The only difference between the three is how long it takes each to download to the client browser, and in this cheap, high-bandwidth world, the difference in download times between a 31 kb (packed) file and a 94 kb (uncompressed) file is nothing. Heck, it’s nothing in the dial-up world. But since it doesn’t matter, use the packed version; elegance alone suggests that’s best.

To use the library, we simply post it on our site and make it the source of a script tag in the header of our Web page.

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

Now, for the work we need to put into this: Some images, some HTML and a tiny bit of JavaScript to invoke jQuery methods that otherwise would have taken hours to write.

The HTML and CSS

We’re going to display our four-across layout as div elements. More specifically, we’ll fix the size of four divs, then lay them side by side. And each will contain the image we want to show.

We’ve got a trick up our sleeve, however. Each of these divs is also going to have a background image version — which is a 30% opacity version of the original.

For example, if div no. 1 initially contains an image named 1.jpg, then it also has a background image named 1.30.jpg. This background image is the 30% opacity version of 1.jpg.

We do this because we want a faded version of the image to be the background for our form. So, we go ahead and make that faded image the background.

When the 100% opacity image is showing, it hides the background version; as it fades out, the background image appears, and as the opacity of the original image gets less than the 30 percent of the background image, the naked eye doesn’t notice this; it appears that the fading stopped at 30 percent. When we fade the image back up, it will appear to the naked eye that the 30% opacity image has faded up.

Let’s start with the CSS we’ll apply to our page:

• Create a containing div; fixed at 1250px, with auto left and right margins.
• Create a common class, called panel, which sets the width and height of each div to be that of the images to be used, floats them all left and gives them all a right margin of 10 px, among other styles;
• Specify the background images for each of these divs;
• Apply a padding to the login form, and initially set its display to none, so that the image is shown instead of the form.

div#container {
	width: 1250px;
	margin: 10px auto;
}

div.panel {
	width: 300px;
	height: 195px;
	float: left;
	margin-right: 10px;
	border: 1px solid #000;
	cursor: pointer;
}

div#panel1 {
	background-image: url(1.30.jpg);
}

div#panel2 {
	background-image: url(2.jpg);
}

div#panel3 {
	background-image: url(3.jpg);
}

div#panel4 {
	background-image: url(4.jpg);
}

#loginform {
	padding: 5px;
	display: none;
}

With the CSS out of the way, we can build the basic HTML of the page. I’m being lazy here; I’m only going to make one of these divs interactive. The principles I am applying to the first div will work on all four.

<div id="container">
    <div id="panel1" class="panel">
        <img id="img1" src="1.jpg" alt="Click Here To Log In" title="Click Here To Log In" onclick="toggleLoginForm()" />
        <form id="loginform" action="" method="post">
            <label>User ID: <input type="text" id="tbUser" name="tbUser"/></label>
            <br />
            <label>Password: <input type="password" id="tbPass" name="tbPass" /></label>
            <br />
            <input type="submit" id="btnSubmit" name="btnSubmit" value="Log In" onclick="toggleLoginForm()" />
        </form>
    </div>
    <div id="panel2" class="panel"></div>
    <div id="panel3" class="panel"></div>
    <div id="panel4" class="panel"></div>
</div>

Note that both img#img1 and input#btnSubmit have the as-yet-undefined JavaScript function toggleLoginForm() assigned to their onclick events. Let’s get to describing that function.

The JavaScript

Thanks to jQuery, fading DOM elements in and out is as simple as calling the methods fadeIn and fadeOut.

In jQuery, you can address elements in a number of ways. When you want to address an element by its ID attribute, you do that the same way you do in CSS: apply a hash mark, followed by the ID value. For example, if I want to address the div with ID of panel1: $(‘#panel1′) gets me a reference to that element.

The fadeIn and fadeOut effects in jQuery take two arguments: speed and, optionally, a callback function.

A callback function is a function that a function will call after it is done. This is of great use to us, because it makes the fading effect much smoother. For example, we could do this:

$('#img1').fadeOut("slow");
$('#loginform').fadeIn("slow");

But if we do that, the fading out of the image and the fading in of the form take place nearly simultaneously, and this creates a very rough transition in the middle of the effect, where both elements are about half visible.

For a smoother transition, we completely fade out the currently visible element — either the image or the form — then “call back” the fade in effect on the invisible element. We determine which element fades in or out by asking JavaScript if the form is currently visible (more accurately, if its CSS display property is set to none). When the form is not showing, we need to fade the image out and fade the form in; vice-versa when the form is visible.

function toggleLoginForm() {
	if($('#loginform').css('display') == "none") {
		$('#img1').fadeOut("slow", function() { $('#loginform').fadeIn("slow"); });
	}
	else {
		$('#loginform').fadeOut("slow", function() { $('#img1').fadeIn("slow"); });
	}
}

You can see the script in action here:

http://www.dougv.com/demo/jquery_fade/

Just click on the image of the lady holding the cat to see the effect; download the page to your computer to get all the code. I distribute all code under the GNU GPL version 3.

Related Posts

1. Showing A Larger Image From A Thumbnail OnClick Via JavaScript / DOM (88.5)
2. Showing A Larger Image On Thumbnail MouseOver with JavaScript / DOM (71.8)
3. Displaying A New Image Based On Image Choices Via Checkboxes, the HTML DOM and JavaScript (34.6)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> Recently asked on Yahoo! Answers:

Showing a Larger picture from a Thumbnail – How to include the Title?
I have followed the steps from http://www.dougv.com/2007/02/07/sho…
using the iFrame version, but cannot get the image on click to display the title used in the img tag.

i.e

<img src="images/image_02_tn.jpg" alt="image_02.jpg" title="image name" />

Using the Addendum: information posted the title that gets displayed is ‘image_02.jpg’ when I want ‘Image Name’ to be displayed.

Anyone know the best way to do this?

A few changes to the original script take care of this request quite handily, and it also allows me the opportunity to make some improvements to the original script:

• Modern Web browsers support the onclick event for any DOM element, so there’s no need to assign the onclick event to a hyperlink; we can add it directly to the thumbnails.
• We should preload the full-size images so that there isn’t a significant delay between when the thumbnails have been clicked and the full-size image shows.
• To allow the script to pull images from any location, I’ve removed the part of the script that sets a path and concatenates the relevant image to that path.

Let’s get to it. As always, I will have a working demo and code you can download at the end of this entry.

Step 1: The preLoadImages() Function

A image preloader is easy to accomplish. We simply create a JavaScript function that makes, for each image passed to the function, a new Image() object, and assigns to that object’s src attribute the URL of the image we want preloaded.

function preLoadImages() {
	var tmp = new Array();
	for(var i = 0; i < attributes.length; i++) {
		tmp[i] = new Image();
		tmp[i].src = attributes[i];
	}
}

We also alter the BODY tag in our page’s HTML to call the function, with each full-sized image listed as an argument:

<body onload="preLoadImages('images/jessica_biel_01.jpg', 'images/jessica_biel_02.jpg', 'images/jessica_biel_03.jpg', 'images/jessica_biel_04.jpg', 'images/jessica_biel_05.jpg', 'images/jessica_biel_06.jpg', 'images/jessica_biel_07.jpg', 'images/jessica_biel_08.jpg');">

If you use the IFRAME version of this script, this function can go on either the page that shows the full-sized image or the thumbnail page; I prefer using the full-size image page, just to keep things associated properly (the images appear on that page, so that page should preload the images).

Step 2: Changes To The HTML

For our new text area to work, we need to make some changes to the HTML on the page.

As I noted above, we can get rid of the hyperlinks surrounding the thumbnails. We’re also going to change the showImage() function to accept two arguments, rather than one: The first argument will be the path to the image we want to show, and the second argument will be the text we want to have displayed under the image.

Finally, we need to add a DIV where we will display the text associated with the image.

<img src="images/jessica_biel_09_tn.jpg" alt="images/jessica_biel_09_tn.jpg" title="images/jessica_biel_09_tn.jpg" onclick="showImage('images/jessica_biel_09.jpg', 'And even if she sits in the bathroom sink for no apparent reason.');" />

<div id="rightText">
	This is where the text associated with each image will appear.
</div>

Step 3: Changes To The showImage() Function

As noted above, the showImage() JavaScript function now takes two arguments: the full path to the image we want to display full-sized when the thumbnail is clicked, and the text we want to have appear alongside that image.

Our function now works as follows:

1. We get a reference to the full-sized image using getElementById()
2. We reference the new text display DIV, also via getElementById()
3. We establish the source, alt and title attributes of the full-sized image to be the path provided by the first argument of the function.
4. We set the innerHTML of the text display DIV to be the text passed as the second argument of the function.

function showImage(imgName, imgText) {
	var curImage = document.getElementById('currentImg');
	var textDiv = document.getElementById('rightText');

	curImage.src = imgName;
	curImage.alt = imgName;
	curImage.title = imgName;
	textDiv.innerHTML = imgText;
}

Some usage notes:

• Any HTML you pass as the second argument of the function will display as HTML in the text DIV. For example, if you use a STRONG tag in the DIV, whatever is inside the STRONG tags will be bold.
• You need to escape all single-quotes in your HTML function calls and replace all double-quotes with the HTML entity for double-quotes. In fact, it makes a lot of sense to replace all special characters with their HTML entities.

<!-- escape or replace your quotes! -->
<img src="images/jessica_biel_02_tn.jpg" alt="images/jessica_biel_02_tn.jpg" title="images/jessica_biel_02_tn.jpg" onclick="showImage('images/jessica_biel_02.jpg', 'If you use quotes in your text, it's important to escape them with a backslash.');" />
<br />
<img src="images/jessica_biel_03_tn.jpg" alt="images/jessica_biel_03_tn.jpg" title="images/jessica_biel_03_tn.jpg" onclick="showImage('images/jessica_biel_03.jpg', 'If you are going to use double-quotes in your text, you need to use the HTML entity &amp;quot;, or your script will &quot;error out&quot;.');" />
<br />

<!-- replace your HTML entities! -->
<img src="images/jessica_biel_07_tn.jpg" alt="images/jessica_biel_07_tn.jpg" title="images/jessica_biel_07_tn.jpg" onclick="showImage('images/jessica_biel_07.jpg', 'In fact, it makes a lot of sense to use entities for everything you include in the call to the showImage function's imgText argument.');" />

And that’s it. You can see working demos here:

Single-Page Version

Thumbnails In An IFrame Version

You can download the code here:

Showing A Larger Image From A Thumbnail OnClick Via JavaScript / DOM Revisited Demo Code

I distribute all code under the GNU GPL version 3.

Related Posts

1. Displaying A New Image Based On Image Choices Via Checkboxes, the HTML DOM and JavaScript (42.1)
2. Displaying An Image On A Web Page Based Upon The Current Time With JavaScript / DOM (37.1)
3. Display A Random Image With JavaScript / DOM (29)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> Recently asked on Yahoo! Answers:

Use a custom image for check boxes???? Please help, I”m going insane over such a simple thing.?

Heya.

Don’t worry, I’m not really going insane – it’s just kind of frustrating because such a simple little thing is giving me trouble. I want to use custom images for check boxes on a HTML page.

The best way I can describe this is that I want a bright red flashing gif to be there by defualt, then for that to change to a green flashing gif when it’s clicked.

I don’t care if it’s done using a real checkbox, I don’t need it to actually work. I only need the picture to change when it’s clicked, and stay changed after that unless clicked again.

Apparently either it’s such a simple thing to do that no one has ever talked about it, or no one has ever needed to do it before and never given it any thought, because I’ve looked for help with this all afternoon and tried 6 different ideas of my own with no luck. I can write a fully functional & good looking page in notepad but not get a dumb little image to change when it’s clicked. Go figure.

Please help! Thank you

I’ve written about using JavaScript / Document Object Model (DOM) manipulation to change images onclick, onmouseover or via virtually any other event on many occasions. But it’s the idea of using an image as a checkbox that got me curious: Sure, we can change any image onclick, but can we also get the id attributes of all the checked items for use in form processing?

Yes, we can! So we’ll tackle this question in three parts: Example 1 will simply change images on click; Example 2 will let us find out which images are “checked,” via a JavaScript array; and Example 3 will assign the checked images to regular, old HTML check boxes, so you can process the form as you would via any HTML postback.

As always, I will provide links to working demos at the end of each example.

Example 1: Change Image On Click

The basic request from the questioner only requires us to change an image any time an item is clicked. For that, we can use a variation on the image-swapping functions I have previously discussed.

Step 1: Prepare The HTML

First up, let’s prep each IMG tag for image swapping. Again, we need to add two essential attributes to each IMG tag we want to have take a new source: a unique ID for the image, and an onclick event handler. In this case, we’ll call a function named swapImage, that takes as its argument the ID for this image.

I’m also going to add an onclick event to each “label” for each of the image “checkboxes.” In HTML, if you click on a LABEL element, it will toggle, or give focus to, the element to which it is tied.

In DOM, you can click on any element and it will fire the onclick event. So, if I assign an onclick event handler to text associated with an image, I can make that text behave as though it were a LABEL for the image-based “checkbox.” Neat, eh?

In this example, I’ve cheated on layout by putting everything in a table, so the TD elements containing my “labels” will take the onclick event:

This is item 1. If you click on the icon to the left, or this text, it will change.

Step 2: The swapImage() Function

Again, swapping images is as simple as assigning a new source attribute to the image. In our case, all the “checkboxes” will use one of two images: an “up” image, which is unchecked; and a “down” image, for when the item is checked. Since the image is always the same, we’ll declare the HTTP relative paths to those images in our function.

Next, we get the image that we want to swap via getElementById, taking the argument our onclick event handler sent to the function.

We assign the current source attribute of that image to a variable named theState. What we’ll get is the full HTTP path to the image — that is, http://www.domain.com/images/image.ext — instead of the HTTP relative path, such as images/image.ext.

So, we simply test to see whether we can find the up-state (not-checked) image in theState. If we can, we know the “checkbox” was previously unchecked, so we swap the source to be the checked image. If we don’t find the up-state image in theState, we know the image was “checked”, and we swap it back to the unchecked image.

function swapImage(imgID) {
	var imgUp = "images/1.jpg";
	var imgDown = "images/2.jpg";

	var theImage = document.getElementById(imgID);
	var theState = theImage.src;

	if(theState.indexOf(imgUp) != -1) {
		theImage.src = imgDown;
	}
	else {
		theImage.src = imgUp;
	}
}

And again, I prefer to preload images, so I add my stock preloading function to the page source:

function preloadImages() {
	for(var i = 0; i < arguments.length; i++) {
		var tmp = new Image();
		tmp.src = arguments[i];
	}
}

And add the script to the onload event handler for the BODY tag:

And it's as simple as that. You can see a working demo here:

http://www.dougv.com/demo/js_imgswap_checked/

Example 2: Get The "Checked" Values

While the previous example answers the question posed, it's not as functional as knowing which images have been "checked" -- information we might need to know in order to process a form.

Fortunately, by using getElementsByName, we can retrieve all of our pseudo-checkboxes, iterate through them, discover which are "checked" on the basis of their current source attributes, and add those checked items to an array -- the same way HTML checkboxes return which items are checked.

Step 1: The HTML Modifications

The HTML for Example 2 is nearly the same as the HTML for Example 1, except that for each "checkbox" image, we add a name attribute that is the same for each image -- the same way we would give the same name to all the HTML checkboxes we want grouped together.

For the purpose of this demo, I also add a DIV that will display which items are checked.

The following items are checked: none

We recycle the same preloader function and body onload event handler call.

Step 2: Set Global JavaScript Variables

We modify the JavaScript by making the up-state and down-state image paths global variables. We also declare, as a global variable, the array which will hold the checked items.

var imgUp = "images/1.jpg";
var imgDown = "images/2.jpg";
var checkedItems = new Array();

Step 3: Add The getCheckedElements() Function To The swapImage() Function

By virtue of declaring the up-state and down-state images globally, we can remove those declarations from swapImage().

Instead, we'll add to swapImage() a call to a new function, which we will call getCheckedElements(). We do that because every time we check an image on or off, we need to get a new listing of the checked items; so, since the swapImage() function is handling each click for us, it makes sense to call the new function there.

function swapImage(imgID) {
	var theImage = document.getElementById(imgID);
	var theState = theImage.src;

	if(theState.indexOf(imgUp) != -1) {
		theImage.src = imgDown;
	}
	else {
		theImage.src = imgUp;
	}
	getCheckedElements();
}

Step 4: The getCheckedElements() Function

The function that will tell us which images are "checked" begins by getting all the similarly named images via getElementsByName. That built-in function returns the images as an array. It generally places those items into the array in the order they appear in source code, but not always; so, be cognizant that your items might not be ordered the way you expect.

Next, we reset the length of the checkedItems array to 0, effectively clearing all current values.

Now, we iterate through all the check-images, looking at their source attributes. If the down-state (checked) image is the source, then the item is checked, and we add that check-image's unique ID to the end of the checkedItems array. In effect, the image's unique ID attribute acts as the value of the "checkbox."

At this point, we now have populated the global checkedItems array with all the checked images; we can go ahead and use that however we want.

For this example, I'm just going to echo out all the checked items to a string, which I will then set as the innerHTML of the status DIV I created back in Step 1. You can safely delete that from the function if all you want is for the images to swap.

function getCheckedElements() {
	var imgArray = document.getElementsByName('checkboximg');
	checkedItems.length = 0;

	for(var i = 0; i < imgArray.length; i++) {
		var tmp = imgArray[i].src.toString();
		if(tmp.indexOf(imgDown) != -1) {
			checkedItems.push(imgArray[i].id.toString());
		}
	}

	var strOut = "

The following items are checked: ";
	if(checkedItems.length != 0) {
		strOut += checkedItems.toString();
	}
	else {
		strOut += "none";
	}
	strOut += "

";

	var theDiv = document.getElementById('statusDiv');
	theDiv.innerHTML = strOut
}

And that's all there is to it! You can see a working demo here:

http://www.dougv.com/demo/js_imgswap_checked/example2.html

Example 3: Assign The Checked Images To HTML Checkboxes

The problem with having the "checked" images stored as a JavaScript array is that unless you intend to use JavaScript to post the checked images to a server via an AJAX request or the like, it's not very handy. It would be far more convenient for us to be able to send the results to our server-side processing page (such as a PHP or ASP.NET script) as standard HTML elements.

We can do that by dynamically adding to the page new HTML checkboxes for each checked image to the form; to me, that's overkill. It's far easier to actually add an HTML checkbox for each check-image, and simply hide those boxes from the user via CSS.

Then, every time we click an image, we'll iterate through the checkedItems array, checking each HTML checkbox that has a corresponding checked image.

And just to prove I'm doing the server-side processing via a regular HTML POST, I'll create a seperate PHP page that will echo back which images -- now, converted to checkboxes -- were checked.

Step 1: Add The HTML Checkboxes

Again, for each image that we can check, we'll add a regular HTML checkbox with the same value as the ID for the image.

Notice that each checkbox has the class "hide" associated with it. That CSS class simply sets the display for the items to none.

input.hide {
	display: none;
}

Step 2: Modify The getCheckedElements() JavaScript Action

The getCheckedElements() function is modified by replacing our previous text output routine with a new routine that gets all our hidden checkboxes via getElementsByName. Then, it unchecks all the elements, so we start with a clean slate.

We then see if the value of each checkbox corresponds to one of the checkedItems array cells; if so, we set that checkbox's state to checked.

function getCheckedElements() {
	var imgArray = document.getElementsByName('checkboximg');
	checkedItems.length = 0;

	for(var i = 0; i < imgArray.length; i++) {
		var tmp = imgArray[i].src.toString();
		if(tmp.indexOf(imgDown) != -1) {
			checkedItems.push(imgArray[i].id.toString());
		}
	}

	var theBoxes = document.getElementsByName('cblist[]');
	for(var i = 0; i < theBoxes.length; i++) {
		theBoxes[i].checked = false;
		for(var x = 0; x < checkedItems.length; x++) {
			if(theBoxes[i].value == checkedItems[x]) {
				theBoxes[i].checked = true;
				break;
			}
		}
	}
}

Step 3: Add A Form Action And Submit Button

We assign our soon-to-be-described PHP handler page, echo.php, to the form's action, and add a submit button to our form.

This is item 1. If you click on the icon to the left, or this text, it will change.



This is item 2. If you click on the icon to the left, or this text, it will change.



This is item 3. If you click on the icon to the left, or this text, it will change.



This is item 4. If you click on the icon to the left, or this text, it will change.



This is item 5. If you click on the icon to the left, or this text, it will change.



This is item 6. If you click on the icon to the left, or this text, it will change.









Click the submit button to pass the checked items to a PHP page via standard HTML:

Step 4: The echo.php Page

The PHP page just needs to echo out any of the checked box values. I'll first check to see if this page has been reached by post.

Then, I check the length of the checkboxes array. If the length is 0, I know nothing was checked and post that; otherwise, I use a foreach() statement to echo out the checked items.

if(isset($_POST['submit']) && strpos($_SERVER['HTTP_REFERER'], 'dougv.com') !== false) {
	if(count($_POST['cblist']) > 0) {
		echo "

You have checked the following items:

n";
		echo "
n";
		foreach($_POST['cblist'] as $item) {
			echo "
$item

n";
		}
		echo "

n";
	}
	else {
		echo "

There are no checked items.

n";
	}
}
else {
	echo "

You didn't post to this page from the example page. Please try again.

n";
}

And that's all there is to that. You can see a working demo here:

http://www.dougv.com/demo/js_imgswap_checked/example3.html

I distribute code under the GNU GPL version 3.

Related Posts

1. Displaying A New Image Based On Image Choices Via Checkboxes, the HTML DOM and JavaScript (32.8)
2. Display A Random Image With JavaScript / DOM (30.6)
3. Showing A Larger Image On Thumbnail MouseOver with JavaScript / DOM (29.8)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> Recently asked on Yahoo! Answers:

I have created a .gif for a webpage how do I get it to animate only when the mouse pointer is on top of it?

I have created a .gif for a webpage how do I get it to animate only when the mouse pointer is on top of it?

Do you have a link to a page which can guide me here.

I have frontpage etc

This is fundamentally a mash-up of previous topics I have posted on swapping images on mouseover. Basically, it’s three steps:

• Create the animated GIF;
• Create a second GIF, that is only the first frame of the animated GIF;
• Put together some JavaScript and HTML that swaps the images on mouseover / mouseout.

Or, we could simply let JavaScript handle the animations, and just use a series of images in sequence. I’ll demonstrate both approaches. As always, a link to a functioning demo appears at the end of this entry.

Step 1: The Basic Image Swap JavaScript Functions

Swapping an image in JavaScript / DOM manipulation is simple: We simply have JavaScript change the src (source) attribute of the given image.

To do that, we need to know two things: the ID of the image we want to change, and the new source for the image.

We pass those as arguments to the script, which first gets the image we want to change via getElementById, then assigns that image a new src based on the second argument.

function swapImage(imgID, imgSrc) {
	var theImage = document.getElementById(imgID)
	theImage.src = imgSrc;
}

Yes, it’s that simple.

But as I’ve previously noted, unless you pre-load the image(s) you’re going to use on the mouseover, there will be a delay between the mouseover and when the new image appears. To resolve that problem, we create a preload script that accepts a list of image paths, and loads them all into the page cache without actually displaying them.

Notice that we don’t need to explicitly state all the parameters we’re going to pass to this function. In JavaScript, arguments to a function can be called as an array, meaning you don’t need to know how many arguments there are, or what those arguments are (objects, strings, integers, etc.), in order to work with all of them; we can simply iterate through the arguments as we would any array.

function preLoadImages() {
	for(var i = 0; i < arguments.length; i++) {
		var tmpImage = new Image();
		tmpImage.src = arguments[i];
	}
}

Step 2: Prepare The HTML For Swapping

The HTML we use to make the image swap needs three elements:

• A unique ID for the image, so the JavaScript function knows to swap this image;
• A mouseover event handler that will call the swapImage function and replace the default image with our animated GIF;
• A mouseout event handler that will call the swapImage function again, replacing the animated GIF with the default image.

So, here’s how our IMG tag will look with all those attributes added:

<img id="imgToSwap" src="elena.gif" alt="animated gif" onmouseover="swapImage('imgToSwap', 'elena-animated.gif');" onmouseout="swapImage('imgToSwap', 'elena.gif');" />

Notice that the image’s initial src attribute is set to be the non-animated image.

We also need to add the preload function to the body’s onload event handler. Again, we add as arguments all the animated GIFs our page will use as swaps:

<body onload="preLoadImages('elena-animated.gif');">

And that’s all there is to it. You can see this in action here:

http://www.dougv.com/demo/js_animated_imgswap/

To use it, simply download the page to your computer and copy and paste the JavaScript to your page.

Example 2: A JavaScript / DOM Animated Sequence That Stops On MouseOut

The problem with the previous example, as you may have noted, is that when you mouse out, you go back to the first frame — which comes off as somewhat abrupt. How can we fix that so that the animation stops when we mouse out but resumes from the last frame when we mouse over again?

Simple: We’ll let JavaScript do the animating for us, by using setTimeout to continuously change the source of the image in the same sequence as the individual frames of the animation. And, as an added benefit, we can use JPGs or PNGs for this method — in effect, making animated JPGs or animated PNGs!

Step 1: Some Global Variables

We need two global variables to make this script work: an array to hold all of our animation images, in order; and an integer that will store the current index of the array — that is, the number of the array cell that is the source of the image at the moment.

var imgArray = new Array();
var imgIndex = 0;

Step 2: The JavaScript Image Preload Script Revisted

We’ll again use a preloader for this script, but we’ll also populate the global array with it. So, when we write the BODY tag’s onload event handler, we’ll put in the names of our animation images, in the order they should appear in the animation (that is, frame 1 first; frame 2 second, etc.).

function pageLoad() {
	for(var i = 0; i < arguments.length; i++) {
		imgArray[i] = arguments[i];
		var tmp = new Image();
		tmp.src = arguments[i];
	}
}

Step 3: The Animation Function

To animate our JPGs, we simply get the image via getElementById, then assign it a new src attribute from the global array. We then increment the index counter by one, and reset it back to 0 if that index goes out of range.

Finally, we use setTimeout to call the script over and over again; in our case, we’ll change images every half-second.

function animate() {
	var theImage = document.getElementById('imgToSwap');
	theImage.src = imgArray[imgIndex];
	imgIndex = imgIndex + 1;

	if(imgIndex == imgArray.length) {
		imgIndex = 0;
	}
	timerID = setTimeout('animate()', 500);
}

Step 4: The Stop Function

Finally, we need a way to stop the images from changing; that’s as simple as calling clearTimeout on the timer we created in the animate() function.

function stop() {
	clearTimeout(timerID);
}

Step 5: The HTML

Two quick HTML tag changes make everything work. First, we add the images to the pageLoad function’s arguments, and call that from the onload event of the BODY tag.

<body onload="pageLoad('elena1.jpg', 'elena2.jpg', 'elena3.jpg', 'elena4.jpg', 'elena5.jpg', 'elena6.jpg')">

The IMG tag takes an onmouseover event that calls the animate() function, and an onmouseout event that calls stop().

<img src="elena1.jpg" alt="animated gif" id="imgToSwap" onmouseover="animate()" onmouseout="stop()" />

And that’s all there is to it. You can see a working demo here:

http://www.dougv.com/demo/js_animated_imgswap/example2.html

Again, to use it, just save the page to your computer, copy the JavaScript to your page and change the images as appropriate.

Related Posts

1. Displaying A Random Image From A Directory Via PHP (61.1)
2. Display A Random Image With JavaScript / DOM (27.8)
3. Displaying A Random Yahoo! Search Every 30 Seconds With JavaScript And PHP (25.2)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> In a recent blog post about randomly displaying an image from a directory via PHP and its built-in image and filesystem functions, I promised to expand upon the answer I had given to demonstrate some other cool filesystem tricks.

It’s about time I made good on that promise.

We’ll start by showing how to display a random image on a Web page, rather than forging the PHP to represent itself as an image; and we’ll also make a thumbnail gallery of all the images in the folder, which even shows the active image.

Displaying The Random PHP Image On The Page

The script to randomly select and display an image on a Web page is remarkably similar to the original script in this post, except that we’re going to find the image’s URL to apply as the src attribute for an IMG tag, rather than putting the image directly to the output buffer.

That URL we’ll store as the variable $img_src:

$img_path = "images/";
$exts = "/(.jpg)|(.jpeg)|(.gif)|(.png)$/i";

if(is_dir($img_path)) {
	$img_handle = opendir($img_path);

	while (false !== ($img_file = readdir($img_handle))) {
		if (preg_match($exts, $img_file)) {
			$img[] = $img_file;
		}
	}

	mt_srand();
	$len = count($img) - 1;
	$index = mt_rand(0, $len);
	$img_src = $img_path . $img[$index];

	closedir($img_handle);
}
else {
	die("no such directory!");
}

And now, to display the “random” image, we simply echo out $img_src inside an IMG tag:

A Thumbnail Gallery That Shows The Current Image

Using the same methods we employed to select a random, full-size image on the page, we can use to display a series of thumbnail images. In fact, we can even combine the scripts, to apply a background color to the thumbnail that is currently being displayed in full size.

We’ll sort of cheat on layout by using a table to display the thumbnails. (Technically, this can be considered tabular data, but best practices would be to not use a table here).

$i = 0;
$TN_COLS = 3;
$tn_path = "images/tn/";

Next, we’ll use the same method we did above to open the directory and begin iterating through the thumbnails, dumping them into an array as well:

if(is_dir($tn_path)) {
	$tn_handle = opendir($tn_path);

	while(false !== ($tn_file = readdir($tn_handle))) {
		if(preg_match($exts, $tn_file)) {
			$tn_img[] = $tn_file;
		}
	}

Now for the first real change: We apply a natsort on the array.

We do that not only because the filesystem stores icons in an unpredictable manner — that is, any old item in the directory could be listed first in any one iteration of the directory — but because we want the pictures ordered in a way that makes sense to most people.

Unlike a normal array sort, natsort will sort an array more like a human would. For example, if you have thumbnails named 1.jpg through 15.jpg, a normal array sort would place 11.jpg-15.jpg, after 1.jpg but before 2.jpg. Natsort will put 11.jpg-15.jpg at the end of the array, the way most humans would.

	natsort($tn_img);

With the array sorted, we can begin outputting each item in the array as a cell in our table.

We’re going to dynamically create rows in the table based on the $TN_COLS variable we declared earlier. For example, since we declared 3 as the value of $TN_COLS, any time we have a cell that is divisible by 3, we’re going to break for a new row.

We’re also going to see if the thumbnail image we are using is the same as the currently displaying large image. If it is, we apply a class to the table cell; in that class, we define the background color we want to have appear.

	foreach($tn_img as $thumb) {
		if($i % $TN_COLS == 0) {
			echo "
";
		}

		echo "
";
		echo "";
		echo "";
		echo $thumb;
		echo "

n";

		$i++;
		if($i % $TN_COLS == 0) {
			echo "

n";
		}
	}

We have one last housekeeping item: It’s possible we don’t have enough cells to complete the last row. To fix that problem, we add another loop that “pads” the last row with enough empty cells to complete it.

	if($i % $TN_COLS != 0) {
		for($x = $i; $x % $TN_COLS > 0; $x++) {
			echo "
 

n";
		}
		echo "

n";
	}

	closedir($tn_handle);
}
else {
	die("no such thumbnail image path!");
}

You can see this script in action at:

http://www.dougv.com/demo/php_random_image/example2.php

You can download this script and its related images from here: Displaying A Random Image From A Directory Via PHP Source Code

I distribute all code under the GNU GPL 3.

Related Posts

1. Displaying A Random Yahoo! Search Every 30 Seconds With JavaScript And PHP (26.1)
2. Display A Random Image With JavaScript / DOM (25.8)
3. Displaying A New Image Based On Image Choices Via Checkboxes, the HTML DOM and JavaScript (24.5)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> Recently asked on Yahoo! Answers:

How would one code a rotating image (using PHP) that can be hosted on Geocities Pro for, say, a forum?

In the past, I’ve been able to host a rotating image using another method by naming a folder ‘something.png’ to fool a forum into thinking the folder is a picture and it reads the index.php file, which in turn pulls up one of the images I have coded. Now that I’m on Geocities Pro, I cannot make such a folder but would like to still use my rotating image. Is there another way I can code this and still be able to use it with forum BBCode?

Basically, this questioner wants a PHP script to look through the contents of an image directory, randomly select one of the images in that directory, and pass the script itself off as the image.

That’s fairly simple to do in PHP, but it does require a number of steps and a few tricks to overcome some limitations of PHP’s built-in filesystem functions.

This question also gives me a chance to explain working with the filesystem in PHP, and to demonstrate how loops and arrays can be used to produce some really neat results, so I’ll expand on that in a follow-up post.

As always, a working demo and source code will be available for download at the end of this article.

Step 1: Declare Basic Variables

We’ll start by declaring two variables:

• The path, relative to the script, of the folder containing the images we want.
• A regular expression that gives us the allowed extensions for our images.

For those who are new to the term, a regular expression is basically a text pattern you want to find. It uses special characters and syntax to indicate what you want to find; in our case, we’re going to search for file extensions.

Don’t worry if you don’t understand the expression; trust me that this one will allow you to use image files with the extension .jpg, .jpeg, .gif or .png; the test will also be case-insensitive, so .JPG is the same thing as .jpg.

More on all that later. Let’s look at the opening code.

$img_path = "images/";
$exts = "/(.jpg)|(.jpeg)|(.gif)|(.png)$/i";

Step 2: Open The Directory And Iterate Through The Files

Our next step is to make sure the image directory we declared actually exists. If it does, we want to go ahead and open the directory, then begin looking through the files.

An aside on the difference between evaluating equivalence vs. identity: Notice, in the code below, that we use the identity operator (===), and not the equivalence operator (==), to test whether we have read all the files in the directory.

We do that because, as the PHP documentation notes, readdir() may not return a Boolean “false,” but may return another value that is the same as false.

The identity operator allows us to compare two variables not on the basis of them having the same value (equivalence), but being the same thing.

If we just use the equivalence operator, and readdir() returns a value that means the same as Boolean false, that won’t be equal to Boolean false; our loop would continue and we’d get an error. If we use the identity operator, we know that whatever false value readdir() actually returns, it means the same, for all intents and purposes, as Boolean false; our loop will stop executing. (End of aside.)

if(is_dir($img_path)) {
	//open directory
	$img_handle = opendir($img_path);

	//iterate through all items in directory
	while (false !== ($img_file = readdir($img_handle))) {

Step 3: Put All Image Files Into An Array

We’re going to read the names of all image files into a dynamic array, the reasons for which will be clearer in a moment. For now, you’ll notice we use preg_match, the preferred method for running a regular expression match against a string, to make sure that the file we’re currently looking has an extension that’s in our allowable extensions list.

An added bonus of this approach is that it resolves problems with subdirectories in PHP.

Basically, in PHP, if you are iterating through a directory and it has subdirectories, the built-in functions in PHP will treat all subdirectories as files; you can’t even evaluate if the subdirectory is a directory.

Needless to say, that’s a major problem, and the only effective way to work around it, via the filesystem, is to read each “file,” then see if trying to enter it, as if it were a directory, works. If so, you’ve found a subdirectory, not a file.

That’s pretty wasteful, in my opinion, and possibly dangerous. It makes much more sense, and is far less resource-intensive, to simply look at the name of the file and see if it matches the kind of file we want.

Note that not all Web hosts will have compiled support for Perl-Compatible Regular Expressions (PCRE). Virtually all do, but yours may not have; if not, this script won’t be of much use to you.

Lastly, once we’re done looping through the files in the directory, we want to close the directory to free up the considerable resources PHP uses to work with the filesystem.

if (preg_match($exts, $img_file)) {
	$img[] = $img_file;
}

closedir($img_handle);

Step 4: Select The Random Image Via A Random Number

Here’s the magic: Since we’ve dumped all the file names into an array, all we need to do is randomly generate an index number, and pull out from the array the name of the file that is at that index.

So, our task list for this step is:

• Initialize our random number generator;
• Get the total number of items in the array and subtract one, which will give us the index of the last item in the array. If there are no items in the array, we’ll die and report that fact;
• Generate a random number between 0 and the integer we get from the step above, which gives us a random index for the array;
• Append the file path to the array cell contents at the index we generated, which gives us a full file path to one of the images in the directory.

mt_srand();

if(count($img) == 0) {
	die("no images in image directory");
}
else {
	$len = count($img) - 1;
}

$index = mt_rand(0, $len);
$img_src = $img_path . $img[$index];

Step 5: Get The Content-Type

The way we’re going to make this PHP script act like an image is by forging the HTTP header’s content-type value. Instead of outputting “text/html”, which Web pages send, we’ll send one of the image types, depending on our file’s extension.

So first, we need to get the extension from our file.

• We set the basic part of the content-type string as a variable.
• We split the file’s name into an array, around the periods.
• We then remove the last item of the array, which will contain our extension. We know that because by virtue of the regular expression we used to sort files earlier, we know all files will end with one of our four image file extensions.
• We cast the extension down to lower-case, to make sure we get a case-insensitive match.
• We run the extension through a switch that assumes the file is a JPEG, but changes the content-type to GIF or PNG if that’s what we actually have.

$ct = "Content-type: image/";

$temp = explode(".", $img_src);
$temp = array_pop($temp);
$temp = strtolower($temp);

switch($temp) {
	case "png":
		$ct .= "png";
		break;
	case "gif":
		$ct .= "gif";
		break;
	default:
		$ct .= "jpeg";
}

Step 6: Echo Out The Forged Header And The Image

Outputting our image is as simple as sending the forged header (via the cleverly-named header() function) and then dumping the image file’s contents directly to the output buffer via readfile().

header($ct);
readfile($img_src);

And, as a final step, we’ll add an else statement to the opening if statement; if the path we specified in Step 1 doesn’t lead to a directory, we’ll die the script and report that.

else {
	die("no such directory!");
}

And that’s all there is to it. You can see the script in action here:

http://www.dougv.com/demo/php_random_image/index.php

Just reload the page to see a different image.

A final aside on randomness: When selecting a random number, the larger the range, the more random the number. Thus, the more images that act as a source for this script, the more random your results. I’m using 15 images. (End of aside.)

You can download the source code here: Displaying A Random Image From A Directory Via PHP Source Code

I distribute all code under the GNU GPL 3.