Elegant solution for active links

[Bolteh]

I'm a designer at heart and I'm pretty skilled in HTML and CSS styling, but with little to no knowledge of Javascript or PHP etc at all.However, my current job set me up with a project to design a HTML holder for a Java applet they created. Said applet is capable of resizing through HTML links (so outside of the Java app itself). So foolishly I designed 3 icons for each different screensize. The idea is that when the icon for the small screensize is clicked, it stays selected (stays in its hover state) until one of the other icons are clicked (which in turn should remain selected).All of this happens on 1 (one) page, so the icons link to "#" (aka same page) and have the following onclick command: onClick="resizeViewer(500, 340)". Now, I have found some Javascripts that allow for intelligent navigation that shows you what link you're on, but those only work for links that actually link to other pages, but do absolutely nothing for links that don't go anywhere. If I was working with multiple pages, I would've simply created a class called "active" and just set the corresponding links to that class, but alas.Now, I have found some sort of solution to this problem, but it's extremely clumsy and I would like it to be a lot more elegant (read: not have different IDs and onClick events for each link), so I turn to the proper pros for help.Thanks in advance!JS ("contentcolumn" is the div that holds the Java app):

function changePositionSmall(x, y)   {	  document.getElementById('SmallSize').style.backgroundPosition="0px -40px";	  document.getElementById('MediumSize').style.backgroundPosition="top left";	  document.getElementById('LargeSize').style.backgroundPosition="top left";	  document.getElementById('contentcolumn').style.width = x+'px';	  document.getElementById('contentcolumn').style.height = y+'px';   }		function changePositionMedium(x, y)   {	  document.getElementById('SmallSize').style.backgroundPosition="top left";	  document.getElementById('MediumSize').style.backgroundPosition="0px -40px";	  document.getElementById('LargeSize').style.backgroundPosition="top left";	  document.getElementById('contentcolumn').style.width = x+'px';	  document.getElementById('contentcolumn').style.height = y+'px';   }		function changePositionLarge(x, y)   {	  document.getElementById('SmallSize').style.backgroundPosition="top left";	  document.getElementById('MediumSize').style.backgroundPosition="top left";	  document.getElementById('LargeSize').style.backgroundPosition="0px -40px";	  document.getElementById('contentcolumn').style.width = x+'px';	  document.getElementById('contentcolumn').style.height = y+'px';   }

HTML:

<divid="ScreenSize">   <ul id="ScreenSizeLinks">	  <li><a href="#" onClick="changePositionSmall(500, 340)" id="SmallSize"></a></li>	  <li><a href="#" onClick="changePositionMedium(660, 445)" id="MediumSize"></a></li>	  <li><a href="#" onClick="changePositionLarge(920, 620)"id="LargeSize"></a></li>   </ul></div>

CSS:

#ScreenSize ul#ScreenSizeLinks li {	float: left;	position: relative;	margin: 0;	padding: 0;}	#ScreenSize ul#ScreenSizeLinks li a:hover {	background-position: 0px -20px !important;	background-repeat: no-repeat !important;}	#ScreenSize ul#ScreenSizeLinks li a#SmallSize {		display: block;		position: relative;		float: left;		width: 17px;		height: 18px;		background: url(img/SmallBTN.gif) top left no-repeat;	}			#ScreenSize ul#ScreenSizeLinks li a#MediumSize {		display: block;		position: relative;		float: left;		width: 20px;		height: 18px;		background: url(img/MedBTN.gif) top left no-repeat;	}			#ScreenSize ul#ScreenSizeLinks li a#LargeSize {		display: block;		position: relative;		float: left;		width: 26px;		height: 18px;		background: url(img/BigBTN.gif) top left no-repeat;	}

[dsonesuk]

you can easily use one function for all

<script type="text/javascript">/*<![CDATA[*//*---->*/function changePosition(curr_butt, x, y)   {   var parent_con = document.getElementById('ScreenSizeLinks'); // identify parent element      var child_anch = parent_con.getElementsByTagName("a"); // identify child a tags you wish to target      for(i=0;i<child_anch.length;i++)  //loop through ALL anchor tags and reset to required position   {   child_anch[i].style.backgroundPosition="top left";   }   	  curr_butt.style.backgroundPosition="0px -40px"; //change current selected anchor background position	 	  document.getElementById('contentcolumn').style.width = x+'px';	  document.getElementById('contentcolumn').style.height = y+'px';   }		/*--*//*]]>*/</script>

<div id="ScreenSize">   <ul id="ScreenSizeLinks">	  <li><a href="#" onclick="changePosition(this, 500, 340)" id="SmallSize"></a></li>	  <li><a href="#" onclick="changePosition(this, 660, 445)" id="MediumSize"></a></li>	  <li><a href="#" onclick="changePosition(this, 920, 620)" id="LargeSize"></a></li>   </ul></div>

#ScreenSize ul, #ScreenSize li{list-style:none;}/*added by dsonesuk*/#ScreenSize ul#ScreenSizeLinks li {	float: left;	position: relative;	margin: 0;	padding: 0;}	#ScreenSize ul#ScreenSizeLinks li a:hover {	background-position: 0px -20px !important;	background-repeat: no-repeat !important;}	#ScreenSize ul#ScreenSizeLinks li a#SmallSize {		display: block;		position: relative;		float: left;		width: 17px;		height: 18px;		background: url(img/SmallBTN.gif) top left no-repeat;	}			#ScreenSize ul#ScreenSizeLinks li a#MediumSize {		display: block;		position: relative;		float: left;		width: 20px;		height: 18px;		background: url(img/MedBTN.gif) top left no-repeat;	}			#ScreenSize ul#ScreenSizeLinks li a#LargeSize {		display: block;		position: relative;		float: left;		width: 26px;		height: 18px;		background: url(img/BigBTN.gif) top left no-repeat;	}

[Bolteh]

Awesome :)Thanks a lot!

[dsonesuk]

you also have a lot of duplicate styling, you can reduce it by using

#ScreenSize ul, #ScreenSize li{list-style:none;padding:0; margin:0; text-indent:0;}#ScreenSize ul#ScreenSizeLinks li {	float: left;	margin: 0;	padding: 0;	position:relative;}	#ScreenSizeLinks a{position:relative;		display: block;		height: 18px;		float: left;		background-position: 0 0;		background-repeat:no-repeat;	}	a#SmallSize {		width: 17px;		background-image: url(img/SmallBTN.gif);	}			a#MediumSize {		width: 20px;		background-image: url(img/MedBTN.gif);	}			a#LargeSize {		width: 26px;		background-image: url(img/BigBTN.gif);	}		#ScreenSizeLinks a:hover {	background-position: 0px -20px !important;}