0

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>
2
Contributors
1
Reply
3
Views
4 Years
Discussion Span
Last Post by LastMitch
0

@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.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.