Anchor Pseudo Classes

[GerryH]

I'm using CSS Sprites for a nav-bar, and using the pseudo classes "hover, visited, etc" (which is very cool) but for javascript enabled browsers I wanted to know if or how I can change the style dynamically. In other words, when the user clicks an anchor, I capture the onclick event, which calls an AJAX function to just change the body of the page (which has a more pleasing effect) instead of the default anchor calling a whole page.However I would like to alter the style of the pseudo classes to change the "image". I know I can just do this with mouseover, mouseout events, but for example heres the original CSS snippet;

#menu1 a:link {background: transparent url('menu_buttons.png')  -0px -0px no-repeat;}#menu1 a:visited {background: transparent url('menu_buttons.png')  0px -0px no-repeat;}#menu1 a:focus {background: transparent url('menu_buttons.png')  0px -32px no-repeat;}#menu1 a:hover {background: transparent url('menu_buttons.png')  0px -64px no-repeat;}#menu1 a:active {background: transparent url('menu_buttons.png')  0px -64px no-repeat;}

HTML

<li id="menu1"><a id="p1" href="index.php?p=p1"></a></li>

Javascript

window.onload = init;function init(){   ...   document.getElementById('p1').onclick = changePage;}function changePage(){   // Is there something similar to what I'm trying to do here?      document.getElementById('p1').style.hover.background = "transparent url('menu_buttons.png')  0px -128px no-repeat";     ...}

Thanks in advance for any advice!

[justsomeguy]

It's probably best to create classes for each type and then just change the classname on the element.

[GerryH]

Well No Joy,I added this to my CSS

.menu1a:link {background: transparent url('menu_buttons.png')  -0px -64px no-repeat;}.menu1a a:visited {background: transparent url('menu_buttons.png')  0px -64px no-repeat;}.menu1a a:focus {background: transparent url('menu_buttons.png')  0px -0px no-repeat;}.menu1a a:hover {background: transparent url('menu_buttons.png')  0px -32px no-repeat;}.menu1a a:active {background: transparent url('menu_buttons.png')  0px -128px no-repeat;}

JavaScript

function changePage(){   var myMenu = document.getElementById('menu1');	  // The <ul> element parent to the <a:   myMenu.className = "menu1a";}

I did notice using both Firebug and the IE8 debugger, before I assigned the "className" the string was blank. I inspected the actual anchors id, and saw that the className was a blank string. I also tried this technique on the actual anchor itself, but same result.I know I can fallback to assigning the background using the mouse events, but I feel I'm just hacking the styles. Any suggestions (other than taking up a new career in food service)?

[justsomeguy]

Use setAttribute, and set both "class" and "className".myMenu.setAttribute("class", "menu1a");myMenu.setAttribute("className", "menu1a");