Start New Discussion within our UI / UX Design Community

Trying to have 2 buttons, one to add a border, one to remove the border when they're clicked. This is what I have so far, not sure where to go from here, would appreciate help.

<!doctype html>
<!-- mystery3.html  -->
<!-- This page changes an image source on button clicks. -->
<!-- =================================================== -->
<html>
<head>
<title>Mystery Image</title>
<style type="text/css">
.border-style1 {
    border-style: solid;
    border-width: 4px;
}
</style>
</head>
<body>

<img id="mysteryImg" src="http://upload.wikimedia.org/wikipedia/commons/f/f9/Giraffe_Portrait,_Woburn_Safari_Park.jpg" width="20%" height="20%"class="border-style1">
<p>
<input type="button" value="Show Border" 
onclick="document.getElementById('mysteryImg').border=1; 
'http://upload.wikimedia.org/wikipedia/commons/f/f9/Giraffe_Portrait,_Woburn_Safari_Park.jpg"'
'border=1'
<p>
<input type="button" value="Hide" Border 
onclick="document.getElementById('mysteryImg').border=0;
'http://upload.wikimedia.org/wikipedia/commons/f/f9/Giraffe_Portrait,_Woburn_Safari_Park.jpg"';">

</p>
</div>
</body>
</html>

@Thermalnuke

Trying to have 2 buttons, one to add a border, one to remove the border when they're clicked. This is what I have so far, not sure where to go from here, would appreciate help.

I'm not sure maybe I'm wrong but you can't just used CSS because you need like script kinda like javascript to make that funciton work. So far the code you provided I don't see a javascript code related to your issue.

This question has already been answered. Start a new discussion instead.