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=""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
  • 113 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

A simple way to keep the image size fixed while making only the border grow is to draw the border outside the image (so the image never changes) and control that border with a CSS variable. This avoids touching the <img> dimensions and keeps layout predictable. Both and were on the right track with changing border width from script; below is an alternative that separates the border from the image and requires no jQuery.

Example (wrap + pseudo-element + CSS variable):

<div class="frame" style="--b:4px">
  <img id="pic" src="your-image.jpg" width="85" height="85" alt="">
</div>

<style>
.frame { display:inline-block; position:relative; --b:4px; }
.frame::before {
  content:"";
  position:absolute;
  top: calc(-1 * var(--b));
  left: calc(-1 * var(--b));
  right: calc(-1 * var(--b));
  bottom: calc(-1 * var(--b));
  border: var(--b) solid #000;
  box-sizing: content-box;
  pointer-events: none;
}
</style>

<script>
function scaleBorder(factor){
  const f = document.querySelector('.frame');
  const cur = parseFloat(getComputedStyle(f).getPropertyValue('--b')) || 4;
  f.style.setProperty('--b', (cur * factor) + 'px');
}
</script>

Notes and troubleshooting

  • The pseudo-element places the border outside the image so the image width/height attributes never change.
  • pointer-events: none prevents the border from intercepting clicks.
  • CSS custom properties (--b) are widely supported in modern browsers; if older-browser support is required, apply the border to the wrapper element itself and change wrapper.style.borderWidth (fallback approach).
  • If reading a computed value is needed, use getComputedStyle(...) as shown; that avoids the inline-style vs computed-style gotcha that can confuse vanilla JS (which is why some people preferred jQuery).

Recommended Answers

All 3 Replies

Member Avatar for code739

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="" 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.