Jump to content

Css Img Hyperlinks


Elemental

Recommended Posts

Hey Folks, Not sure what I'm doing wrong... Sorry if this comes across a bit confusing I've been up all night. I'm working on my website, the resume page, and I can't seem to make the images I have as hyperlinks work properly. The navBar text work fine but I'm using my agent's and manager's logo to link to their sites and I can't get the colors to work right (see below) the current code I have wont work in Opera or Safari (PC), and only the hover section works on IE and FFHere's what I've got:external css

a:link{color: #999999; text-decoration: none;}a:visited{color: #cc0000; text-decoration: none;}a:hover{color: #00CCFF; text-decoration: none;}a img#synergy:link{border-color: none;}a img#synergy:visited{border-color: none;}a img#synergy:hover{border-color: #00CCFF;}

html

<table id="header"><tr><td colspan="3"><img id="nameResume" src="../images/nameResume.png" alt="Resume" title="Resume" /><a href="http://www.synergytalent.net", target="_blank"><img id="synergy" src="../images/synergy.png" alt="Synergy Talent Logo - Agent" title="Synergy Talent Logo - Agent" /></a><a href="http://www.madcatch.com/Site/MadCatch_Entertainment.html", target="_blank"><img id="madCatch" src="../images/madCatch.png" alt="MadCatch Entertainment Logo - Manager" title="MadCatch Entertainment Logo - Manager" /></a></td></tr>

Can you guys explain what I'm doing wrong here, please...Peace,Elemental

Link to comment
Share on other sites

Try it this way:

a:link img#synergy{border-color: none;}a:visited img#synergy{border-color: none;}a:hover img#synergy{border-color: #00CCFF;}

But I'm not sure "none" is a possible color value. Try "transparent" or using the same color as the element behind it.

Link to comment
Share on other sites

Try it this way:
a:link img#synergy{border-color: none;}a:visited img#synergy{border-color: none;}a:hover img#synergy{border-color: #00CCFF;}

But I'm not sure "none" is a possible color value. Try "transparent" or using the same color as the element behind it.

Good Morning Sir,Thanks for the reply. the transparent value worked like a charm but Opera and Safari are not taking the bait. The thing is that this worked for me before:
/* ***** Text Links **** */a:link {color: #0099FF; text-decoration: none}a:visited {color: #FF0066; text-decoration: none}a:hover {color: #CCCC00;}/* ***** IMG Links ***** */a #img01:hover {border-color: #CCCC00;}a #img02:hover {border-color: #CCCC00;}

the html for the image links were like this one

<div id="imgSet01"><a href="../galleria/lrgImg/elSuper.html", target="_blank", onclick="open_win(this.href); return false"><img id="img01" class="imgBorders" src="../galleria/images/elSuper.jpg" alt="Photography" title="Photography" /></a></div>

However, I didn't have the link and visited values only the hover, not that I think that would matter but it worked on all four browsers ?????Peace,Elemental

Link to comment
Share on other sites

:hover, :active, and :focus should work for most page elements in most browsers. (In IE, you'll need a strict doctype for them to work on elements that are not <a> elements.) This makes it possible, for example, to create animated menus using only CSS. Applying the :hover class to an <img> element is certainly correct.But I'm pretty sure the :link and :visited pseudo-classes can be applied ONLY to <a> elements. That is why I suggested using the selectors in a different way.

Link to comment
Share on other sites

:hover, :active, and :focus should work for most page elements in most browsers. (In IE, you'll need a strict doctype for them to work on elements that are not <a> elements.) This makes it possible, for example, to create animated menus using only CSS. Applying the :hover class to an <img> element is certainly correct.But I'm pretty sure the :link and :visited pseudo-classes can be applied ONLY to <a> elements. That is why I suggested using the selectors in a different way.
Deirdre's Dad, I'm sure you are correct so I've changed the order as you suggested, I'll play around with the id's and when I get it to work correctly I'll post it.As for the doctype, here's what I've been using: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">I'll get back to you.Peace,Elemental
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...