Im creating a simple chrome extension which has two tick boxes, when clicked they should show the hyperlinked image. The html file works by itself but when I add it to the extension the images dont show. Anyone know whats wrong?
<!DOCTYPE html>
<html>
<head>
<script>
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}
</script>
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 13px;
}
.popupContainerDiv{
width:350px;
min-height: 150px;
}
</style>
</head>
<body>
<label for="chkyt">YouTube</label>
<input type="checkbox" id="chkyt" onChange="toggleVisibility('imgyt');" /><br/>
<label for="chkfb">Facebook</label>
<input type="checkbox" id="chkfb" onChange="toggleVisibility('imgfb');" />
<hr />
<a href="http://www.youtube.com" target="_blank"><img id="imgyt" src="ytlogo.png" alt="YouTube" height="100" width="150" style="visibility:hidden"></a>
<a href="http://www.facebook.com" target="_blank"><img id="imgfb" src="fblogo.png" alt="Facebook" height="100" width="100" style="visibility:hidden"></a>
</body>
</html>