1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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