Posts Tagged ‘Tutorials’
Tutorial: Using CSS For Image Descriptions
I was planning on writing this one quite a while ago, but I got a little busy and it slipped my mind. Sorry about that! Well, here it is at last, the tutorial that will show you how to display the summary of an image when it is hovered over – for example, the website thumbnails in the link gallery.
Getting Started
Before doing anything else, you must first decide on a fixed size for your image, or images. All subsequent images that need a hover description using the same CSS should have the same size as the first one, because we will be basing our measurements off of it.
For this tutorial, I will be using the scaled down image of a cloudy sky from stock.xchng, the free stock photo resource. This is what the original image looks like when resized to 300×200 pixels:
Preparing The HTML
The thing with CSS is that when using it for styling, there has to be something to apply the style to. Assuming all your images are not the same size and you want this effect on only a select few, we will enclose the image – along with the summary – in nested div elements.
Here is what my code looks like, and what yours should resemble:
Styling It With CSS
Okay, here’s the part you’ve been waiting for – here’s where the fun of making it work begins. Now before you pull out your stylesheet, I need to remind you that this code is based off the size of the image you are using, and you may have to modify it to suit your needs. With that out of the way, here’s the magic recipe:
.imageshell{
width:300px;
height:200px;
text-align:left;
}
.imageshell a:hover div {
color:#333333;
display:block;
}
.imageshell div {
background-color:#F3EBCC;
display:none;
width:290px;
height:190px;
position:relative;
padding:5px;
left:0px;
top:-200px;
}You will notice that the size of the inner div is smaller than the image by 10px each on height and width (or 5px on each side) – this allows the padding to expand it to fill the image. Of course, you are free to modify any part of the code as you please, for example changing colors, sizes and padding. Some modifications may break it, but that depends on what you are trying to do.
Note: The most probable thing you will need to tweak is the top and left attributes in the style for the inner div. This is because it depends on the default border and padding settings on your image from the pre-existing CSS.
The Final Product
I’ve removed the example that was here for W3C reasons, you will find the end product in the link gallery. Leave a comment if you have any issues. Demo here.
Tutorial: CSS Rollovers As Anchors
This tutorial is for those who want to give their visitors a simple way to navigate to different places on the same page. For example, a link at the bottom that sends you to the top of the page – especially helpful on long pages, where no one wants to do the scrolling. You will need a very basic knowledge of HTML, the will to brave messing with your source code, and a couple of images (if you want an image link).
Step 1 – Doing it without the images
We’re starting off with the simple concept of anchors – links that link to links that link to nothing. Okay, maybe I need to explain that…an anchor, by itself, is something that exists for the sole purpose of marking a position on a webpage. Then, you can link to that anchor, which will essentially send anyone who clicks the link to the position defined by the anchor. Still don’t get it? Let’s go hands on.
First off, put this line of code right after your <body> tag:
This defines the very beginning of your document as the location of the “top” anchor. Next, let’s try linking to it – put the following code where you want your “Back to top” link to appear (you can change the text, of course):
<a href="#top">Back to top</a>
The ‘#’ in there tells your browser that this link is pointing to an anchor and not to an independent URL. After you’re done, try clicking the link. Does it work? If it doesn’t, go back and try again. 
Step 2 – CSSing it up + images
Before we go any further, you will need to grab a couple of images: one will be the active link, and the other image will appear when the user hovers the mouse over that link. Let’s say one of the images is named link_normal.gif and the other one is link_hover.gif – note that they must be of the same dimensions, in this case let’s assume they are both 220px by 50px.
All you have to do to your actual code at this point, is to include the following code where the link is to appear:
<a href="#top" class=myanchorlink></a>
Comparing this code to the above without-images HTML, you may notice that there isn’t that much of a difference – all you did was replace the text with a div element. But where is the image, you ask? Well, we’re going to implement that now.
All the real magic will take place in your CSS file. I hope you know where your CSS file is – in case you don’t, you can always view your source and find it. For WordPress the CSS file is style.css in your current theme’s folder. After you find it, add the following code to the end.
Voila! You’re done. Unless you copy-pasted my code without modifications, it should be working fine. If you did just copy-paste my code, it might not work because this is a tutorial that simply gives you an example to modify and implement with your own images.
If you have any problems, drop me a line and I’ll try to help you out.
