A portion of my page needs a modified style like the following:

<style>
A:visited {text-decoration: none; color: navy; padding-right: 40px; background: url(images/visto.gif) no-repeat 100% 60%; }
</style>

which works OK.

Now: the rest of the pages should go back to the standard style:

<style>
A:visited {text-decoration: none; color: navy;}
</style>

Putting this at the end of the modifies page does not work.
How should I do it?
Thanks very much for helping.
ContiW

add a class to the links that need the change like <a class="myclass">

and then your style could be:

a.myclass:visited

That way only links you add that class to will get those styles and all other links will get the original style.

<style>
A.visto:visited {text-decoration: none; color: navy; padding-right: 40px; background: url(images/visto_0.gif) no-repeat 100% 60%;}
</style>

Great. ThankYou very much. That works ok.
Now going a little step further:
I would like to change the background image of the class

I have tried:

<a class="visto" onMouseover="document.getElementById('visto').back ground='url(images/visto_1.gif)'" href=" ......

or

<a class="visto" onMouseover="this.class.background='url(images/visto_1.gif)'" href=" ......

but it doesn't quite works.

Please another little push.

I think you need to use a:hover for this. You could do a.visto:hover {attributes}.
I think that will work.

Impeccable angele803!
Thanks for your help.
WalterConti

No, Wait! That applies to "all", not only those "visited".

So, you want a different background to show up when the user rolls over the link, but only when that link has already been visited?

If so, try:
a.visto:visited:hover {attributes}

Yes.
I have tried

A.visto:visited {text-decoration: none; color: navy; padding-right: 40px; background: url(images/visto_0.gif) no-repeat 100% 60%;}

A.visto:visited:hover {text-decoration: none; color: navy; padding-right: 40px; background: url(images/visto_1.gif) no-repeat 100% 60%;}

but I still fishing in the dark with CSS.

I have found a way of doing it:

Created another class with a different background image:

A.vistohover:visited {text-decoration: none; color: navy; padding-right: 40px; background: url(images/visto.gif) no-repeat 100% 60%;}

then

<a class="visto"
onMouseover="this.className='vistohover'" onMouseout="this.className='visto'"
href="... "></a>

Works good.

Thank you angele for "leading me to the water"!
WalterC

I am glad you figured it out! Thanks also for posting how you did it. I was stumped and it is good to see a slution!

contiw, that's part of the beauty of classes. You apply a class to any element you want to behave in a certain way and then apply the styles to that class in the css. Only those elements that have the class apllied to it should display the way you set.

Glad you got it all working.