/    Sign up×
Community /Pin to ProfileBookmark

change image of link after being clicked on

Copy linkTweet thisAlerts:
Sep 10.2010

I read some other threads regarding how to toggle an image but I was having a hard time understanding. I have a bunch of images on my page, each links to a different lytebox presentation when you click on them. I’d like to have the clickable image change to another image to indicate to the user that they have viewed that presentation. I was hoping there was a way to switch to the new image permanently rather than just toggling back and forth between the two images if they click on the presentation more than once. Thanks for any ideas!

tony

[URL=”http://tonyvsarchitecture.com”]tonyvsarchitecture.com[/URL]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Gozzy82Sep 10.2010 — you can use the css visited pseudo class if you create use a backgroundimage you can change the position

something like

a.yourCssClass:link { height:20px; background-image:url(bla.gif) }

a.yourCssClass:visited {background-position:0px -20px; }

if you make your background gif bla.gif so that the first 20px is red and the lower 20px is blue it will show the red bar normally and blue after you have clicked the link..


so this is more a CSS question; if you want to do this with javascript you can store the link id's in a cookie and set the background image on pageload or something like that, i would use css ?
Copy linkTweet thisAlerts:
@OfekmeisterSep 10.2010 — [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>

<head>

<script type="text/javascript">
<!--

function ChangeImg()
{

var x = document.getElementById('img1');

x.src = "different_url";

x.removeAttribute("onclick");

}

//-->
</script>

</head>

<body>

<img id="img1" src="url" alt="img1" onclick="ChangeImg()" />

</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@shatterjackauthorSep 10.2010 — thanks you guys, it looks like you are giving me three options, html, css and java. Just to clarify, I want the image you click on to change after you've clicked on it, not what it links to. For the option with css, is that a class for the div the images are in, or one for the img tag itself? I pasted a bit of html for one of the images and the lytebox slideshow it opens. Maybe this might help determine which option is best? Thanks for helping out someone getting started.


[code=html]<a href="my images/noncom_projects/grilla_and_kittay/1.jpg" rel="lytebox[coat_hanger]" title="image description"><img src="my images/pictos/picto_coathanger.jpg" alt="alt text" width="150" height="110" border="0" class="thrColFixHdr" style="display:block;margin:auto"; /></a>
<a href="my images/noncom_projects/grilla_and_kittay/2.jpg" rel="lytebox[coat_hanger]" title="Hot From The Molds."></a>[/code]
Copy linkTweet thisAlerts:
@OfekmeisterSep 11.2010 — My JavaScript code does just that. Also, JavaScript and Java are two completely different languages.
Copy linkTweet thisAlerts:
@shatterjackauthorSep 13.2010 — thanks meister, I was hoping you could explain a bit about the function itself, what those three lines are doing? It would help me figure out how to make it work since I have a series of images and each would change to a unique image after being clicked on (A.jpg->1.jpg, B.jpg->2.jpg etc).
Copy linkTweet thisAlerts:
@OfekmeisterSep 13.2010 — The first line was so I didn't have to type as much, could have just been:
[CODE]function ChangeImg()
{

document.getElementById('img1').src = "different_url";

document.getElementById('img1').removeAttribute("onclick");

}[/CODE]

The second line changes the image, provided that you change different_url to an actual address.

The third line removes the onclick event attribute from the image that was clicked so, if clicked again, nothing will happen.
×

Success!

Help @shatterjack 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...