42 replies [Last post]
DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

I am new at CSS and brand new at this forum. If I stumble in my posting please let me know and I'll correct it and improve.

I'd like to have my CSS have one set of visual link behaviors that applies to text links and a different set of visual link behaviors apply to graphic links.

Specifically, when hovering over a text link, I'd like the link to change color and to change background color.

When hovering over a graphic link, I'd like for neither of these to happen.

Is there a way to have this work automagically?

Deb

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Deb, It's hard to work out

Hi Deb,
It's hard to work out what's inside the element to change it.
So the easiest way would be add a class to the links for either text links or image links or both then target that with your selector.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

I was able to do it by adding

I was able to do it by adding a span/class to the graphic links:


That said, I was hoping that CSS might be smart enough for there to be a solution short of specifying a span/class for all image links.

Deb

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

I was able to do it by adding

I was able to do it by adding a span/class to the graphic links:

<span class="ClassTellingCSSThatThisIsAnImage">
<a href="wherever" target="_blank">
<img alt=". height="100" src="wherever.png" title=". width="100"></a></span>

That said, I was hoping that CSS might be smart enough for there to be a solution short of specifying a span/class for all image links.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

You shouldn't need the span

You shouldn't need the span just the class.

<a href="" class="imglink">
  <img src="" />
</a>

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Thank you. The need to apply

Thank you.
The need to apply the class to all graphic links is a disappointment to be sure but I appreciate your generous contribution to eliminate the span.

Thank you.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Maybe we should look at this

Maybe we should look at this differently.
Is there something else you can use to differentiate between the links.
Like do all the image links have the same path.
Show me the markup and we can try and come up with something.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

At this point it is all

At this point it is all design considerations.
If having all the image links with the same path solves the problem, let me know.
Everything is on the table right now, though the simplest resolution seems to be the remocal of the special handling of the text links.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

If the href of the link for

If the href of the link for images is the same or at least starts the same, you can use attribute selector starts with Like :

a[href^="imgpath"]{}

Or Attribute selector contains

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Alas, no, the href (where it

Alas, no, the href (where it points to) is wildly different, including my site and many sites across the web.
That said, I'm very open to ideas.

Deb

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Image size?

Are any of the images smaller than the line height in which it's embedded? If not, no background will show if you set

a img {
  vertical-align: bottom;
  border: none;
  }
Likewise, there is no text for the color property to affect. If you do nothing, there is also the advantage that should the image not load, the alt attribute value will follow the text link rules; a desirable result.

If doing no more than I've suggested still has issues, please post one or more typical link markups and the css for each type. Do upload a typical link image so we may have a concrete example with which to work.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Thank you so much. I THINK,

Thank you so much.
I THINK, that perhaps my whole problem was related to another error in the css file that was "undetected".
So, if I do not bebop back in with an update, my huge thanks, for helping me be calm enough to move forward.
THANK YOU.
If I do figure it out with more problems, I shall return.

Deb

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Ok. I have cleaned it up and

Ok.
I have cleaned it up and returned.
Here is the whole page and the CSS.
Thank you for all your help.
I apologize for not understanding so far.

Bottom line, I'm trying to achieve the effect shown between the "111" lines but to have it "automagic".

Thank you again.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>TEST-3</title>
<style type="text/css">
.auto-style1 {
	border-width: 0;
}
 
body {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: .95em;
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	color: #000000;
}
body img {
 border: 0px;
 text-decoration: none;
}
 
#content {
	padding: 5px;
	margin-left: 240px;
	background-color: #FFFFFF;
}
 
a:link {
 font-weight: bold;
 color: #000000;
 background-color: transparent;
 text-decoration: underline;
}
a:visited {
 font-weight: bold;
 color: #000000;
 background-color: transparent;
 padding: 0px;
 text-decoration: underline;
}
a:hover {
 font-weight: bold;
 text-decoration : none;
 background-color: #F4D180;
 color: #000000;
}
a:active {
 font-weight: bold;
 text-decoration : underline;
 background-color: #BFDFE2;
 color: #000000;
}
 
.ClassTellingCSSThatThisIsAnImage a:link {
 font-weight: bold;
 background-color: transparent;
 text-decoration: underline;
}
.ClassTellingCSSThatThisIsAnImage a:visited {
 font-weight: bold;
 background-color: transparent;
 padding: 0px;
 text-decoration: underline;
}
.ClassTellingCSSThatThisIsAnImage a:hover {
 text-decoration : none;
 background-color: transparent;
 color: transparent;
}
.ClassTellingCSSThatThisIsAnImage a:active {
 font-weight: bold;
 text-decoration : underline;
 background-color: transparent;
}
 
