• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Change image when a user clicks on it

 
Greenhorn
Posts: 5
Eclipse IDE Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sounds fairly straightforward. What in particular has you flummoxed?
 
Chris Pare
Greenhorn
Posts: 5
Eclipse IDE Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.

 
Ranch Hand
Posts: 41
Eclipse IDE Firefox Browser Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
reply
    Bookmark Topic Watch Topic
  • New Topic