Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to keep a blue border showing up on image href's 2

Status
Not open for further replies.

wvdba

IS-IT--Management
Jun 3, 2008
465
US
hi,
if have an image that i need to use to link to another website. when i display the image with href, a blue border shows up around the image. i do not want this border to show up. any ideas how to keep it from putting a blue border around images and underlining href texts?
thanks.
 
Text within (<a>TEXT HERE</a>) anchor tag will normally default to underlined unless CSS is used to do otherwise - I think.

You could use something like:
Code:
a.linkPage {
  font-family: arial;
  color: #CCC;
  text-decoration: none;
}
a.linkPage:hover {
  text-decoration: underline;
  color: #00C;
  font-weight: bold;
}

<a class="linkPage">
<img src='image.jpg' border='0' alt=''>TEXT HERE!
</a>

The link will show normal text, but once the mouse hovers over the link, the text will be set to bold and underlined.

This is a good practice to alternate images and any kind of properties behind any object.

Regards,

 

SB- Changing the font weight on a hover makes a page really jumpy in my opinion. YMMV.


WVDBA- old school way is this:

Code:
<a href="mylink.htm" border="0"><img src="image.jpg" border="0"></a>

border="0" in both places.

New school way would be to do it on the a and img tags in the style sheet.

 
BigRed1212,

You are right, it may make the page jumpy as it pushes surrounding content to fit the expanded text or it may wrap around unexpectedly. I was just trying to show how attributes can be changed using CSS and there by obtain any number of results.

That said, if you layout your content just right, you can bold your text without it affecting its surroundings ... I have found that if you give it enough space to expand into, it looks pretty good and smooth. I actually do that on a couple PHP applications I have written; most recently, an online document management application where directory trees are shown just as they do in Windows/explorer. In lieu of using a background color, I found it cleaner to bold the text.

Regards,




 
That said, if you layout your content just right, you can bold your text without it affecting its surroundings .

Ahh. I see. Not picking on you. Cheers.
 
If you don't want any borders to show up around linked images, just do this in your CSS stylesheet:
Code:
a img { border: 0 }
If you want images to have a border, but don't want them turning blue if they're links, do this:
Code:
img, a img { border: 1px solid black }
You can add a little on-hover action to that if you like:
Code:
img, a img { border: 1px solid black }
a:hover img { border-color: red }
or limit it to a particular class of images:
Code:
img, a img {border: 0}
img.bordered, a img.bordered { border: 1px solid black }
a:hover img { border-color: red }


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
all of these tips are great.
thanks so much everyone. there's a lot to learn in css/style.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top