</style>
</head>
 
<body>
		<p>111111111111111111</p>
 
			<span class="ClassTellingCSSThatThisIsAnImage"><a href="http://validator.w3.org/check?uri=referer" target="_blank">
			<img alt="Valid HTML 4.01 - Click to revalidate" height="31" src="i/valid-html401-blue.png" 
			title="Valid HTML 4.01 - Click to revalidate" width="88" class="auto-style1" /></a></span>&nbsp;
 
		<p>111111111111111111</p>
		<p>&nbsp;</p>
		<p>333333333333333333</p>
 
			<a href="http://validator.w3.org/check?uri=referer" target="_blank">
			<img alt="Valid HTML 4.01 - Click to revalidate" height="31" src="i/valid-html401-blue.png" 
			title="Valid HTML 4.01 - Click to revalidate" width="88" class="auto-style1" /></a>&nbsp;
		<p>333333333333333333</p>
		<p>&nbsp;</p>
		<p><a href="http://somewhere.com" title="test test test">This is a test link</a></p>
 
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Here's a slightly cleaned up

Here's a slightly cleaned up version of what you have.

<!DOCTYPE html>
<html>
 
<head>
<title>TEST-3</title>
<style type="text/css">
.auto-style1 {
	border-width: 0;
}
 
body {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: .95em;
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	color: #000000;
}
body img {
 border: 0px;
 text-decoration: none;
}
 
#content {
	padding: 5px;
	margin-left: 240px;
	background-color: #FFF;
}
 
a:link {
 font-weight: bold;
 color: #000;
 background-color: transparent;
 text-decoration: underline;
}
a:visited {
 padding: 0;
}
a:hover {
 background-color: #F4D180;
}
a:active {
  background-color: #BFDFE2;
}
 
a.ClassTellingCSSThatThisIsAnImage:link {
 font-weight: bold;
 background-color: transparent;
 text-decoration: underline;
}
 
a.ClassTellingCSSThatThisIsAnImage:hover {
 text-decoration : none;
 color: transparent;
}
a.ClassTellingCSSThatThisIsAnImage:active {
 background-color: transparent;
}
 
</style>
</head>
 
<body>
		<p>111111111111111111</p>
 
		<a class="ClassTellingCSSThatThisIsAnImage" href="http://validator.w3.org/check?uri=referer" target="_blank">
			<img alt="Valid HTML 4.01 - Click to revalidate" height="31" src="i/valid-html401-blue.png" 
			title="Valid HTML 4.01 - Click to revalidate" width="88" class="auto-style1" /></a>&nbsp;
 
		<p>111111111111111111</p>
		<p>&nbsp;</p>
		<p>333333333333333333</p>
 
			<a href="http://validator.w3.org/check?uri=referer" target="_blank">
			<img alt="Valid HTML 4.01 - Click to revalidate" height="31" src="i/valid-html401-blue.png" 
			title="Valid HTML 4.01 - Click to revalidate" width="88" class="auto-style1" /></a>&nbsp;
		<p>333333333333333333</p>
		<p>&nbsp;</p>
		<p><a href="http://somewhere.com" title="test test test">This is a test link</a></p>
 
</body>
</html>

Notice I changed the doctype, removed redundant span and repeated declarations.
You can set properties for link in the link state that will be carried through to other states, then you only have to put what changes in the other states.

I'm still not really sure what you are trying to do with the links when they are around an image.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Tony wrote I'm still not

Tony wrote
I'm still not really sure what you are trying to do with the links when they are around an image.
[end]

I'll try again.

I want image links to work like they do between the "111" lines.
And I want it to happen without the need for the extra html betweeen the "111" lines.

Do you understand?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

So in English you want the

So in English Smile you want the links between "333" to work like the one in "111".
But that's not really what I want to know. What styles do you actually want on the image links. There may be another way to get it.
Is it just the background-color change on hover to stay transparent?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Special problem

I guess you're concerned about the orange background that shows up next to the image on hover, correct?

The problem is that the png image has a transparent canvas, so the a element's background color is visible through a section of the image. The solution lies in either identifying those links with an image, say with a somewhat less cumbersome class name as you've done in the first example, or by using images that don't have transparency.

As a test, create a like sized image consisting of a simple solid color, and use it in a link. I've attached an 88x31px blue canvas. Or, simply install ImageMagick, if you haven't already, and do
$ convert -size 88x31 xc:blue linktest.jpg
from the command line. In Windows, it's called the command prompt, and you'll need to use "convert.exe" because Windows is kinda stupid.

