add/remove border from image when checkbox checked

Discussion in 'JavaScript' started by Shimurai, Aug 5, 2011.

0
  1. #1
    Hi guys,

    I'm trying to add / remove the border of an image when I check/uncheck a checkbox.

    here's my code:
    
<html>
<body>

<script language="JavaScript" type="text/javascript">
    function chnageborder(imageid) 
    {
        document.getElementById(imageid).style.border = "solid 4px #000077";
    }
</script>

<img id="Image1" src="myimage.png"><br/>
<input type="checkbox" name="mycheckbox" onclick="chnageborder('Image1');"> 

</body>
</html>
    Code (markup):
    With that code when i check the checkbox the border is added, but it will not remove the border when I uncheck it, and that's exactly what I'm trying to do.

    Any help with this would be greatly appreciated !

    Thanks.
     
    Shimurai, Aug 5, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this
    
<html>
<body>

<script language="JavaScript" type="text/javascript">
    function chnageborder(imageid) 
    {
	var img = document.getElementById(imageid);
	if (img.style.border == '') img.style.border = "solid 4px #000077";
	else img.style.border = '';
    }
</script>

<img id="Image1" src="myimage.png"><br/>
<input type="checkbox" name="mycheckbox" onclick="chnageborder('Image1');"> 

</body>
</html>
    Code (markup):
     
    Cash Nebula, Aug 6, 2011 IP
  3. JohnnySchultz

    JohnnySchultz Peon

    Messages:
    277
    Likes Received:
    4
    Best Answers:
    7
    Trophy Points:
    0
    #3
    you can try this one..

    
<script type="text/javascript" >
function changeborder(chk, imageid)
{  
   document.getElementById(imageid).style.border = (chk.checked)?"solid 4px #000077":"none";
} 
</script>
<img id="Image1" src="myimage.png"><br/>
<input type="checkbox" name="mycheckbox" onclick="changeborder(this,'Image1');">
    HTML:
     
     
    JohnnySchultz, Aug 8, 2011 IP
  4. Shimurai

    Shimurai Well-Known Member

    Messages:
    186
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    110
    #4
    thanks ! both are working perfectly as I needed.

    now, my issue is that the border makes the image to be larger, and it will move the checkbox down and up when i add it and remove it so I was wondering if there's any way to add an inner border with javascript ?

    thanks ;)
     
    Last edited: Aug 12, 2011
    Shimurai, Aug 12, 2011 IP
  5. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Give the image a transparent border, then you only need to change the color.
    
<html>
<head>
<style type="text/css">
	#Image1 { border: solid 4px transparent; }
</style>
<script language="JavaScript" type="text/javascript">
function changeborder(imageid) {
	var img = document.getElementById(imageid);
	if (img.style.borderColor == '') img.style.borderColor = "#000077";
	else img.style.borderColor = '';
}
</script>
</head>
<body>
<img id="Image1" src="myimage.png"><br/>
<input type="checkbox" name="mycheckbox" onclick="changeborder('Image1');"> 
</body>
</html>
    Code (markup):
     
    Cash Nebula, Aug 12, 2011 IP