Probably the most important part of the CSS will be for div wrapping the images. 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. 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. 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. 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. For the tabs it’s just an unordered list, with images inside of anchor tags. The only difference is the images are going to be scrolling within a div wrapper instead up jumping up and down the page. This is much like a “Back to Top” link that jumps to the top of the page when you click on it. We’re going to use anchor tags to jump from one image to the next. The theory behind how this is all going to work really isn’t that difficult. 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. 300 / 4 = 75) This gives me the height of my tabs. I just picked a size for the main image, than divided the height by how many tabs I wanted. I made the main image 500×300, and the tabs 75×125. In this example I’ve used landscape images, but this could be promotional content, or whatever you like. Prepping the Imagesįirst thing we’ll need are images. When the user clicks on one of the tabs it shows the new image.
We be making a simple image viewer that has 4 tabs on the left and a main picture on the right.
In this example we’ll cover how to create an image viewer with only using CSS and HTML.
This is a problem if the user doesn’t have either enabled on their browser. Most use some form of JavaScript to change images, some use Flash. Image Viewers are fairly common on websites now-a-days.