Border - change color

Hi, i have a div that contains an image with a border around it. The image is a link to another page. How do i change the color of the border when the mouse moves over the image.

here is my CSS:

.sector_images 
	{
	height: 100px;
	width: 150px;
	float: left;
	margin: 0px 12px 12px 0px;
	border: 5px solid #000000;
	}

Code (markup):

and here is my code:

<div class="sector_images"><a href="page.php" target="_self"><img src="images/image.jpg" alt="image" width="150" height="100" /></a></div>

HTML:

 

<div class="sector_images">
<a href="page1.php" ><img src="images/image1.jpg" alt="image" width="150" height="100" /></a>
<a href="page2.php" ><img src="images/image2.jpg" alt="image" width="150" height="100" /></a>
<a href="page3.php" ><img src="images/image3.jpg" alt="image" width="150" height="100" /></a>
</div>

Ew, target. I took it out because it's the spawn of darkness.

.sector_images a {
  display: block;
  height: 100px;
  width: 150px;
  float: left;
  margin: 0px 12px 12px 0px;
}
.sector_images a img {
  border: 5px solid #000;
}

.sector_images a:hover img {
  border: 5px solid #b000f9;
}
.sector_images a:active img {
  padding: 0;
  border: 3px solid #fdb302;
}

Code (markup):

I changed your original css... I put the boder on the image and I made the a have a height and width... cause I'll bet you've got that div wrapping each and every image, right? A better idea is to have one div that goes around all the images. You can set a width around that one div if you want, so long as it's wide enough to hold all the images.

You should also have some alt text in those images... if they're dynamically made and you don't know what they're images of, at least say alt="various images" or something. If you do know, say what they are.

I did just this on a template for a site of ours (which is currently written in nasty tables so I made another, valid version and it's just waiting to go somewhere... ) you can look at the code for the borders if you want, just PM.

 

You could also do it like this:

<a class="image" href="page.php" target="_self"><img src="images/image.jpg" alt="image" width="150" height="100" /></a>

HTML:

a.image:link {color: #000; }
a.image:hover {color: #999;}

Code (markup):

But this might not be the best way.

Regards

 

Thanks guys, i will test it out when i get home.

Is the target not necessary... if i leave it ou, is this not bad coding practice, thanks again...

 

Well i never use it and target= isn't actually valid xhtml.

 

A little heavy there Stomme... and in general though without an actual example page it's hard to tell what's actually doing something, and what's just wasted code.

Being images are a 'special' flavor of inline, I'd probably not bother floating them - float automagically sets display:block so that's unneeded, and almost ALL of the styling being applied here should probably just be on the IMG itself.

.sector_images a img {
  height: 100px;
  width: 150px;
  margin: 0px 12px 12px 0px;
  border:5px solid #000;
}
.sector_images a:active img,
.sector_images a:focus img,
.sector_images a:hover, img {
	border-color:#B000F9;
}

Code (markup):

and since we can state the width and height in the CSS, one really doesn't need it in the HTML.

<div class="sector_images">
	<a href="page1.php" ><img src="images/image1.jpg" alt="image" /></a>
	<a href="page2.php" ><img src="images/image2.jpg" alt="image"  /></a>
	<a href="page3.php" ><img src="images/image3.jpg" alt="image"  /></a>
</div>

Code (markup):

 

Ah, yeah. I was looking at a version I had done but the difference was that there was no border until hover, so leftover stuff like padding: 0 stayed in there.

I've started to always add the height and width in the HTML. Maybe this isn't true anymore, but I'd heard reports of IE sometimes rendering a page, and not knowing the size of the image until it was fully loaded, continued to render the page without making enough space for the image and not readjusting after the size of the image was known. This same source then also said it even happened when the size was set in the CSS. So it's a rumour and I ran with it (except when floating a bunch of images the exact same size to make an image grid).

I had this:

#huizen {
  width: 650px;
  margin: 0 auto;
}

#huizen a img {
  padding: 3px;
  border: none;
}

#huizen a:hover img {
  padding: 0;
  border: 3px solid #b000f9;
}
#huizen a:active img {
  padding: 0;
  border: 3px solid #fdb302;
}

Code (markup):

oops, I hadn't even floated them anyway!

 

try to use: