Home > CSS, Front End Development, HTML > How to Build a CSS Image Viewer the Clever Way

How to Build a CSS Image Viewer the Clever Way

July 25th, 2009


Image Viewers are fairly common on websites now-a-days. Most use some form of JavaScript to change images, some use Flash. This is a problem if the user doesn’t have either enabled on their browser.  In this tutorial we’ll cover how to create an image viewer with only using CSS and HTML.

What We Are Building

We be making a simple image viewer that has 4 tabs on the left and a main picture on the right.  When the user clicks on one of the tabs it shows the new image.

image

 

Prepping the Images

First thing we’ll need are images.  In this example I’ve used landscape images, but this could be promotional content, or whatever you like.  I made the main image 500×300, and the tabs 75×125.  I just picked a size for the main image, than divided the height by how many tabs I wanted. (e.g.. 300 / 4 = 75)  This gives me the height of my tabs. The width of tab was arbitrary, I just resized the main image to the height of 75 and the width is whatever it falls at, in this case 125.

 

The Theory

The theory behind how this is all going to work really isn’t that difficult.  We’re going to use anchor tags to jump from one image to the next. This is much like a “Back to Top” link that jumps to the top of the page when you click on it.  The only difference is the images are going to be scrolling within a div wrapper instead up jumping up and down the page.

 

image

 

The HTML

The HTML itself is pretty simple.  For the tabs it’s just an unordered list, with images inside of anchor tags. For the images they’re all wrapped in a div (this is important as we are going to hide the overflow so it only displays your selected image) Also each individual image is wrapped in a div along with a named anchor tag.  These divs are there incase you want to use background images instead of regular images, we really don’t need them in this instance, they’re just there incase we change our mind.

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <div id="wrapper">
        <!-- Tabs -->
        <ul>
            <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li>
            <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li>
            <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li>
            <li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li>
        </ul>
       
        <!-- Images -->
        <div id="images">
            <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div>
            <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div>
            <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div>
            <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>
        </div>
    </div>

 

The CSS

What we’re going to do with the CSS is setup the tabs so they sit to the left and are stacked on top of one another.  We’re also going to make it so the tabs originally sit at an opacity of 40%, then when a user rolls over the tab it will change to 100% opacity.  Probably the most important part of the CSS will be for div wrapping the images.  We just have to make sure the overflow is set to hidden.

Here is the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
    /* CSS Reset */
    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }
       
    /* Setup Tabs */
   
    ul{
        background:#000;
        width:125px; /* Width of Tab Image */
        float: left;
        list-style: none;
        border-right:8px solid black;
    }
   
    ul li{
        height:75px; /* Height of Tab Image */
    }
   
    /* Setup Tab so normal opacity is 40 and rollover is 100 */
    ul li a img{
        /* for IE */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        filter:alpha(opacity=40);
     
        /* CSS3 standard */
        opacity:0.4;
     
    }
   
    /* Change Opacity to 100% on roll over */
    ul li a:hover img{
         
        /* for IE */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter:alpha(opacity=100);
       
        /* CSS3 standard */
        opacity:1.0;
    }

    /* Places images to the right of the tabs,
    and hides non selected images */

    #images{
        width:500px;
        height:300px;
        overflow:hidden;  /* Hides the non selected images */
        float:left;
    }
   
    /* Places a black border around the entire viewer
    and centers it on the screen */

    #wrapper{
        width:633px;
        height:300px;
        border:8px solid black;
        margin:0px auto;
    }

 

Putting it All Together

The last thing we need to do is put the HTML and CSS together.  Of course you change around the appearance of where the tabs sit and how many tabs there are.  The important thing to take from this tutorial is the idea of using anchor tags as a means of switching images.

Here is all the code together:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Image Viewer</title>

        <style type="text/css" media="screen">
       
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
        }
           
        /* Setup Tabs */
       
        ul{
            background:#000;
            width:125px; /* Width of Tab Image */
            float: left;
            list-style: none;
            border-right:8px solid black;
        }
       
        ul li{
            height:75px; /* Height of Tab Image */
        }
       
        /* Setup Tab so normal opacity is 40 and rollover is 100 */
        ul li a img{
            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
            filter:alpha(opacity=40);
         
            /* CSS3 standard */
            opacity:0.4;
         
        }
       
        /* Change Opacity to 100% on roll over */
        ul li a:hover img{
             
            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter:alpha(opacity=100);
           
            /* CSS3 standard */
            opacity:1.0;
        }
   
        /* Places images to the right of the tabs,
        and hides non selected images */

        #images{
            width:500px;
            height:300px;
            overflow:hidden;  /* Hides the non selected images */
            float:left;
        }
       
        /* Places a black border around the entire viewer
        and centers it on the screen */

        #wrapper{
            width:633px;
            height:300px;
            border:8px solid black;
            margin:0px auto;
        }
           
        </style>

    </head>
    <body>

    <div id="wrapper">
        <!-- Tabs -->
        <ul>
            <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li>
            <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li>
            <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li>
            <li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li>
        </ul>
       
        <!-- Images -->
        <div id="images">
            <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div>
            <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div>
            <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div>
            <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>
        </div>
    </div>     
           
    </body>
    </html>

 

 




Top