/    Sign up×
Community /Pin to ProfileBookmark

Change An Image When It’s Clicked

Copy linkTweet thisAlerts:
Jul 09.2007

Yes, I know, you’re probably thinking, “why can’t this guy figure out how to do sometime so simple?!” Well, I did learn CSS long time ago, but forgot it all. Mostly I learn and [I]remember[/I] stuff from looking at other work (by example then).

Anyway, I’m trying to figure out how to change a button (which is an image) when a visitor is on that part of the button’s section. lol, let me try to re-explain this…

A visitor comes and clicks on Button 2 (which would be an image), well, webpage 2 comes up. Now Button 2 has changed indicating the visitor is in that section of the website.

Makes sense? Well, I have tried by example and failed so many times. So that’s why I’m here. Sorry to bother everyone with such a simple and stupid question. ?

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Jul 09.2007 — Why wouldn't you just put the alternate image on the new page?
Copy linkTweet thisAlerts:
@QuantumPressureauthorJul 09.2007 — Why wouldn't you just put the alternate image on the new page?[/QUOTE]

Hi Ray! Thanks for your suggestion, but this is going into a header on a message board, and would only work if it's CSS.
Copy linkTweet thisAlerts:
@WebJoelJul 09.2007 — Do you mean LVHA?

a:link {}

a:visited {}

a:hover {}

a:active {}

and in this order LVHA, and since you are using [I]images[/I], you use the [U]same[/U] [I]background-image:url()[/I] which becomes 'brighter' or 'darker' or 'change the hue' indicating the 'state' of the link (on-hover, on-mousedown/active, etc) Oooo, -I might have to write-up an example of this! ?

Remember, -this is 'pseudo-class' which only works on "anchors" in IE although there is a *hta routine that can make non-anchor behave on pseudo-classes.
Copy linkTweet thisAlerts:
@ray326Jul 09.2007 — this is going into a header on a message board[/QUOTE]It's still unique markup for each page if it takes you to a different page when you click it. So far it's not making sense to me. I guess I need a link to a demo to go further.
Copy linkTweet thisAlerts:
@QuantumPressureauthorJul 09.2007 — Here's a website that has what I'm looking for. Check out thier menu for their website.

http://www.cssplay.co.uk/

Notice that when you click on the button, it stays green for when your on that part of the website. That's what I'm trying to figure out how to do. Only they use text on their buttons. While mine is nothing but an image.
Copy linkTweet thisAlerts:
@WebJoelJul 09.2007 — This, -now that I built it, -is probably not what the OP is after... but it is a navigation list that changes the [I]background-image[/I] for whatever state (link, visited, hover, active) but I suspect that either using an actual alter-image on a per-page basis (or some SSI maybe??) is what he needs.

And oh yeah... these are the most gosh-horrid image backgrounds. Ever. :eek: I just grabbed a texture from PaintPro and tweaked the hue and ...yuk! :o

[upl-file uuid=350fac4a-39b6-464b-ac91-dd090585c3a8 size=11kB]li-BG-states.zip[/upl-file]
Copy linkTweet thisAlerts:
@WebJoelJul 09.2007 — Here's a website that has what I'm looking for.

http://www.cssplay.co.uk/

Notice that when you click on the button, it stays green for when your on that part of the website. That's what I'm trying to figure out how to do. Only they use text on their buttons. While mine is nothing but an image.[/QUOTE]
Oh my... then, I sort-of guessed right. (Except that site uses much better images, -[I]gradient-colored[/I])
Copy linkTweet thisAlerts:
@QuantumPressureauthorJul 09.2007 — LOL Joel, you got it right though. You understood me. Sorry to make eveyrone so confused. You can tell by now I have a hard time describing things.

So now that we're on the same page, what do I have to do now in CSS?
Copy linkTweet thisAlerts:
@ray326Jul 09.2007 — Did you give him the body id solution, Joel?
Copy linkTweet thisAlerts:
@WebJoelJul 09.2007 — Did you give him the body id solution, Joel?[/QUOTE] No, -did not think/remember that (it was in a post like a week ago?) until more than half-way done with my template example (zip-folder). The body id solution would be ideal for merely idicating that you are on [I]this[/I] page. I was thinking more along the lines of dynamic navigation links, as per my example. ?
×

Success!

Help @QuantumPressure spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...