Highlight Links as roll over

User 1998828 Photo


Registered User
3 posts

Hi,

I am trying to get the my links to highlight to another color as I go over them with my mouse, then change to that unique color when a user goes to the page. For example, if I have five links to other pages on my site from any given page, I want the one that is chosen and currently being visited to be a different color than the others. I have seen this on many websites and like this feature, but can not figure out how to get it to work on VSD. I tried to change the "visited" and "unvisited" links colors in the "Standard Settings for New Pages" dialog box, but to no avail. My links do nothing when I preview the page. And I don't want the background color changed, just the text. help??

Thanks, Brian
User 463058 Photo


Ambassador
1,085 posts
Online Now

The answer I gave in your other thread won't work with VSD, so try this:

Insert this html into the head of your page:
<style type="text/css">
a#current:link {
color: #FFFF00; /* or whatever color you're after */
}
</style>


You will need to create your menu code with the html tool so you can add an ID to the menu link coinciding with the current page:

<a id="current" href="...
User 1984190 Photo


Registered User
6 posts

Cary wrote:
The answer I gave in your other thread won't work with VSD, so try this:

Insert this html into the head of your page:
<style type="text/css">
a#current:link {
color: #FFFF00; /* or whatever color you're after */
}
</style>


You will need to create your menu code with the html tool so you can add an ID to the menu link coinciding with the current page:

<a id="current" href="...


Need a little help here...I am not familiar with what I need to do for a menu code and menu code ID or where to put it (i.e. <a id="current" href="...). My website is www.fussyrussell.com and the links I am looking to highlight (blue initially and green on the mouse rollover) are "fuss test" and "Scoville Heat Units", respectively on the index page. Thanks.
LAS
User 463058 Photo


Ambassador
1,085 posts
Online Now

Instead of this code:
<style type="text/css">
<!--
a:link {color: #FFCC00; text-decoration: none; }
a:visited {color: #FFCC00; text-decoration: underline; }
a:hover {color: #FFCC00; text-decoration: underline; }
a:active {color: #FFCC00; text-decoration: none; }
-->
</style>

<head>
<link rel="shortcut icon" href="favicon.ico" >
</head>



Try this code and just modify the colors and text-decoration as necessary:
<style type="text/css">
div.Object24328 a:link, div.Object24330 a:link {color: #FFCC00; text-decoration: none; }
div.Object24328 a:visited, div.Object24330 a:visited {color: #FFCC00; text-decoration: underline; }
div.Object24328 a:hover, div.Object24330 a:hover {color: #FFCC00; text-decoration: underline; }
div.Object24328 a:active, div.Object24330 a:active {color: #FFCC00; text-decoration: none; }
</style>

<link rel="shortcut icon" href="favicon.ico" >


Basically, I looked at the code generated by VSD and found the object numbers for the divs that contained the links you wanted customized. Hopefully, the object numbers don't change when you modify and save changes to a page. Notice you don't need the head tags, because all this gets placed within the head.
User 463058 Photo


Ambassador
1,085 posts
Online Now

For blue default, the "link" color would be "#0000FF".
For green rollover, the "hover" color would be "#00FF00".
"Visited" controls the color of links pointing to pages you have visited.
"Active" controls the color of the link when you are actually clicking down on it.
User 1984190 Photo


Registered User
6 posts

Cary

The object numbers did change each time I modified and saved. So what I did was upload my *.vnu file into CC HTML Editor and retrieved the new object numbers. However, when I put your code sequence into VSD, nothing happened, no color changes. I did a test and placed the same code sequence into Editor and it worked perfectly. Any ideas as to why the code works in Editor and not VSD?
LAS

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.