Win a copy of Testing JavaScript Applications this week in the HTML Pages with CSS and JavaScript forum!
  • 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 all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Liutauras Vilda
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • fred rosenberger
  • salvin francis
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Carey Brown

Change image when a user clicks on it

 
Greenhorn
Posts: 5
Eclipse IDE Java Ubuntu
  • Mark post as helpful
  • send pies
  • 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.
 
Marshal
Posts: 67425
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • 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
  • 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
  • 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.
 
The problems of the world fade way as you eat a piece of pie. This tiny ad has never known problems:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic