KirkHings.com » html

Slideshow from Images Array

Kirk — Fri, 15 May 2009 19:57:23 +0000

This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a JavaScript image slideshow with next and previous links that use an array. Loop the script so the slideshow never reaches an end.

The HTML solution:



	NASA Patches Slideshow
	
	


	
		NASA Patches Slideshow
		
		
        	« Previous  
            Next »

The JavaScript solution:

window.onload = initLinks;

// create array of pictures/strings
var myPics = new Array("images/nasa.jpeg", "images/columbia1.gif", "images/columbia2.jpeg", "images/columbia3.jpg", "images/columbia4.jpeg", "images/challenger.jpeg");

// track currently displayed image, set to 0
var thisPic = 0;

// handle behaviors when next and previous links are clicked
function initLinks() {
	// when prevLink is clicked, call function to fetch the previous pic
	document.getElementById("prevLink").onclick = processPrevious;
	// when nextLink is clicked, call function to fetch the next pic
	document.getElementById("nextLink").onclick = processNext;
}

// called when prevLink is clicked
function processPrevious() {
	// if we are on slide 0
	if (thisPic == 0) {
		// then set thisPic to be same value as array length (meaning last picture)
		// this allows looping around the collection not reaching an end
		thisPic = myPics.length;
	}
	// decrement thisPic to be one less than last pic so as to point to previous
	thisPic--;
	// set source of page's displayed picture to be new current
	document.getElementById("currentPicture").src = myPics[thisPic];
	// js handled the work, so prevent next page from being fetched
	return false;
}

// called when nextLink is clicked
function processNext() {
	// incerement thisPic to be one more than last pic so as to point to next
	thisPic++;
	// if we are on last picture in array
	if (thisPic == myPics.length) {
		// then set thisPic to be original value in array (meaning first picture)
		// this allows looping around the collection not reaching an end
		thisPic = 0;
	}
	// set source of page's displayed picture to be new current
	document.getElementById("currentPicture").src = myPics[thisPic];
	// js handled the work, so prevent next page from being fetched
	return false;
}

Here is a screenshot example of a previous slideshow image:

Example of the previous image fetched

Here is a screenshot example of a next slideshow image:

Example of the next image fetched

Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...
Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
Accessible JavaScript Rollover with Three-State Functionality photo credit: Rhian vK This programming challenge is from...
Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...

Disjointed JavaScript Rollover Causes Separate Animation

Kirk — Wed, 22 Apr 2009 19:57:17 +0000

photo credit: Matt McGee

Challenge: Create a JavaScript image rollover animation which includes a default image, and a hover over image. Use abstracted functions. Improve accessibility by creating onfocus and onblur event handlers for users without mice. Make the rollover occur when you mouse over a different document element.

The HTML solution:



	A Disjointed Link Rollover
	
	


	
		Next page

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

The JavaScript solution:

// initialize the rollovers when window loads
window.onload = rolloverInit;

