Member Avatar for Thermalnuke

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>
  • 3 Contributors
  • 3 Replies
  • 102 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for code739

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 for JorgeM

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>
Edited by JorgeM
commented: I like you simple solution! +9
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.