1,105,406 Community Members

Changing border size only via button

Member Avatar
Thermalnuke
Junior Poster in Training
95 posts since Dec 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I can expand the picture, but I need the border only to expand.

<!doctype html>
<!-- mystery3.html  -->
<!-- This page changes an image border on button clicks. -->
<!-- =================================================== -->
<html>
<head>
<title>Mystery Image</title>
<style type="text/css">
.border-style1 {
    border-style: solid;
    border-width: 4px;
}
</style>
</head>
<body>
<div style="text-align:center">
<img id="testImg" height=85 width=85
src="http://www.tburg.k12.ny.us/mcdonald/Noaa-walrus22.jpg"class="border-style1">
<p>
<input type="button" value="Expand Border"
onclick="document.getElementById('testImg').height=
  2*document.getElementById('testImg').height;
document.getElementById('testImg').width=
  2*document.getElementById('testImg').width;">

<input type="button" value="Reduce Border"
onclick="document.getElementById('testImg').height=
  0.5*document.getElementById('testImg').height;
document.getElementById('testImg').width=
  0.5*document.getElementById('testImg').width;">



</p>
</div>
</body>
</html>
Member Avatar
code739
Posting Whiz in Training
213 posts since May 2012
Reputation Points: 17 [?]
Q&As Helped to Solve: 30 [?]
Skill Endorsements: 6 [?]
 
0
 
Member Avatar
code739
Posting Whiz in Training
213 posts since May 2012
Reputation Points: 17 [?]
Q&As Helped to Solve: 30 [?]
Skill Endorsements: 6 [?]
 
0
 

to manipulate the border
first use the inline css from your img
like <img src="imgs src" style="border:4px solid black" id="testImg"/>

then from the botton where the onclick happen for example on expand border

<input type="button" value="expand image" onclick='document.getElementById("testImg").style.borderWidth =    
(parseInt(document.getElementById("testImg").style.borderWidth)*2)+"px";'>


//and for the reduce border: the same script but use the division operand '/' 
Member Avatar
JorgeM
IT Addict
6,419 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
1
 

For some reason I had some trouble on the border width property with JavaScript alone. I had no problem extracting the info using jQuery. hmmm, i'll need to research that some more in detail, but in the mean time, here is a cleaned up version of your code with one function taking care of the height, width and border...

<!DOCTYPE html>
<html>
<head>
<style>
.border-style1 {border-style: solid;border-width: 4px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div style="text-align:center">
<img id="testImg" height="85" width="85" src="http://www.tburg.k12.ny.us/mcdonald/Noaa-walrus22.jpg" class="border-style1">
<p>
<input type="button" value="Expand Border" onclick="modifyImg(2)">
<input type="button" value="Reduce Border"onclick="modifyImg(0.5)">
</p>
</div>

<script>
function modifyImg(x){
var myImage;
myImage = document.getElementById('testImg');
myImage.height = x * myImage.height;
myImage.width = x * myImage.width;
myImage.style.borderWidth = x * parseInt($('#testImg').css('borderWidth')) + "px";
}
</script>
</body>
</html>
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article