function rolloverInit() {
	// loop through all links on page
	for (var i=0; i
And finally here is a screenshot of the link highlighted result:




Related posts:
Three-State JavaScript Rollover  photo credit: chimothy27 This programming challenge is from a...
Accessible JavaScript Rollover with Three-State Functionality  photo credit: Rhian vK This programming challenge is from...
Simple and Improved Image Rollovers  photo credit: Etwood This programming challenge is from a...
Random Image Display with JavaScript  photo credit: davidChief This programming challenge is from a...

Accessible JavaScript Rollover with Three-State Functionality

Kirk — Wed, 22 Apr 2009 18:55:08 +0000

photo credit: Rhian vK

Challenge: Create a JavaScript image rollover animation which includes a default image, a hover over image, and an image when the link is clicked. Use abstracted functions. Improve accessibility by creating onfocus and onblur event handlers for users without mice.

The HTML solution:



	An Accessible Three-State Rollover

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

The JavaScript solution:

// initialize the rollovers when window loads
window.onload = rolloverInit;

function rolloverInit() {
	// loop through all images on page
	for (var i = 0; i < document.images.length; i++) {
		// if current image is wrapped in an anchor tag (i.e. )
		if (document.images[i].parentNode.tagName == "A") {
			// initiate rollover setup for this current image, pass the current image to that function
			setupRollover(document.images[i]);
		}
	}
}

// 'thisImage' passed from rolloverInit, meaning we need to setup the rollover for this particular image
function setupRollover(thisImage) {
	// create new child image object for thisImage object's outImage property
	thisImage.outImage = new Image();
	// store current image src as the source for outimage, so it stays same when not rolled over
	thisImage.outImage.src = thisImage.src;
	// capture rollOut function as behavior when thisImage's onmouseout event handler is triggered
	thisImage.onmouseout = rollOut;

	// create new child image object for thisImage object's overImage property
	thisImage.overImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	// capture rollOver function as behavior when thisImage's onmouseover event handler is triggered
	thisImage.onmouseover = rollOver;

	// create new child image object for thisImage object's clickImage property
	thisImage.clickImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif";
	// capture rollClick function as behavior when thisImage's onmousedown event handler is triggered
	thisImage.onmousedown = rollClick;

	// improve accessibility
	// set image's parent anchor child Image to thisImage
	thisImage.parentNode.childImage = thisImage;
	// when image's achor tag is unselected (an event handler)
	thisImage.parentNode.onblur = rollOutChild;
	// when image's achor tag is selected (an event handler)
	thisImage.parentNode.onfocus = rollOverChild;
}

function rollOut() {
	// change thisImage's src to the outImage source property (already captured)
	this.src = this.outImage.src;
}

function rollOver() {
	// change thisImage's src to the overImage source property (already captured)
	this.src = this.overImage.src;
}

function rollClick() {
	// change thisImage's src to the clickImage source property (already captured)
	this.src = this.clickImage.src;
}

function rollOutChild() {
	// change the achor tag's childImage src to the childImage's outImage source property (already captured)
	this.childImage.src = this.childImage.outImage.src;
}

function rollOverChild() {
	// change the achor tag's childImage src to the childImage's overImage source property (already captured)
	this.childImage.src = this.childImage.overImage.src;
}

And finally here is a screenshot of the improved end rollover result:

Rollover state A:

Improved rollover state A

Rollover state B:

Improved rollover state B

Rollover state C (clicked button):

Button state when button is clicked

Demonstrating accessible rollover when button is selected but not moused over.

Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
Disjointed JavaScript Rollover Causes Separate Animation photo credit: Matt McGee This programming challenge is from...
Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...
Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...

Three-State JavaScript Rollover

Kirk — Wed, 22 Apr 2009 16:47:36 +0000

photo credit: chimothy27

Challenge: Create a JavaScript image rollover animation which includes a default image, a hover over image, and an image when the link is clicked. Use abstracted functions.

The HTML solution:



	A Three-State Rollover

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

The JavaScript solution:

// initialize the rollovers when window loads
window.onload = rolloverInit;

function rolloverInit() {
	// loop through all images on page
	for (var i = 0; i < document.images.length; i++) {
		// if current image is wrapped in an anchor tag (i.e. )
		if (document.images[i].parentNode.tagName == "A") {
			// initiate rollover setup for this current image, pass the current image to that function
			setupRollover(document.images[i]);
		}
	}
}

// 'thisImage' passed from rolloverInit, meaning we need to setup the rollover for this particular image
function setupRollover(thisImage) {
	// create new child image object for thisImage object's outImage property
	thisImage.outImage = new Image();
	// store current image src as the source for outimage, so it stays same when not rolled over
	thisImage.outImage.src = thisImage.src;
	// capture rollOut function as behavior when thisImage's onmouseout event handler is triggered
	thisImage.onmouseout = rollOut;

	// create new child image object for thisImage object's overImage property
	thisImage.overImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	// capture rollOver function as behavior when thisImage's onmouseover event handler is triggered
	thisImage.onmouseover = rollOver;

	// create new child image object for thisImage object's clickImage property
	thisImage.clickImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif";
	// capture rollClick function as behavior when thisImage's onmousedown event handler is triggered
	thisImage.onmousedown = rollClick;
}

function rollOut() {
	// change thisImage's src to the outImage source property (already captured)
	this.src = this.outImage.src;
}

function rollOver() {
	// change thisImage's src to the overImage source property (already captured)
	this.src = this.overImage.src;
}

function rollClick() {
	// change thisImage's src to the clickImage source property (already captured)
	this.src = this.clickImage.src;
}

And finally here is a screenshot of the improved end rollover result:

Rollover state A:

Improved rollover state A

Rollover state B:

Improved rollover state B

Rollover state C (clicked button):

Button state when button is clicked

Accessible JavaScript Rollover with Three-State Functionality photo credit: Rhian vK This programming challenge is from...
Disjointed JavaScript Rollover Causes Separate Animation photo credit: Matt McGee This programming challenge is from...
Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...
Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...

Simple and Improved Image Rollovers

Kirk — Tue, 21 Apr 2009 17:24:14 +0000

photo credit: Etwood

Challenge: Create a simple javascript image rollover animation. (Two arrow images colored red and blue provided in my set, but you can use any two images you like.) Do basic version first, then improve it by separating script from display code, and abstract the functions.

The Simple Method:

The HTML solution:



	A Simple Rollover

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

This is a quick and dirty method, but it has problems. The biggest problem is the rollover does not execute until the user moves their mouse over the image. If the new image is large or the user’s connection is slow, there will be a noticeable delay in the first time rollover.

Another problem is that are now committed to updating JavaScript code within HTML code. This causes many efficiency hassles, such as intermingling design work with scripting work, and violating Model-View-Controller (MVC) principles.

A better method is to separate the JavaScript from the HTML page. This next improved method will attempt Don’t Repeat Yourself (DRY) principles.

The Improved Method:

The HTML solution:



	An Improved Rollover

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

The JavaScript solution:

// initialize the rollovers when window loads
window.onload = rolloverInit;

function rolloverInit() {
	// loop through all images on page
	for (var i = 0; i < document.images.length; i++) {
		// if current image is wrapped in an anchor tag (i.e. )
		if (document.images[i].parentNode.tagName == "A") {
			// initiate rollover setup for this current image, pass the current image to that function
			setupRollover(document.images[i]);
		}
	}
}

// 'thisImage' passed from rolloverInit, meaning we need to setup the rollover for this particular image
function setupRollover(thisImage) {
	// create new child image object for thisImage object's outImage property
	thisImage.outImage = new Image();
	// store current image src as the source for outimage, so it stays same when not rolled over
	thisImage.outImage.src = thisImage.src;
	// capture rollOut function as behavior when thisImage's onmouseout event handler is triggered
	thisImage.onmouseout = rollOut;

	// create new child image object for thisImage object's overImage property
	thisImage.overImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	// capture rollOver function as behavior when thisImage's onmouseover event handler is triggered
	thisImage.onmouseover = rollOver;
}

function rollOut() {
	// change thisImage's src to the outImage source property (already captured)
	this.src = this.outImage.src;
}

function rollOver() {
	// change thisImage's src to the overImage source property (already captured)
	this.src = this.overImage.src;
}

And finally here is a screenshot of the improved end rollover result:

Rollover state A:

Improved rollover state A

Rollover state B:

Improved rollover state B

Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
Accessible JavaScript Rollover with Three-State Functionality photo credit: Rhian vK This programming challenge is from...
Disjointed JavaScript Rollover Causes Separate Animation photo credit: Matt McGee This programming challenge is from...
Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...

Random BINGO Card Generator with Ajax Reset

Kirk — Fri, 17 Apr 2009 17:17:10 +0000

photo credit: Keees

Challenge: Create a BINGO card using HTML and JavaScript. Generate random integers between 1 and 75, and insert them into each of 24 squares, skipping the center FREE space. Integer ranges are as follow: B = 1-15, I = 16-30, N = 31-45, G = 46-60, O = 67-75. Ensure no two squares contain duplicate numbers. Bonus: After initial card load, enable resetting the card without a server call (quasi-Ajax-powered).

The HTML solution:

Make Your Own Bingo Card

Create A Bingo Card

B	I	N	G	O


		Free

Click here to create a new card

The CSS solution:

body {
	background-color: white;
	color: black;
	font-size: 20px;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

h1, th {
	font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
	font-size: 28px;
}

table {
	border-collapse: collapse;
}

th, td {
	padding: 10px;
	border: 2px #666 solid;
	text-align: center;
	font-size: 24px;
}

#free {
	background-color: #ffff00;
}

The JavaScript solution:

window.onload = initializePage;

// even though arrays are 0-based, creating 76 positions generates elements 0-75, we will later ignore position 0
// note that newly created arrays have all elements set to false
var usedNumbers = new Array(76);

function initializePage() {
	// so older browsers do not get 24 error messages
	if (document.getElementById) {
		// enable creating a new card without reloading page
		document.getElementById("reload").onclick = anotherCard;
		// generate the new bingo card
		newCard();
	} else {
		alert("Sorry, but your browser is not running JavaScript, and this game requires it.");
	}
}

function newCard() {
	for (var i = 0; i < 24; i++) {
		// pass the current i as parameter to setSquare function
		setSquare(i);
	}
}

function setSquare(thisSquare) {
	// capture current corresponding html square (via id=)  to current digit that was passed over
	var currentSquare = "square" + thisSquare;

	// while bingo numbers are ranged 1-75, letter columns are restricted to specific number ranges
	// b = 1-15, i = 16-30, n = 31-45, g = 46-60, o = 67-75
	// OR mathematically we can generate a random number between 1-15 and add column-specific number
	// b = 0, i = 15, n = 30, g = 45, o = 60	

	// need 5 sets of numbers 0-4 (1 set for each letter)
	// note missing '2,' from third set, so as to skip the middle 'free' square
	var columnPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);

	// capture appropriate column mulitple by referencing current square # as array element
	var columnMultiple = (columnPlace[thisSquare] * 15);

	// initialize variable to be used in following do-while loop
	var newNumber;

	// generate newNumber and check if it has been used already, if so loop again
	do {
		// add random number to the particular column multiple
		newNumber = columnMultiple + getNewNumber()  + 1;
	} while(usedNumbers[newNumber]);

	// prevent duplicate numbers by testing if the newNumber has already been used once on this card
	if (!usedNumbers[newNumber]) {
		// if duplicate was not found, this must be an original #, so set this element to true
		usedNumbers[newNumber] = true;

		// assign randomized newNum to current square
		document.getElementById(currentSquare).innerHTML = newNumber;
	}
}

function getNewNumber() {
	// capture random number between 1 and 15 for bingo values
		// math.random() returns random number between 0 and 1
		// math.floor() returns floor of a decimal number (ex. 1.75 becomes 1)
	return Math.floor(Math.random() * 15)
}

function anotherCard() {
	// housekeeping: reset the usedNumbers flag arrays to all false
	for (var i = 1; i < usedNumbers.length; i++) {
		usedNumbers[i] = false;
	}

	// generate the new bingo card
	newCard();
	return false;
}

And finally here is a screenshot of the end result:

BINGO card screenshot

Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...
Disjointed JavaScript Rollover Causes Separate Animation photo credit: Matt McGee This programming challenge is from...
Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...

KirkHings.com » html

Slideshow from Images Array

NASA Patches Slideshow

« Previous Next »

Disjointed JavaScript Rollover Causes Separate Animation

Next page

Accessible JavaScript Rollover with Three-State Functionality

Three-State JavaScript Rollover

Simple and Improved Image Rollovers

Random BINGO Card Generator with Ajax Reset

Create A Bingo Card