image border on hover 1

[pindky]

Is there a way to create a border on a linked image on hover? (CSS)

 

[Vragabond]

a:link img, a:visited img { border: none; }
a:hover img { border: 1px dashed blue; }

This should take care of it. Note that this will effect the image itself and not the link. Hope it helps.

 

[pindky]

What if I want a 1px solid #DADADA border around linked images (thumbnails) and a few other images, a style I am calling .border

.border {
border:1px;
border-color : #DADADA;
border-style : solid;
}

but want only the linked thumbnails to have perhaps a thicker or darker colored border (or no border) on hover?

I can't seem to get that going.

 

[Vragabond]

You're going in the right direction. First you have to create a class for the custom border style. Then have one for the normal images, one for the special ones:

<style type=&quot;text/css&quot;>
 /* normal style */
 a:link img, a:visited img { border: none; }
 a:hover img { border: 1px solid #dadada; }

 /* dark and thick border */
 a.border:link img, a.border:visited img { border: none; }
 a.border:hover img { border: 2px solid #737373; }
</style>

<a href=&quot;pic1.jpg&quot;><img src=&quot;pic1thumb.jpg&quot; alt=&quot;picture with thin border&quot; /></a>
<a href=&quot;pic2.jpg&quot; class=&quot;border&quot;><img src=&quot;pic2thumb.jpg&quot; alt=&quot;picture with thick border&quot; /></a>

That should do it. Eventually, you could apply the border class to img as well and change the css accordingly. Hope it helps.

 

[pindky]

got it -- but still not working with this code.

--------
.border {
border:1px;
border-color : #DADADA;
border-style : solid;
}

a.border:link img, a.border:visited img {
border: 1px;
border-color : #DADADA;
border-style : solid;
}

a.border:hover img
{
border: 2px solid #737373;
}
-----------

<a href=&quot;#&quot;><img src=&quot;images/classical/dhtml_1/imagon_thumb.jpg&quot; width=&quot;81&quot; height=&quot;81&quot; class=&quot;border&quot; /></a>

----------

Images are within a table....

????

thanks

 

[Vragabond]

The syntax used says: an <img> that rests within an <a> tag that has a class called border. You are using an <img> of class border within an <a> tag. That is why it is not working. If you would like to apply class to the img, change your css to:

a:link img.border, a:visited img.border { border: 1px solid #dadada; }
a:hover img.border { border: 2px solid #737373; }

Hope it makes sense.

 

[pindky]

Okay -- gave that a whirl. Good explanation and I understand it, but... still no hover.

------
<td><a href=&quot;#&quot; onfocus=&quot;if(this.blur)this.blur()&quot; onclick=&quot;MM_showHideLayers('alma','','hide','imagonpurple','','hide','richard','','show','emilyswing','','hide','olgaredhair','','hide','lulu','','hide','leon','','hide','frontprojection','','hide','credits','','show','copyright','','show','champaign','','hide','imagon','','hide')&quot;><img src=&quot;images/classical/dhtml_1/richard_thumb.jpg&quot; width=&quot;81&quot; height=&quot;81&quot; class=&quot;border&quot; /></a></td>
--------------------

.border {
border: 1px;
border-color : #DADADA;
border-style : solid;
}


a:link img.border, a:visited img.border { border: 1px solid #dadada; }
a:hover img.border { border: 2px solid #737373; }
---------------

What am I missing?

Thanks a million!

 

[Vragabond]

The thingy works ok in Mozilla and Opera. IE6 seems to be choking since there is no border for the normal :hover link. I managed to persuade the IE to work by doing this:

<style type=&quot;text/css&quot;>
a:link, a: visited { text-decoration: none; }
a:hover { border: 0px solid black; }

a:link img.border, a:visited img.border { border: 1px solid #dadada; }
a:hover img.border { border: 2px solid #737373; }
</style>

<table>
 <tr>
  <td><a href=&quot;#&quot; onfocus=&quot;if(this.blur)this.blur()&quot; onclick=&quot;script&quot;><img src=&quot;images/pic.jpg&quot; width=&quot;81&quot; height=&quot;81&quot; class=&quot;border&quot; /></a></td>
 </tr>
</table>

Hope it will work for you as well.

 

[pindky]

Brilliant! It worked, finally. Thanks so much. Saved a lot of file size on rollover images in thumbnails, so really appreciate your working this one through!!

-pindky