Cambiar borde de imagenes de color y que conmuten

Hola. Llevo toda la tarde con el tema y no veo como hacer esto. Tengo 5 imagenes, todas de igual tamaño y a las que le defino un borde blanco de 2 pixeles. Al pasar el raton por lo alto, el borde se pone rojo. Hasta aqui lo he conseguido con este codigo:

<style>
a:hover{color:B600FF; }
<style type='text/css'>
</style>

Lo que pretendo ahora, es que, aparte de esto, al pincharle a una imagen, esta se quede con el borde rojo, hasta que pinchemos alguna de las otras imagenes, como para indicar que esta activa. Se entiende, no? Alguna idea?

Si ese código que pones, realmente te funciona debes ser una de las personas con mas suerte que he visto. Te muestro por qué:

-Abres dos veces etiqueta style.
-Cierras una sola vez
-En la primera no defines tipo ni nada.
-El color le falta el simbolo #
-El estilo se lo aplicas a un ancla (<a>) en vez de a la imagen.
-El atributo "color" es para cambiar de color texto, no bordes.

Por otro lado, eso que quieres hacer no es posible solo con html-css, ya que no hay ninguna propiedad que funcione para eso (esta focus, pero según yo solo funciona en Firefox), así que lo mas sano, es usar un JavaScript con el que puedas cambiar o agregar una clase al elemento seleccionado y definir en el css esa clase con el color del borde como lo quieres.

De todas maneras prueba con focus a ver donde funciona, quizás con jQuery puedas aplicarlo a otros navegadores

Código :

a:focus img {
border: 2px solid red;
}

Dos correcciones y una sugerencia:
La forma de incluir los estilos en el head es:

Código :

<style type='text/css'>
/*estilos declarados*/
</style>

En el código que indicas estás aplicando el color (que no borde) al elemento "enlace", no al "img" (imagen), y como usas la notación hexadecimal, te falta la almohadilla (#) precediendola: color:#B600FF;
La sugerencia:
Las pseudoclases que deberías investigar son:

Código :

a {....} /*es lo mismo que a:link */
a:visited {....}
a:hover {....}
a:active {....} 

y respetar ese orden de declaración en el css.
Como creo que estás iniciándote en el uso de las hojas de estilo, un buen recurso sería que pasases por www.librosweb.es

Saludos

Opss, dos respuestas por el precio de una, y buen choque, Ramm

Sólo una matización (se me pasó en el anterior):
el efecto sí se puede conseguir con css, PERO no es persistente.
Esto es, se mantendrá mientras no pinches en cualquier otro (incluido el html, body), momento en que tomará las propiedades definidas para ":visited" o en su ausencia para "a"

Jajajajaj, bueno al menos eso le quedará claro .

No entendí muy bien lo que dices, ya que el quiere que al dar clic en alguna imagen, esta le quede el color del borde rojo hasta que haga clic en cualquier otra cosa.
Con CSS solamenet no se puede, ya que los 4 estados que mencionas hacen lo siguiente:
Suponiendo que tenemos esto:

Código :

<style type='text/css'>
a:link img {
  border:2px solid white;
}
a:visited img {
  border:2px solid blue;
}
a:hover img {
  border:2px solid red;
}
a:active img {
  border:2px solid green;
}
</style>

Lograrás ver lo siguiente:
-Borde blanco a la imagen mientras al cargar la pagina
-Borde rojo al posar el cursor sobre la imagen (sin hacer clic), se regresa a blanco al quitarlo (si no hiciste clic).
-Borde verde en la imagen al hacer clic y mantener, mientras tengas el boton presionado se ve el color (puedes simular el efecto, haciendo clic y arrastrando el cursor para soltar el boton fuera de la imagen, pero obviamente no es la idea), al quitar el cursor, el boton cambiara a "visited"
-Borde azul, una vez que hiciste clic, el borde se queda azul para siempre (incluso si recargas la pagina), indicando que ya fue visitado.

Por eso digo que mantenerlo como "seleccionado" no funciona con CSS solamente, solo con el focus (que incluso funciona navegando con la tecla Tab) en Firefox.

Saludos.

Hola Ramm
Vaya que sí, que algo le debería quedar claro.

Mis disculpas, fui demasiado parco en palabras en mi anterior comentario, pues sólo lo mencioné de pasada y como complemento a futuros visitantes de la consulta, más que como respuesta a la consulta.

A lo que me refería es que con css sí puedes aplicar estilos a un elemento seleccionado, pero que sólo se mantendrán hasta que se seleccione otro (hacer clic en cualquier parte). Repito, no me refería al caso concreto de una imagen.
Un ejemplo de lo que quise decir aquí

Pero después de publicarlo me di cuenta que había sido demasiado categórico, por lo tanto, erróneo.
Recordé que en Stu Nicholls había visto algunos ejemplos de "persistencia" del elemento seleccionado, logrado sólo con css.
Se trata de galerías de imágenes (sólo css) en las que la seleccionada es "persistente". Se mantiene visible aunque hagas clic en otros elementos. En el enlace de arriba se encuentran cinco versiones bajo el título "Click gallery with permanent images" (columna de la derecha "Últimas demostraciones): ver. V, ver.IV, etc.

Creo que en base a lo anterior se podría lograr. Otra cosa muy distinta es el grado de dificultad y si merecería la pena ser usada esa técnica u otra. Está claro que en estos momentos yo no se la recomiendo a Elapio.

Pero como te decía, era un apunte a vuelapluma, algo más allá de lo planteado y demasiado escueto por mi parte. Así que no me extraña que no me entendieses.

Saludos

Ahora si

Y de hecho fijate que en ese ejemplo, usan focus