Changing Image works in FX, not IE?

[Jessica]

Page: http://www.doublooncove.com/signup.php

Problem: In Firefox, the changes work fine. In IE, the images just
disappear, and there is a broken image. The images are THERE. Some are
blank images (like placeholders, since the male character is shirtless,
his shirt is blank). But they do exist.

Here is a sample of the code, there are several of these functions but
they're all the same just different parts.

CODE
function change_gender(){
if(!document.images){
return
}else{

document.images.bodygender.src="http://www.doublooncove.com/images/pirates/"
+
document.signup.gender.options[document.signup.gender.selectedIndex].value
+ "/" +
document.signup.gender.options[document.signup.gender.selectedIndex].value
+ ".gif"


document.images.hairback.src="http://www.doublooncove.com/images/pirates/"
+
document.signup.gender.options[document.signup.gender.selectedIndex].value
+ "/hair/" +
document.signup.hair.options[document.signup.hair.selectedIndex].value
+ "/hair_" +
document.signup.hair.options[document.signup.hair.selectedIndex].value
+ "_" +
document.signup.hair_color.options[document.signup.hair_color.selectedIndex].value
+ "_back.gif"


document.images.hairfront.src="http://www.doublooncove.com/images/pirates/"
+
document.signup.gender.options[document.signup.gender.selectedIndex].value
+ "/hair/" +
document.signup.hair.options[document.signup.hair.selectedIndex].value
+ "/hair_" +
document.signup.hair.options[document.signup.hair.selectedIndex].value
+ "_" +
document.signup.hair_color.options[document.signup.hair_color.selectedIndex].value
+ "_front.gif"
*snip*
}
}



CODE

<td><b>Gender:</b></td>
<td>
<select size="1" name="gender" onChange="change_gender()">
<?
if($info['gender'] == 'female'){
print '<option select>female</option>';
print '<option>male</option>';
}else{
print '<option select>male</option>';
print '<option>female</option>';
}
?>
</select>
</td>


Any ideas?

 

[Janwillem Borleffs]

Problem: In Firefox, the changes work fine. In IE, the images just
disappear, and there is a broken image. The images are THERE. Some are
blank images (like placeholders, since the male character is
shirtless, his shirt is blank). But they do exist.

1. For the gender select, you don't define a value. So, instead of
referencing:

document.signup.gender.options[...].value

You should reference:

document.signup.gender.options[...].text

2. @ line 219 of rendered code: <option select>male</option>

This should be either:

<option selected>male</option>

Or (even better and complient with the specified doctype):

<option selected="selected">male</option>

3. @ line 206 of rendered code: <img src="'.$url.'hat_'.$hat.'.gif"
(unparsed PHP code)

In general, run your page through an XHTML validator, because as it is now,
it's currently not valid.


JW

 

[Stephen Chalmers]

Page: http://www.doublooncove.com/signup.php

Problem: In Firefox, the changes work fine. In IE, the images just
disappear, and there is a broken image. The images are THERE. Some are
blank images (like placeholders, since the male character is shirtless,
his shirt is blank). But they do exist.

Check your HTML. The options in the gender select box have no values
assigned. If you alert the .src you get: .......pirates//.gif

Also, lose the HTML comments inside the script tags, as they are not
required and in your case incorrect, causing Opera to complain.

There may be more errors than these.

 

[Jessica Parker]

Thank you both so much, it works perfectly now!

The html comments were there because my fiance told me it would prevent
browsers that didn't support the code from trying to read it. So this
is not needed?

Again, thanks a ton, now I can finally let my IE users pick their
character

 

[Randy Webb]

Jessica Parker said the following on 6/4/2006 8:39 PM:

Thank you both so much, it works perfectly now!

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

The html comments were there because my fiance told me it would prevent
browsers that didn't support the code from trying to read it. So this
is not needed?

No, it is not needed and in XHTML it can be disastrous.