This is absolutely cringeworthy to admit, but most refrigerator vegetables are more skilled at javascript than I am. After a long and unproductive conversation on the subject with a zucchini, I have decided to seek your advice.
I have for some time been looking for ways to view my expanding collection of tiling background images. At first I thought that I’d make local web pages - kind of like a catalog. That route seemed fraught with lots of pages to wade through and lots of work to create and keep up. I thought “wouldn’t it be nice to just list them on a single page as a list of links, and have the page background change as I click the link.” The solution seemed simple, and this is what I made:
var imageBG = new Array();
imageBG[0] = "";
imageBG[1] = "type.png";
imageBG[2] = "vichy.png";
function switchBG(whichBG) {
if (document.body) {
document.body.background = imageBG[whichBG];
}
}
Then I just call the function from the link like so
Until you try and populate the array with a couple hundred images. It occurs to me there must be a way to pass the image name to the script from the link, so that the script doesn’t need updating - only the links do. Can anyone point me in the right direction?
You could set each link as an anchor to the image – as long as they were all PNG or JPG or similar. But a much easier way to do this would be to simply place all of the images inline in a hidden DIV on the page. You could iterate over all of them when the page loads. This would have the additional benefit that all of the images would be pre-cached and the effect would happen much faster.
This script requires Prototype, and should either be wrapped in an event listener to wait until the DOM is loaded, or should be place in a script block below the elements it refers to (before /body will work nicely). If you use Protaculous to add this to your page (and get Prototype linked up correctly in the bargain) you would paste this in the top Function Body so it would fire before the page appeared on screen.
Line by line, here’s what it does:
Hide the DIV with the ID ‘photoBox’, and gather all of its img children as an array of image objects.
Create a new select (picker) with an unique ID and set to size 1.
2 continued
2 continued
2 ends
Start a loop over the images
For each image, add a new option to the select with the label set to the image’s alt text and the value set to the image’s src attribute.
End the loop.
Start an observer on the select, watching it for the ‘change’ event to fire.
If the observer notices the event, set the page background to the current value of the select.
End the observer.
Set the default background for the page to the first image in the array.
Insert the dynamically-generated select into the DIV with the ID ‘pickerBox’.
And if you didn’t want a select, you could create a list of links like this:
The variation here is in the observer: rather than listening for a click on each of the individual links, this uses a pattern called event delegation to set a single observer on the box that holds the links, then check if the click was on a link and act on just that link.
I realize that it can be quite a stretch to get from basic JavaScript to Protoype-flavored JavaScript, but stare at it long enough and it starts to make sense. Once you start to write code this way, you will never go back willingly to the old way. I think I’ve forgotten how to construct a for loop, having used each() for so long instead.
Walter
On Aug 29, 2012, at 12:51 PM, The Big Erns wrote:
This is absolutely cringeworthy to admit, but most refrigerator vegetables are more skilled at javascript than I am. After a long and unproductive conversation on the subject with a zucchini, I have decided to seek your advice.
I have for some time been looking for ways to view my expanding collection of tiling background images. At first I thought that I’d make local web pages - kind of like a catalog. That route seemed fraught with lots of pages to wade through and lots of work to create and keep up. I thought “wouldn’t it be nice to just list them on a single page as a list of links, and have the page background change as I click the link.” The solution seemed simple, and this is what I made:
var imageBG = new Array();
imageBG[0] = “”;
imageBG[1] = “type.png”;
imageBG[2] = “vichy.png”;
function switchBG(whichBG) {
if (document.body) {
document.body.background = imageBG[whichBG];
}
}
Then I just call the function from the link like so
Until you try and populate the array with a couple hundred images. It occurs to me there must be a way to pass the image name to the script from the link, so that the script doesn’t need updating - only the links do. Can anyone point me in the right direction?