• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 236
  • Last Modified:

images load in IE but not FF or Safari

Can anyone tell me why my images images load in IE but not in FF or Safari?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<base href="https://www.testtest.com">
<head>
<style>
td.rb img {
  height: 90px;
  width: 92px;

}

td.rb input {
  position: absolute;
  left: -9999px;
}
</style>    
<script>
var radImg = []
radImg["full"] = {unchecked: '/main_page_ver2_09.jpg', checked: '/main_page_ver2_09_checked.jpg'};
radImg["split"] = {unchecked: '/main_page_ver2_11.jpg', checked: '/main_page_ver2_11_checked.jpg'};
function checkRadios(){
  var theForm = this.form;
  var rGroup = theForm[this.name];
  for(var i=0;i<rGroup.length;i++){
    var theImg = rGroup[i].parentNode.childNodes[1];
    theImg.src = radImg[rGroup[i].value].unchecked;
    if(rGroup[i].checked){
      theImg.src = radImg[rGroup[i].value].checked;
    }
  }
}
window.onload = function(){
  var img = document.images;
  for(var i=0;i<img.length;i++){
    if(img[i].parentNode.className=="rb"){
      img[i].parentNode.childNodes[0].onclick = checkRadios;
      img[i].onclick = function(){
        this.parentNode.childNodes[0].click();
      }
    }
  }
  document.forms[0].payment[0].onclick();
}
</script>
</head>
<body>
<form>
<table>
<tr>
      <td rowspan="5" class="rb">
                  <input type="radio" name="payment" id="full" value="full" checked ><img></td>
            <td rowspan="5" class="rb">
                  <input type="radio" name="payment" id="split" value="split" ><img></td>
</tr>
</table>
</form>
</body>
0
domoaarongato
Asked:
domoaarongato
  • 3
2 Solutions
 
BraveBrainCommented:
There were a few things FF didn't like. Here's something it does like:

function checkRadios(){
  var theForm = document.forms[0]; // direct reference
  var rGroup = theForm.elements['payment']; // direct reference
  for(var i=0;i<rGroup.length;i++){
    var theImg = rGroup[i].nextSibling; // FF seemed to like siblings better than parentNode.childNodes
    theImg.src = (rGroup[i].checked) ? radImg[rGroup[i].value].checked : radImg[rGroup[i].value].unchecked; // slightly simplified
  }
}
window.onload = function(){
  var img = document.images;
  for(var i=0;i<img.length;i++){
    if(img[i].parentNode.className=="rb"){
// removed the onclick for the radio button as it's not liked by FF and also not needed
      img[i].onclick = function(){
        this.previousSibling.click(); // FF liked siblings better than parents and their children here as well
        checkRadios(); // moved this in here instead of in an own onclick event for the radio btns.
      }
    }
  }
  checkRadios(); // your onclick() was a major problem. This does the same as the onclick's purpose.
}

0
 
gops1Commented:
FireFox does not support these in your code:

1. document.forms[0].payment[0].onclick();
it should be either:

document.forms[0].payment[0].onclick=function(){
define actions
}

or
document.forms[0].payment[0].onclick=actionhandler

2. Except IE no other browser supports ".click()"-->  this.parentNode.childNodes[0].click();
0
 
BraveBrainCommented:
> 2. Except IE no other browser supports ".click()"-->  this.parentNode.childNodes[0].click();

Thsi worked fine in FF though:
this.previousSibling.click();
0
 
domoaarongatoAuthor Commented:
Thats it! b-e-a-u-t-y!
0
 
BraveBrainCommented:
Glad you liked it. Thanks for grade and points :o)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now