Image Border Hovering
Learn to go from a little bit of HTML and CSS to this:The CSS code for having a different border when hoving your image is this:
#link a{
border: 2px solid #b2b2b2;
margin: 0 2px 2px 0;
width: 88px;
}
#link a:hover{
border: 2px solid #FCAB00;
}
Obviously, this only works when you have a link for your image, hence, a:hover and a.
Now, in your HTML, you will write:
<div id="link"><a href="http://yourdomainhere.com"><img src="http://yourimageURLhere.com"><a></div>
You may change "#link" in the CSS to ".link" and "link" to whatever thing you prefer. It could even be "arlgharjlg", as long as you place the same thing you've written in your CSS onto your HTML. So if you change "#link" in the CSS to ".arlgharjlg", in the HTML, it will appear as "div class="arlgharjlg".
Now lets take a closer look at what you've written in the CSS:
-border represents the border you wish to have; how thick (2px); solid or dotted; and the colour.
-margin represents how far you want the border to be away from (in spaces). First is the top, second is the left, then right, then bottom. In my case, I want 0px for both top and bottom, but 2px for both left and right.
-width is very important. Your code will not position itself properly without your width value. You can change the width to anything you want, but you'd have to make another DIV ID in your CSS if you wanted a different width (and even if you write it differently on your HTML, it will collide).
Using this image link hovering technique is very useful if you wish to have different borders for hovering them when you have a bunch of the same images that have links to them.
Home | Site Information | Policy and FAQ | Linkage
Site and layout is © to Heidi Hu. All tutorials, information and items are copyrighted to their rightful owners. All rights reserved.
