Steve Tinsley
asked on
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.
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>
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.
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
JS
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
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>
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"));
}
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
Variable this is not meaningful in colorPicker but it is a courtesy of a jQuery event handler.
Open in new window
Or did you mean different border colors with onclick?