CODEWITHSUNDEEP
htmlcss
user3142838
user3142838

Reputation: 23

How to make an image enlarge when clicked?

I am making a product show off on my site and I want to include multiple images. Like in craigslist, their is a main picture that always shows up when you go to the page but then their is little pictures below that picture. So how to I make it so when I click one of those smaller pictures, it replaces the big one with it.

Upvotes: 2

Views: 12302

Answers (2)

Rik Schaaf
Rik Schaaf

Reputation: 1183

I don't think it can be done with HTML and CSS alone.

I think it can be done for hovering though. This can be done by using CSS psuedo-classes. It is similar to the styling of hyperlinks. This is an example for those hyperlinks, but you can wrap the image in an a tag to make this work.

a:link {width:100px;height:150px;}      /* unvisited link */
a:visited {width:100px;height:150px;}  /* visited link */
a:hover {width:400px;height:600px;}  /* mouse over link */
a:active {width:400px;height:600px;}  /* selected link */

`

Edit: I made an example that shows how it works (still hovering, not clicking):

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style  type="text/css">
        div {
            display:inline-block;
        }
        a > div {
            background-color:blue;
            color:yellow;
            text-align:center;
        }
        a:link > div {width:100px;height:150px;}      /* unvisited link */
        a:visited > div{width:100px;height:150px;}  /* visited link */
        a:hover > div{width:400px;height:600px;}  /* mouse over link */
        a:active > div{width:400px;height:600px;}  /* selected link */ 
        a:link {width:100px;height:150px;}      /* unvisited link */
        a:visited{width:100px;height:150px;}  /* visited link */
        a:hover{width:400px;height:600px;}  /* mouse over link */
        a:active{width:400px;height:600px;}  /* selected link */ 
        a:link p {margin:60px 0px 0px 0px}      /* unvisited link */
        a:visited p{margin:60px 0px 0px 0px}  /* visited link */
        a:hover p{margin:280px 0px 0px 0px}  /* mouse over link */
        a:active p{margin:280px 0px 0px 0px}  /* selected link */ 
    </style>
    </head>
    <body>
        <a href=""><div><p>Hover</p></div></a>
    </body>
</html>

Upvotes: 1

ggdx
ggdx

Reputation: 3064

The simplest way I can see is -

using jQuery and using a data-attribute on the smaller images -

$('#smallImage').click(function(){
   var imgUrl = $(this).attr('data-largeimage');
   $('#mainImage').attr('src',imgUrl);
});

Upvotes: 0

Related Questions