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>

<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>

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;
    }

/* 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; }