How to make a picture change on click without javascript

does anyone know how to make a picture change when you click it, and then change back when you click it again? preferably without javascript if possibleHow to make a picture change on click without javascript
You can't. You'll have to use JavaScript to do something like that.

HTML Dude's answer includes an example of how to do it (using JavaScript, which he doesn't seem to realize) that will work just fine.How to make a picture change on click without javascript
You don't have to use JavaScript to do what you wanted to do! Guess you weren't interested in learning how to do it with CSS only.



Ron

Report Abuse

Y!A is still hosed - won't let me post code examples. I sent you an email that should help.



Added: trying to post the code again...



%26lt;html%26gt;

%26lt;head%26gt;

%26lt;style%26gt;

#rollImg {

background-image: url(image0.jpg);

height: 900px;

width: 600px;

}

#rollImg:hover {

background-image: url(image1.jpg);

height: 900px;

width: 600px;

}

%26lt;/style%26gt;

%26lt;script%26gt;

// initialize imgCnt for recording which image is

// currently active in the JavaScript managed image

var imgCnt = 0;

%26lt;/script%26gt;

%26lt;/head%26gt;

%26lt;body%26gt;

%26lt;!--

background image for the next div will change in response

to mouseovers under CSS control

--%26gt;

%26lt;div id=';rollImg';%26gt;%26lt;/div%26gt;

%26lt;p%26gt;

%26lt;!--

source attribute for next image will change in response to

click events on the image under JavaScript control

clicks swap {imgCnt} back and forth between 0 and 1 to

record which image is in use

--%26gt;

%26lt;img src=';image0.jpg';

onclick=';imgCnt = (++imgCnt)%2; this.src = (0 == imgCnt)?'image0.jpg':'image1.jpg';'; /%26gt;

%26lt;/p%26gt;

%26lt;/body%26gt;

%26lt;/html%26gt;
Try these that I have linked for you from A List Apart: http://search.atomz.com/search/?sp-q=CSS
Can do it without clicking and using CSS and mouseover if that would work for you.



Ron