title: how do i change button/image onclick to active state?
body: <p>Here is what i want:
  <img src="https://i.stack.imgur.com/iybVF.png" alt="Example"></p>
  
  <p>Now in more detail:</p>
  
  <p>I have 2 iframes, one on top of the other. the one above has 4 buttons/images, the one below is where a url/link will be displayed when one of these buttons/images gets clicked. i got this working... </p>
  
  <p>what i want now is to have those buttons change image from inactive (ie. light pink) to active (ie. red) state when they are clicked. also, when i click on another of the 4 buttons it will turn red and the previous active (red) button/image must turn back to its inactive state (light pink). so i want 2 images here: (1) active.png and (2) inactive.png. </p>
  
  <p>ALSO, i want the buttons to change to active.png when i hover over them. this i was able to manage with onmouseover and onmouseout effect. its just the ACTIVE part is what i cant figure out. </p>
  
  <p>do i need javascript or can i do without it in case some user has it disabled?</p>
  
  <p>i was also thinking about maybe using radio buttons and then skinning them with my active.png and inactive.png using css or something, but i dont know how to do this either :P  i dont know what is the best and simplest way to go?</p>
  
  <p>------------UPDATE-----------</p>
  
  <p>ok i got something working but im not all the way there yet. it might not even be the way to go, but what i've done is create 4 links and given them all an id (ie.button1, button2..) </p>
  
  <p></p>
  
  <p>then in css i did this for each:</p>
  
  <p>button1 { width: 66px; height: 70px; display: block; background-image:url(images/inactive1.png); } 
  button1:hover { width: 66px; height: 70px; display: block; background-image:url(images/active1.png); } 
  button1:focus{ width: 66px; height: 70px; display: block; background-image:url(images/active1.png); } </p>
  
  <p>but i dont want it to loose focus unless another one of the buttons is clicked. cuz now its loosing focus if i click anywhere on the page :(   how can i fix this?</p>