Announcement

**alykins** · Aug 18, 2011, 03:08 PM

Originally posted by 49sv View Post

Hello
I have a page which has an image on it, what I want to do is click on that image and that one image will change. I thought I could do this in html/css?
As I search the forums it seems the use of javascript or php/mysql is being used. I do not have a database. Is it possible to do this using html/css only?
Thanks

hovering? yes... onclick? no. But you do not need php/mysql... infact unless you wanted to do a postback evvery time you changed the pic you wouldnt do it that way anyways... you can simply display/"un"-display images/divs/whatever using javascript... and although I have not tried it, I imagine you may also be able to rewrite the image src path so you do not even have to display/"un"-display.

**49sv** · Aug 18, 2011, 03:17 PM

I got it working with this. I stacked the two images on top of each other, which made the height 648 and hid one half.

<style type="text/css">

#test a {display:block; width:544px; height:324px; overflow:hidden;}

a:hover img {margin-top:-324px;}

#test a:hover {zoom:1;}

</style>

</head>
<body>
<div id="test">
<a href="#"><img src="img/hovertest.jpg"alt="test"/></a>
</div>

</body>
</html>

Thanks

**resdog** · Aug 19, 2011, 08:19 AM

It looks like what you've done is to affect the hover state, not a clicked state. You cannot change an image into another on a click with just html and css. You'd need to use javascript to change the image. Or even better, use jquery.

**vikram1vicky** · Aug 19, 2011, 09:47 AM

Following is sample code using inline javascript. make both the images will be of same size, so your layout won't get effected due to images with different size.

Code:

<img src="sample1/image1.jpg" width="120" height="120" alt="image" onclick="this.src='sample1/image2.jpg'" />

**49sv** · Aug 19, 2011, 11:23 AM

vikram1vicky
That works out fine,
Thank you

Announcement

Click on image to change image

Click on image to change image

Comment

Comment

Comment

Comment

Comment