I'm wanting to have a button on a web page where if I click on that button it changes colour. Basically I have 3 images of leds being on, a green a yellow and a red. Depending on the state the normal running state would be green and if there was a problem I could make it yellow and if it was off make it red.
Rather than having 3 different buttons, I want to have 1 that can change when clicked and just cycle through the 3 colours. I don't know if this is possible, but someone suggested I try jQuery, which I'm still learning about and hopefully someone can help me with this.
Here are the buttons below I'm wanting to work with.
charlie is right. use a css sprite to render your button background image. a 'sprite" is basically one image that contains lots of smaller images. jquery ui makes extensive use of sprite images. click here to see an example of a sprite image. once you get the sprite image created, you would then use css positioning to show the part of the image you want to use. it's pretty simple.
are you using checkbox inputs in "operational", "offline", and "degraded"? just curious.
Yes I was using checkbox inputs in "operational", "offline", and "degraded". The way our current document is set up is basically the same where we have to tick the appropriate boxes. Someone suggested to me that it would look better with a single light, that's why I wanted to see if there was a way to do it.
I am trying to set up an online shift handover log, because there are a number of different sections I will have to have tabs for the different ones, but would like to be able to have a dashboard type thing where information put in on each section will show up on the main page or dashboard. I'm not sure how to make that work as I've only been working on this for about a week. I don't know if there is a way a dashboard can automatically pick up that a field has been entered in to and can replicate that or if you have to maybe submit the fields in to another page? Ideally it would be good to have a database type thing that could be searched on for words, but if I can't do that, being able to maybe save the pages as a pdf file and also being able to submit it as an email. I guess I'll just have to see how I go at one thing at a time.
Thanks Jake, that works great, I'm sure I can use that, I think I'll look at seeing if I can get it to work on clicking on the same button and cycling through the colours too. If you noticed I had Shifts on the page and maybe I could add 2 more images of the sun and the moon that show up when clicking on shift.
What was the submit button for?
When creating a sprite image, is it just a matter of keeping the images close together and is there a preferred image format? Can I also add other images but different sizes such as a sun and moon icon.?
How do you work out where the image is too?
Here is an image I put together, is this ok to use as a sprite image on my page?
The submit button was there for my stand-alone testing. there are a few lines for parsing the url params as well.
the more images (of the same size) in a sprite the merrier it is! Mixing sizes requires more exacting CSS.
I like my sprites to be long or wide, not multiple rows. It makes for less numbers in the CSS. keeping the images close in the sprite is not necessary because all image formats are compressed. Your sprite image is perfectly good!
If you look at the CSS I use classes to switch the position in the sprite
So I guess then that maybe positioning the images say every 50px or 100px would make life a lot easier.
What size image would be considered too big, because I'm thinking if I can work out how to click on a button or link that can cycle through images to display and work out how to display an image anywhere that can do what I want, then I could probably make a sprite image with all the images on the page.
Positioning the images in the sprite is your choice. Certainly nice round numbers are better than odd numbers, and the extra space between images give you a little leeway if you can’t count pixels. I can’t count pixels every time!
Sprites are usually for background images. The more you cram into the sprite the less http requests are made to the server, and the less images you might want to pre-load.
Many jQuery programmers write pages that first work without any scripting. Then use jQuery to enhance. That’s why I wrote the page with radio buttons in the HTML, and let the jQuery change it into a span with all the css needed to make the page pop.
It all gets a bit more difficult when you bring in your back-end choices. But, that’s another story!
Leave a comment on Gigantor's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic