Change the border color of image and its link

In this example the img tag is used as inner one for the link tag, the CSS is used to control the border style.

Code:

<html>
    <head>
        <title>Change the image border</title>
<style type="text/css">
a:link {
  background: #fff; 
  display:block;
}
a:hover img {
  border-style: dashed;
  background: #CCC;
}
img.borderImage {
  width: 300px;
  border: 1px dashed blue;
  background: #fff;
  padding: 1px;
  display:block;
}

</style>

    </head>
    <body>
   <center>
    <p>
     In this example we use both the link and the image tag, css is used to control
     the border style of both, the image and the link .
    </p>
<a href="http://www.codemiles.com"><img class="borderImage" src="site_logo.gif" alt="codemiles" /></a>

   </center>
    </body>
</html>

 

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada

Author: DrRakha
Mastermind

Posts: 2715
Have thanks: 74 time

Page 1 of 1

[ 1 post ]

Related Posts to : Change the border color of image and its link
Set border bottom color -
Changing link color -
change border style to solid at div tag -
Change the border style on mouse over -
change background color with RGB -
Forum Description Text color change - Need Help -
change link <a> attributes dynamically -
Remove border of the linked image -
Change the link font family and weight -
Change the default underline style of link -

Topic Tags

HTML Image

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com