Add border to link onclick

I have made a simple drawing canvas with the option to change colour of the pen which works fine (see code below).

I would like to either add a border or highlight the colour that is active.

Could someone give me some help with what I need to add to the javascript to do this.

<a class="colorPicker" href="#" onclick="setColor('255,255,255');return false;"><img src="images/colour_white.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" onclick="setColor('000,000,000');return false;"><img src="images/colour_black.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" onclick="setColor('255,000,000');return false;"><img src="images/colour_red.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" onclick="setColor('000,192,000');return false;"><img src="images/colour_green.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" onclick="setColor('000,000,255');return false;"><img src="images/colour_blue.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" onclick="setColor('255,255,000');return false;"><img src="images/colour_yellow.gif" width="40" height="50"></a>

Open in new window

function setColor(col)
{
	r = (col.substring(0,3));
	g = (col.substring(4,7));
	b = (col.substring(8,11));

//link that was pressed add border around picture
//remove other borders.

}

Open in new window

Steve TinsleyAsked:
Who is Participating?
 
ProculopsisConnect With a Mentor Commented:
Try something like this jsfiddle.

$(".colorPicker").click(function() {
    $(".colorPicker").not(this).removeAttr("style");
    $(this).attr("style", $(this).attr("for"));
});

Open in new window

0
 
Tony van SchaikFront-end Web developerCommented:
You mean something like this? I used jQuery to do the trick:

<!DOCTYPE html>
<html>
    
    <head>
        <style>
            p {
                margin: 10px;
                font-size:16px;
            }
            .selected {
                color:blue;
                border:1px solid #ff0000;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    
    <body>
        <div class="colorpicker">
            <a href="/"><img src="http://farm7.staticflickr.com/6156/6178772100_f64a36b5b6.jpg" width="500" height="379"></a>
            <a href="/"><img src="http://farm8.staticflickr.com/7025/6783068129_71617748ce.jpg" width="500" height="375"></a>
        </div>
        <script>
            $(function () {
                $(".colorpicker img").click(function (e) {
                    e.preventDefault();
                    $(".colorpicker img").addClass("selected").not(this).removeClass("selected");
                });
            });
        </script>
    </body>

</html>

Open in new window


Or did you mean different border colors with onclick?
0
 
Steve TinsleyAuthor Commented:
Hi Guys,
Thanks for the ideas.
Proculopsis - I have had a play with your idea to make it work for me but am struggling...

HTML
<a class="colorPicker" href="#" for="border: solid 3px black;" onclick="setColor('255,255,255');return false;"><img src="images/colour_white.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" for="border: solid 3px black;" onclick="setColor('000,000,000');return false;"><img src="images/colour_black.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" for="border: solid 3px black;" onclick="setColor('255,000,000');return false;"><img src="images/colour_red.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" for="border: solid 3px black;" onclick="setColor('000,192,000');return false;"><img src="images/colour_green.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" for="border: solid 3px black;" onclick="setColor('000,000,255');return false;"><img src="images/colour_blue.gif" width="40" height="50"></a>
<a class="colorPicker" href="#" for="border: solid 3px black;" onclick="setColor('255,255,000');return false;"><img src="images/colour_yellow.gif" width="40" height="50"></a>

Open in new window


JS
function setColor(col)
{
	r = (col.substring(0,3));  // Set drawing color
	g = (col.substring(4,7));  //Set drawing color
	b = (col.substring(8,11));  //Set drawing color
		
    $(".colorPicker").not(this).removeAttr("style");
    $(this).attr("style", $(this).attr("for"));

}

Open in new window


In the above code the border doesnt show when I click link.
I can see how it works looking at the jsfiddle you did.

Any more pointers
0
 
ProculopsisCommented:
Variable this is not meaningful in colorPicker but it is a courtesy of a jQuery event handler.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.