cheers,

gary

AttachmentSize
linktest.jpg 306 bytes

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Tony wrote: So in English you

Tony wrote:
So in English you want the links between "333" to work like the one in "111".
But that's not really what I want to know. What styles do you actually want on the image links. There may be another way to get it.
Is it just the background-color change on hover to stay transparent?

Reply:
Yes. I want hover for a text link to have a visual effect. I want hover on an image link to have no visual effect (except, of course, the display of the "alt/title" texts).

Gary Turner then wrote:
I guess you're concerned about the orange background that shows up next to the image on hover, correct?

Reply:
Bingo! Three points.

Gary Turner then continued:
The problem is that the png image has a transparent canvas, so the a element's background color is visible through a section of the image. The solution lies in either identifying those links with an image, say with a somewhat less cumbersome class name as you've done in the first example, or by using images that don't have transparency.

Reply:
I'm sensing progress. I don't want to use any class name at all. I want it to work without the need for a class name. I want the HTML in "333" to produce the results in "111". I want for CSS to do the work - all the work. And that has been my challenge.

So if the solution is just to avoid images with transparency (which I rarely use and didn't even realize I was using), that could be a solution.

Closing:
I'll be at the docs much of today so further replies probably won't happen till tomorrow, but you have given me something to play with and I am very grateful.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Alas, faiure. Bottom line, I

Alas, faiure.

Bottom line, I changed the PNG to a JPG. The removal of transparency did nothing to eliminate the background color change..

I'm getting the impression that my objective is not being understood.

Bottom line: I want to create plain vanilla HTML.

Then using ONLY CSS, and not modifying the HTML in any way, I like the following behaviors to occur.

1) when hovering over a text link, I'd like the link to change color, to not be underlined and to change background color.

2) When hovering over a graphic link, I'd like for no visible changes to occur.

Currently I can easily achieve CLOSE to this effect by NOT changing background color and by only changing text link color and removing the underline on hover.

I'd like to change background color for text links also, but NOT for graphic links.

If that is not possible I'll just drop the idea.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

OK, show us the changes you

OK, show us the changes you made. Be sure to upload the altered — png to jpg — images.

