An Image-Based 'Checkbox' Via JavaScript / DOM
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.
Continue reading: An Image-Based 'Checkbox' Via JavaScript / DOM »
Swapping An Image From A Non-Animated GIF To An Animated GIF Via JavaScript / DOM
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?
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.
Displaying A Random Image From A Directory Via PHP, Part 2
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.
Continue reading: Displaying A Random Image From A Directory Via PHP, Part 2 »
Displaying A Random Image From A Directory Via PHP
Recently asked on Yahoo! Answers:
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.
Continue reading: Displaying A Random Image From A Directory Via PHP »
Showing A Larger Image On Thumbnail MouseOver with JavaScript / DOM
A fairly common question on Yahoo! Answers centers on thumbnail image galleries, where a “master” image changes whenever you mouse over various thumbnails. Such as this one:
Mouseover thumbnail in one frame changes pic in different frame in Javascript-Need Help!?
{code snipped}
Good: image displayed in content frame
bad: image does not update to a new image (x var)
bad: writeContent() excutes repeatedly stacking images(mouseover)
Some time ago I had discussed swapping a “master” image’s source when someone clicked on a thumbnail, and had directed mouseover questions to that blog entry. But this gives me a chance to answer the mouseover question directly, and to add a bonus feature: pre-loaded images, so the image swaps occur almost instantaneously.
I’ll also provide two examples: One that leaves the new image until a different thumbnail is moused over, and another that restores the original image any time you mouseout of a thumbnail.
As always, the code and the sample images are available for download at the end of this article.
Continue reading: Showing A Larger Image On Thumbnail MouseOver with JavaScript / DOM »
