Change the border color of image and its link

Computer Programming Forums : Questions and Answers, Articles, Tutorials, and Code Snippets

Switch to full style
HTML code examples
Post a reply
DrRakha
  • DrRakha
  • Posts: 2715
  • Joined: Tue Mar 27, 2007 10:55 pm
  • Location: Earth
  • Website

Change the border color of image and its link

Thu Feb 16, 2012 3:41 pm

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>

 




Post a reply
  Related Posts  to : Change the border color of image and its link
 Set border bottom color     -  
 Changing link color     -  
 Change the border style on mouse over     -  
 change border style to solid at div tag     -  
 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 default underline style of link     -  
 Change the link font family and weight     -  

Topic Tags

HTML Image
Switch to full style

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


Powered by phpBB © phpBB Group.


Codemiles.com