File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Change image when a user clicks on it Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Change image when a user clicks on it " Watch "Change image when a user clicks on it " New topic

Change image when a user clicks on it

Chris Pare

Joined: Dec 01, 2010
Posts: 5

I have a simple little homepage that I created to give me all the links that I frequently need at work, and like any pet project it's grown in scope to where my entire team is using it and starting to share it with others.

Recently I added a random image to the background that scales to the edges of the window frame using css and javascript, and a shaded box behind the text to make the links easy to see, it’s really starting to look good, and it’s been a great chance for me to play with css and JavaScript, something I don’t get to play with much in my normal workday.
Now that I have almost 200 images for the random number generator to select, I am finding that I sometimes I want to “Lock” the wallpaper so I can enjoy it for a few days.

I am imagining an image of a lock in the bottom left corner that would appear “unlocked” if the wallpaper is random, and by simply clicking the icon it would write a cookie to your machine containing the image number, and change the image to a lock that’s been “locked” so users know the image is “Locked In”. When the page loads I will check for the cookie, if it exists I can then set the image to the value in the cookie, if it’s not there they get a random image. If the user clicks the lock icon again the cookie would be removed, and the image reverted to the “Unlocked” image.
I think I can handle the cookie create/read/delete once the onclick event is called, but I can’t hack through the image “toggle” component. Does anyone contribute some sample code, or suggest a better approach?

Currently this page is only an html page; I would prefer to keep it that way.
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63866

Sounds fairly straightforward. What in particular has you flummoxed?

[Asking smart questions] [About Bear] [Books by Bear]
Chris Pare

Joined: Dec 01, 2010
Posts: 5

I think I need a few suggestions, I am stumped on this one (mostly with how to toggle the image) - here is my simple demo I am trying to get working, but it only changes once and doesn't toggle back.

Ashutosh M Kulkarni
Ranch Hand

Joined: Jun 07, 2010
Posts: 41

Well, as far as the toggling goes, you are sending lockIt() method an argument with value 1.
So long the value of i is 1, the image loaded will always be "locked.jpg"

You will need to come up with some logic through flags, maybe; that can detect whichever image is loaded, and change it to the alternate one.

SCJP 6, next stop - OCPJWCD!
I agree. Here's the link:
subject: Change image when a user clicks on it
It's not a secret anymore!