Solved

Add border to link onclick

Posted on 2012-03-31
4
264 Views
Last Modified: 2012-06-21
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

0
Comment
Question by:sjtinsley83
  • 2
4 Comments
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 37792080
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
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
ID: 37793086
Try something like this jsfiddle.

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

Open in new window

0
 

Author Comment

by:sjtinsley83
ID: 37793273
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
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37794696
Variable this is not meaningful in colorPicker but it is a courtesy of a jQuery event handler.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now