We help IT Professionals succeed at work.

getElementById.src extremely weird behavior

x2kneo
x2kneo asked
on
2,819 Views
Last Modified: 2009-07-29
Here is the setup of my page...
thumbnails.html is contained by the top iframe of displayPhoto.
The lower iframe is occupied by the full size image. and between the 2 iframes there is a div that contains comments.
here is the code of thumbnails.html

[CODE]
<script language='javascript'>
function modText(comm,img){
parent.document.getElementById('dyntxt').innerHTML = comm;
parent.document.getElementById('iframe_photo').src = img;
}
</script>
<table width='5424' border='0' cellpadding='0' cellspacing='0'>
<tr> <td width='5424' height='105' valign='top'>
<p>
<a href='#' onClick="modText('EVE','screenshot.jpg');return false;">
<img src="screenshot.jpg" width='134' height='100' border='0'></a>
<a href='#' onClick="modText('avatar','avatar.gif');return false;">
<img src="avatar.gif" width='134' height='100' border='0'></a>
</p></td></tr></table>
[/CODE]

displayPhoto.php
[CODE]
print('
<table width="95%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#4C6069">
     <tr>
     <td>.:. Photos minis .:.</td>
        </tr>
      <tr>
<td><iframe frameborder=0 width="100%" height=155 src="');
print $path[0].'\\thumbnails.html';
print ('" ></iframe></td>
        </tr>
      </table>

      <table width="95%" border="0" align="center" cellspacing="1" bgcolor="#4C6069">
        <tr>
          <td><div id="dyntxt">Huhu?</div></td>
</tr>
<tr>
<td height="500" valign = "top" bgcolor="#CCDFF0"> <iframe frameborder=0 height ="500 px" width="100%" src="" ID="iframe_photo"></iframe></td>
</tr>
</table>');
[/CODE]

What i can't begin to understand is that it works just fine for the first picture avatar.gif and doesn't work for the second picture screenshot.jpg (i get a 404). No matter in what order i click them screenshot never works.. and avatar always does.. I've tried with 2 gif's and still only the avatar works.... This is really weird...
The comment works just fine for all pictures but the image doesn't.
And yes both picture are in the same folder (with thumbnails.html).

If you want to see for yourself here is a direct link: http://213.213.243.62/AlbumPhoto
As you can see i tried with some pictures of the same size and with a couple of animated gif (b/c the only picture that works is an animated gif) but of course it doesn't change anything....

I hope what i say is understandable :)
If any1 had any clues it would be *greatly* appreciated..
Vince
Comment
Watch Question

I dont have any problem with the URL you have given.  I can see three images, first and last are animated.  I am using IE 6.0.  Check your Browser Version

Author

Commented:
did you try to click on the thumbnail ??
Only the leaf appears in the lower iframe...
>> And yes both picture are in teh same folder

are you sure the images are in the correct directory

if i try to go directly to the bart image http://213.213.243.62/AlbumPhoto/bart.gif it can't be found
Systems architect
CERTIFIED EXPERT
Top Expert 2006
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
if you check the path it s not http://213.213.243.62/AlbumPhoto/bart.gif but http://213.213.243.62/AlbumPhoto/photo/bart.gif
the thumbnails picture and the big one that's supposed appear in the lower iframe are the same, the thumbnail is just resized, they have the same source
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Also check this possibilty:

<html>
<head>
<script language='javascript'>
function modText(comm,img){
  parent.document.getElementById('dyntxt').innerHTML = comm;
  parent.document.getElementById('iframe_photo').src = "photo/"+img;
}
</script></head>
<body bgcolor='#ccdff0' text='#000000'>
<table width='5424' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td width='5424' height='105' valign='top'>
<p>
<img src="avatar.gif" width='134' height='100' border='0'     onClick="modText('.:. avatar.gif .:.','avatar.gif')">
<img src="bart.gif" width='134' height='100' border='0'       onClick="modText('.:. cool .:.','bart.gif')">
<img src="incd0008en.gif" width='134' height='100' border='0'  onClick="modText('.:. fuckit .:.','incd0008en.gif')"></p>
</td>
</tr>
</table>
</body>
</html>

All your images in the main url are inside http://213.213.243.62/AlbumPhoto/photo folder.  

Change your code to add photo,

[CODE]
<script language='javascript'>
function modText(comm,img){
parent.document.getElementById('dyntxt').innerHTML = comm;
parent.document.getElementById('iframe_photo').src = 'photo\' + img;
}
</script>
<table width='5424' border='0' cellpadding='0' cellspacing='0'>
<tr> <td width='5424' height='105' valign='top'>
<p>
<a href='#' onClick="modText('EVE','screenshot.jpg');return false;">
<img src="screenshot.jpg" width='134' height='100' border='0'></a>
<a href='#' onClick="modText('avatar','avatar.gif');return false;">
<img src="avatar.gif" width='134' height='100' border='0'></a>
</p></td></tr></table>
[/CODE]

Author

Commented:
thx a lot
we're so stupid.
this wasn't worth 400 point. but i had a real FAST answer

thx again.....
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
You are welcome.

Ps: it was worth 404 points :)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.