Did you try the image I attached? Try this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
    <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
    <title>link-TEST-3</title>
 
    <style type="text/css">
      .auto-style1 {
        border-width: 0;
        }
 
      body {
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: .95em;
        margin: 0px;
        padding: 0px;
        background-color: #ffffff;
        color: #000000;
        }
 
      body img {
      border: 0px;
      text-decoration: none;
      }
 
      #content {
	padding: 5px;
	margin-left: 240px;
	background-color: #FFFFFF;
        }
 
      a:link {
      font-weight: bold;
      color: #000000;
      background-color: transparent;
      text-decoration: underline;
      }
 
      a:visited {
      font-weight: bold;
      color: #000000;
      background-color: transparent;
      padding: 0px;
      text-decoration: underline;
      }
 
      a:hover {
      font-weight: bold;
      text-decoration : none;
      background-color: #F4D180;
      color: #000000;
      }
 
      a:active {
      font-weight: bold;
      text-decoration : underline;
      background-color: #BFDFE2;
      color: #000000;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:link {
      font-weight: bold;
      background-color: transparent;
      text-decoration: underline;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:visited {
      font-weight: bold;
      background-color: transparent;
      padding: 0px;
      text-decoration: underline;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:hover {
      text-decoration : none;
      background-color: transparent;
      color: transparent;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:active {
      font-weight: bold;
      text-decoration : underline;
      background-color: transparent;
      }
 
      a:hover[rel=valid] {
        background-color: transparent;
        }
 
</style>
</head>
 
  <body>
    <p>111111111111111111</p>
 
    <p><span class="ClassTellingCSSThatThisIsAnImage">
	<a href="http://validator.w3.org/check?uri=referer">
	  <img src="http://www.w3.org/Icons/valid-xhtml10" 
	       alt="Valid XHTML 1.0 Transitional" 
	       height="31" 
	       width="88" 
	       class="auto-style1"/></a>
      </span>
    </p>
 
    <p>111111111111111111</p>
 
    <p>333333333333333333</p>
 
    <p><a href="http://validator.w3.org/check?uri=referer" 
	  target="_blank"> 
	<img src="http://www.w3.org/Icons/valid-xhtml10" 
	     alt="Valid XHTML 1.0 Transitional" 
	     height="31" 
	     width="88" /></a>
    </p>
 
    <p>333333333333333333</p>
 
    <p>555555555555555555</p>
 
    <p><a href="http://example.com">
	<img src="linktest.jpg"
	     alt="a solid color test image" /></a>
    </p>
 
    <p>555555555555555555</p>
 
    <p><a href="http://somewhere.com" 
	  title="test test test">This is a test link</a></p>
  </body>
</html>

You will see that it does exactly what you wish. To further test, alter the src value so that the image cannot be found, e.g.
    <p><a href="http://example.com">
	<img src="linktest.jp"
	     alt="a solid color test image" /></a>
    </p>

Notice that the alt text is treated as if it were a text link. Automagically!

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

I will answer as soon as I

I will answer as soon as I obtain a test domain.
I am having huge trouble figuring out how to use this q&a system so once I have that test domain it will be easier to post my questions.
Thank you for your patience.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Have you not installed a web

Have you not installed a web server on your own computer/s/? See WampServer for Windows. I think Macs have Apache/PHP/MySQL out of the box, and I don't know of any of the major Linux distributions that don't consider the combo as standard equipment.

A public domain is handy, but not required for getting help. Simply posting your code exactly as it is plus the images that cause the problem is fine. If you don't want to use your regular site for this purpose because of Google, &c., don't worry. Put all your test stuff in a separate directory and include a robot.txt file to exclude search engines.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

ok This is just an attempt to

ok
This is just an attempt to learn how to upload a graphic
please ignore me while I try to learn this system

AttachmentSize
valid-html401-blue.jpg 9.25 KB
valid-html401-blue.jpg 9.25 KB
valid-html401-blue.png 1.63 KB
DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

First, you asked to see the

First, you asked to see the changes I made.

Here is the modified code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
 
<head>
<title>TEST-4</title>
<style type="text/css">
.no-border {
	border-width: 0;
}
 
body {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: .95em;
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	color: #000000;
}
body img {
 border: 0px;
 text-decoration: none;
}
 
#content {
	padding: 5px;
	margin-left: 240px;
	background-color: #FFFFFF;
}
 
a:link {
 font-weight: bold;
 color: #000000;
 background-color: transparent;
 text-decoration: underline;
}
a:visited {
 font-weight: bold;
 color: #000000;
 background-color: transparent;
 padding: 0px;
 text-decoration: underline;
}
a:hover {
 font-weight: bold;
 text-decoration : none;
 background-color: #F4D180;
 color: #000000;
}
a:active {
 font-weight: bold;
 text-decoration : underline;
 background-color: #BFDFE2;
 color: #000000;
}
 
.ClassTellingCSSThatThisIsAnImage a:link {
 font-weight: bold;
 background-color: transparent;
 text-decoration: underline;
}
.ClassTellingCSSThatThisIsAnImage a:visited {
 font-weight: bold;
 background-color: transparent;
 padding: 0px;
 text-decoration: underline;
}
.ClassTellingCSSThatThisIsAnImage a:hover {
 text-decoration : none;
 background-color: transparent;
 color: transparent;
}
.ClassTellingCSSThatThisIsAnImage a:active {
 font-weight: bold;
 text-decoration : underline;
 background-color: transparent;
}
 
</style>
</head>
 
<body>
		<p>111111111111111111</p>
 
			<span class="ClassTellingCSSThatThisIsAnImage"><a href="http://validator.w3.org/check?uri=referer" target="_blank">
			<img alt="." height="31" src="i/valid-html401-blue.png" title="." width="88" class="no-border"></a></span>&nbsp;
 
		<p>111111111111111111</p>
		<p>&nbsp;</p>
		<p>444444444444444444</p>
 
			<a href="http://validator.w3.org/check?uri=referer" target="_blank">
			<img alt="." height="31" src="i/valid-html401-blue.jpg" 
			title="." width="88" class="no-border"></a>&nbsp;
		<p>444444444444444444</p>
		<p>&nbsp;</p>
		<p>5555555555555555555</p>
 
			<a href="http://validator.w3.org/check?uri=referer" target="_blank">
			<img alt="." height="31" src="i/valid-html401-blue.gif" 
			title="." width="88" class="no-border"></a>&nbsp;
		<p>5555555555555555555</p>
		<p>&nbsp;</p>
		<p><a href="http://somewhere.com" title="test test test">This is a text link</a></p>
 
</body>
</html>

I have also uploaded the png, jpg and gif graphics.

As you can see, the "hover color" shows in examples 444 and 555 even though I am not using a png graphic but am instead using a gif or jpg graphic.

Because of my own personal limitations, I'll move forward in the next post.

AttachmentSize
valid-html401-blue.png 1.63 KB
valid-html401-blue.gif 3.22 KB
valid-html401-blue.jpg 9.25 KB
DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Looking now at what YOU

Looking now at what YOU proposed I see

 a:hover[rel=valid] {
        background-color: transparent;
        }

I will attempt to find out what that means and write again once I know.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Ok I have been unable to

Ok
I have been unable to figure out the code I just wrote about so I am moving on to the next step

Here is the modified code you proposed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
    <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
    <title>link-TEST-3</title>
 
    <style type="text/css">
      .auto-style1 {
        border-width: 0;
        }
 
      body {
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: .95em;
        margin: 0px;
        padding: 0px;
        background-color: #ffffff;
        color: #000000;
        }
 
      body img {
      border: 0px;
      text-decoration: none;
      }
 
      #content {
	padding: 5px;
	margin-left: 240px;
	background-color: #FFFFFF;
        }
 
      a:link {
      font-weight: bold;
      color: #000000;
      background-color: transparent;
      text-decoration: underline;
      }
 
      a:visited {
      font-weight: bold;
      color: #000000;
      background-color: transparent;
      padding: 0px;
      text-decoration: underline;
      }
 
      a:hover {
      font-weight: bold;
      text-decoration : none;
      background-color: #F4D180;
      color: #000000;
      }
 
      a:active {
      font-weight: bold;
      text-decoration : underline;
      background-color: #BFDFE2;
      color: #000000;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:link {
      font-weight: bold;
      background-color: transparent;
      text-decoration: underline;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:visited {
      font-weight: bold;
      background-color: transparent;
      padding: 0px;
      text-decoration: underline;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:hover {
      text-decoration : none;
      background-color: transparent;
      color: transparent;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:active {
      font-weight: bold;
      text-decoration : underline;
      background-color: transparent;
      }
 
      a:hover[rel=valid] {
        background-color: transparent;
        }
 
</style>
</head>
 
  <body>
    <p>111111111111111111</p>
 
    <p><span class="ClassTellingCSSThatThisIsAnImage">
	<a href="http://validator.w3.org/check?uri=referer">
	  <img src="http://www.w3.org/Icons/valid-xhtml10" 
	       alt="Valid XHTML 1.0 Transitional" 
	       height="31" 
	       width="88" 
	       class="auto-style1"/></a>
      </span>
    </p>
 
    <p>111111111111111111</p>
 
    <p>333333333333333333</p>
 
    <p><a href="http://validator.w3.org/check?uri=referer" 
	  target="_blank"> 
	<img src="http://www.w3.org/Icons/valid-xhtml10" 
	     alt="Valid XHTML 1.0 Transitional" 
	     height="31" 
	     width="88" /></a>
    </p>
 
    <p>333333333333333333</p>
 
    <p>555555555555555555</p>
 
    <p><a href="http://example.com">
	<img src="linktest.jpg"
	     alt="a solid color test image" /></a>
    </p>
 
    <p>555555555555555555</p>
 
    <p><a href="http://somewhere.com" 
	  title="test test test">This is a test link</a></p>
  </body>
</html>

I have installed that code as a test.

Alas, hover (on the 333 and 555 tests) still shows a shadow background color.

So no progress there.

Back to you.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

This is a part of my testing,

This is a part of my testing, and was inadvertently left in when I realized I had simply replaced one attribute with another. Delete it.

      a:hover[rel=valid] {
        background-color: transparent;
        }

This next bit was mentioned in comment #10 above and was somehow left off the example I posted. An image is a replaced inline element and normally sits on the baseline. The baseline has space beneath it to allow for character descenders, so we move it to the bottom to completely hide the parent's background. See that mysterious gap under images.

      a img {
        vertical-align: bottom;
        border: none;
        }
Et, voilà! All done.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

First, thank you so much for

First, thank you so much for your patience. You are most kind and gracious.

That said, I attempted to add the code you specified and got the code below. Perhaps I did it wrong but it still shows the effects of the hover.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
    <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
    <title>link-TEST-3</title>
 
    <style type="text/css">
      .auto-style1 {
        border-width: 0;
        }
 
      body {
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: .95em;
        margin: 0px;
        padding: 0px;
        background-color: #ffffff;
        color: #000000;
        }
 
      body img {
      border: 0px;
      text-decoration: none;
      }
 
      #content {
	padding: 5px;
	margin-left: 240px;
	background-color: #FFFFFF;
        }
 
      a img {
        vertical-align: bottom;
        border: none;
        }        
 
      a:link {
      font-weight: bold;
      color: #000000;
      background-color: transparent;
      text-decoration: underline;
      }
 
      a:visited {
      font-weight: bold;
      color: #000000;
      background-color: transparent;
      padding: 0px;
      text-decoration: underline;
      }
 
      a:hover {
      font-weight: bold;
      text-decoration : none;
      background-color: #F4D180;
      color: #000000;
      }
 
      a:active {
      font-weight: bold;
      text-decoration : underline;
      background-color: #BFDFE2;
      color: #000000;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:link {
      font-weight: bold;
      background-color: transparent;
      text-decoration: underline;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:visited {
      font-weight: bold;
      background-color: transparent;
      padding: 0px;
      text-decoration: underline;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:hover {
      text-decoration : none;
      background-color: transparent;
      color: transparent;
      }
 
      .ClassTellingCSSThatThisIsAnImage a:active {
      font-weight: bold;
      text-decoration : underline;
      background-color: transparent;
      }
 
</style>
</head>
 
  <body>
    <p>111111111111111111</p>
 
    <p><span class="ClassTellingCSSThatThisIsAnImage">
	<a href="http://validator.w3.org/check?uri=referer">
	  <img src="http://www.w3.org/Icons/valid-xhtml10" 
	       alt="Valid XHTML 1.0 Transitional" 
	       height="31" 
	       width="88" 
	       class="auto-style1"/></a>
      </span>
    </p>
 
    <p>111111111111111111</p>
 
    <p>333333333333333333</p>
 
    <p><a href="http://validator.w3.org/check?uri=referer" 
	  target="_blank"> 
	<img src="http://www.w3.org/Icons/valid-xhtml10" 
	     alt="Valid XHTML 1.0 Transitional" 
	     height="31" 
	     width="88" /></a>
    </p>
 
    <p>333333333333333333</p>
 
    <p>555555555555555555</p>
 
    <p><a href="http://example.com">
	<img src="linktest.jpg"
	     alt="a solid color test image" /></a>
    </p>
 
    <p>555555555555555555</p>
 
    <p><a href="http://somewhere.com" 
	  title="test test test">This is a test link</a></p>
  </body>
</html>

That said, please help me see if I understand correctly:
There is no way to stop the CSS from adding the hover color even when there is no text and our only hope is to try to hide the fact that it did.

Am I understanding correctly?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Mostly yes

Based on your not wanting to segregate links with images from links without images, e.g. by class, all links will have the :hover effect. Therefore the images must cover up the effects if you don't want them to show.

Yours was a special case in a way, in that the image is a png (or it could have been a gif) with transparent areas. An opaque image would have had only the issue of baseline vertical alignment.

Using a class or other attribute to turn off the :hover effect is a Not Good Idea® because then it wouldn't work properly for alt text should the image not load. So your dislike for using class tokens, in this case, was a Good Thing®. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Thank you so much. Finally

Thank you so much.
Finally having a definitive answer that CSS won't do what I'd like it to do, I'll accept it and move on.

I shall remove the hover background effect and stick with hover effects that effect text and not images (e.g., text color changes and removing text underline).

Thank you again for your incredible patience.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You're welcome

I don't think it's so much that css won't do what you want it to[1], but that what you want is not a good idea once you think it through. Consider that your link image does not load, and that css knows to kill the :hover or other link presentation rule effects for links with images. Then your link text provided by the alt attribute would be rendered as plain ordinary text with no indication of being a link.

Simply not using link images that have transparency is fully sufficient to your solution.

cheers,

gary

[1] CSS cannot work on the parent element for technical reasons due to the way the style rules are applied. You can use javascript to set certain links, those with images e.g., to a separate class. That would be automagical, but would require a bit of coding. It would still have the issue of non-loaded images.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

You wrote: Simply not using

You wrote:
Simply not using link images that have transparency is fully sufficient to your solution.

So far, I have not been able to see that work. I tried it with jpgs and gifs which I thought did not have transparency and could still see the background color appear.

Could you show me what you mean?

Understand that this is no longer critical for me as I've planned to only rely on a text color change and elimination of the underline (on hover) and that appears to have no image fallout.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

See comment #26

See comment #26 above.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Thank you for your reference

Thank you for your reference to #26 above.

In my reply at #27 above I attempted to implement #26 above and the results were that with all png, gif and jpg images the background color showed on hover.

I am sorry that I do not understand.

I have yet to find any solution in which a background color will not show on hover when a graphic is used.

Again, while not particularly critical to me at this time, I am curious. I have eliminated background color changes and now just change the color and underlining of linked text. Thus the only visual effect for hover over a linked image is the pop-up of the alt/title and the link targer display in the browser window. But I remain curious even as I remain very thankful for all your time and effort in helping me in this silly question.

I hope you have a happy and safe 4th.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A happy 4th to you also

Using the code you posted in #27:

  • #1 does not show the bg color on hover due to the class attribute deselecting the bg color change.
  • #3 does allow the bg color to show through the transparent area of the png image.
  • #5, using the image I uploaded, an opaque blue image, no bg color shows because there is no transparent area in the image, and the space for character descenders was eliminated.
  • The succeeding plain text link works as expected.

Your converted (png ⇒ jpg, &c.) images work the same as my uploaded image. I simply do not see the problem you keep coming back to. Where, exactly, are the differences between what I see in each link and what you see? Even better, using your code from #27, make a screen cap showing the hover state for link #5 and upload it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

working on doing as you

working on doing as you request
trying to figure out how to do and will post again just as soon as I do
sorry
I'm a beginner at all this

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

apologizing again I deleted

apologizing again
I deleted all my test code so this will take me a while to reconstruct

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

please forgive me I will go

please forgive me
I will go back to try to reconstruct what you have asked for
This may take me a couple days so I beg your patience, as I'm trying to remember what #3, #5, etc were but I'll work on it the next couple days and I thank you for your patience

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

copy/paste?

You can simply copy the source from one of the comments above, and paste it into your editor.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

TEST-7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>link TEST-7</title>
<style type="text/css">
body {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: .95em;
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	color: #000000;
}
body img {
	border: 0px;
	text-decoration: none;
}
#content {
	padding: 5px;
	margin-left: 240px;
	background-color: #FFFFFF;
}
a img {
	vertical-align: bottom;
	border: none;
}
a:link {
	font-weight: bold;
	color: #000000;
	background-color: transparent;
	text-decoration: underline;
}
a:visited {
	font-weight: bold;
	color: #000000;
	background-color: transparent;
	text-decoration: underline;
}
a:hover {
	font-weight: bold;
	text-decoration : none;
	background-color: #F4D180;
	color: #000000;
}
a:active {
	font-weight: bold;
	text-decoration : underline;
	background-color: #BFDFE2;
	color: #000000;
}
</style>
</head>
 
<body>
 
<p>TEST 7 PAGE<br>This "page" shows (6) a png, (7) a jpg, (<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" /> a gif, (9) a missing graphic and a text link.<br>Note that <em><strong>all</strong></em> of the graphic links show a hover effect (to wit, a largely, but not entirely, obsured 
"background color", the same as for the text link).<br>Text link colors are black/underlined.<br>Text hover colors are black/no-underline/orange background.</p>
<p>66666666666666666666 png</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="png" height="31" src="valid-html401-blue.png" title="png" width="88"></a> </p>
<p>66666666666666666666 png</p>
<p>&nbsp;</p>
<p>77777777777777777777 jpg</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="jpg" height="31" src="valid-html401-blue.jpg" title="jpg" width="88"></a> </p>
<p>77777777777777777777 jpg</p>
<p>&nbsp;</p>
<p>88888888888888888888 gif</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="gif" height="31" src="valid-html401-blue.gif" title="gif" width="88"></a> </p>
<p>88888888888888888888 gif</p>
<p>&nbsp;</p>
<p>99999999999999999999 a missing graphic</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="This demonstrates the behavior of a missing graphic showing a large alt/title text" height="31" src="missing-graphic" title="This demonstrates the behavior of a missing graphic showing a large alt/title text" width="88"></a> </p>
<p>99999999999999999999 a missing graphic</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://somewhere.com" title="text link text link text link">This is a text link</a></p>
 
</body>
 
</html>

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

TEST-8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>link TEST-8</title>
<style type="text/css">
body {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: .95em;
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	color: #000000;
}
body img {
	border: 0px;
	text-decoration: none;
}
#content {
	padding: 5px;
	margin-left: 240px;
	background-color: #FFFFFF;
}
a img {
	vertical-align: bottom;
	border: none;
}
</style>
</head>
 
<body>
 
<p>TEST 8 PAGE<br>This "page" shows (6) a png, (7) a jpg, (<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" /> a gif, (9) a missing graphic and a text link.<br>The link and hover colors are the browser defaults.<br>Note that <em><strong>none</strong></em> of the graphic links show a hover effect.<br>Text link colors are 
the <strong><em>default</em></strong>: blue/underlined.<br>Text hover colors are the <strong><em>default</em></strong>: blue/underlined.</p>
<p>66666666666666666666 png</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="png" height="31" src="valid-html401-blue.png" title="png" width="88"></a> </p>
<p>66666666666666666666 png</p>
<p>&nbsp;</p>
<p>77777777777777777777 jpg</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="jpg" height="31" src="valid-html401-blue.jpg" title="jpg" width="88"></a> </p>
<p>77777777777777777777 jpg</p>
<p>&nbsp;</p>
<p>88888888888888888888 gif</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="gif" height="31" src="valid-html401-blue.gif" title="gif" width="88"></a> </p>
<p>88888888888888888888 gif</p>
<p>&nbsp;</p>
<p>99999999999999999999 a missing graphic</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="This demonstrates the behavior of a missing graphic" height="31" src="missing-graphic" title="This demonstrates the behavior of a missing graphic" width="88"></a> </p>
<p>99999999999999999999 a missing graphic</p>
<p>&nbsp;</p>
<p><a href="http://somewhere.com" title="text link text link text link">This is a text link</a></p>
 
</body>
 
</html>

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

TEST-9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>link TEST-9</title>
<style type="text/css">
body {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: .95em;
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	color: #000000;
}
body img {
	border: 0px;
	text-decoration: none;
}
#content {
	padding: 5px;
	margin-left: 240px;
	background-color: #FFFFFF;
}
a img {
	vertical-align: bottom;
	border: none;
}
a:link {
 font-weight: bold;
 color: #4d5a32;
 background-color: transparent;
 text-decoration: underline;
}
a:visited {
 font-weight: bold;
color: #4d5a32;
 background-color: transparent;
 padding: 0px;
 text-decoration: underline;
}
a:hover {
 font-weight: bold;
 text-decoration : none;
 background-color: transparent;
 color: #ff0000;
}
a:active {
 font-weight: bold;
 text-decoration : underline;
 background-color: transparent;
 color: #ff0000;
}
</style>
</head>
 
<body>
 
<p>TEST 9 PAGE<br>This "page" shows (6) a png, (7) a jpg, (<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" /> a gif, (9) a missing graphic and a text link.<br>Note that <em><strong>none</strong></em> of the graphic links show a hover effect<br>
The text link colors are green/underlined.<br>The text hover colors are red/no-underline.</p>
<p>66666666666666666666 png</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="png" height="31" src="valid-html401-blue.png" title="png" width="88"></a> </p>
<p>66666666666666666666 png</p>
<p>&nbsp;</p>
<p>77777777777777777777 jpg</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="jpg" height="31" src="valid-html401-blue.jpg" title="jpg" width="88"></a> </p>
<p>77777777777777777777 jpg</p>
<p>&nbsp;</p>
<p>88888888888888888888 gif</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="gif" height="31" src="valid-html401-blue.gif" title="gif" width="88"></a> </p>
<p>88888888888888888888 gif</p>
<p>&nbsp;</p>
<p>99999999999999999999 a missing graphic</p>
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img alt="This demonstrates the behavior of a missing graphic" height="31" src="missing-graphic" title="This demonstrates the behavior of a missing graphic" width="88"></a> </p>
<p>99999999999999999999 a missing graphic</p>
<p>&nbsp;</p>
<p><a href="http://somewhere.com" title="text link text link text link">This is a text link</a></p>
 
</body>
 
</html>

DebBilsen
DebBilsen's picture
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2012-06-30
Posts: 27
Points: 28

Comments about the test pages

Comments about the test pages shown above.

THE TEST 7 PAGE ABOVE

This "page" shows (6) a png, (7) a jpg, (Cool a gif, (9) a missing graphic and a text link.

Note that ALL of the graphic links show a hover effect (to wit, a largely, but not entirely, obsured "background color", the same as for the text link).

Text link colors are black/underlined.
Text hover colors are black/no-underline/orange background.

THE TEST 8 PAGE ABOVE

This "page" shows (6) a png, (7) a jpg, (Cool a gif, (9) a missing graphic and a text link.

The link and hover colors are the browser defaults.

Note that none of the graphic links show a hover effect.

Text link colors are the default: blue/underlined.
Text hover colors are the default: blue/underlined.

THE TEST 9 PAGE ABOVE

This "page" shows (6) a png, (7) a jpg, (Cool a gif, (9) a missing graphic and a text link.

Note that none of the graphic links show a hover effect

The text link colors are green/underlined.
The text hover colors are red/no-underline.