Solved

getElementById.src extremely weird behavior

Posted on 2004-04-08
9
2,780 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
0
Comment
Question by:x2kneo
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 8

Expert Comment

by:william_jwd
Comment Utility
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
0
 

Author Comment

by:x2kneo
Comment Utility
did you try to click on the thumbnail ??
Only the leaf appears in the lower iframe...
0
 
LVL 10

Expert Comment

by:Bustarooms
Comment Utility
>> 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
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 400 total points
Comment Utility
The reason why you do not get 404 for http://213.213.243.62/AlbumPhoto/avatar.gif is that that is the only one gif which is in http://213.213.243.62/AlbumPhoto/
The other two images are not there. They are in the phote subdirectory.

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:x2kneo
Comment Utility
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
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
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>

0
 
LVL 8

Expert Comment

by:william_jwd
Comment Utility
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]
0
 

Author Comment

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

thx again.....
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
You are welcome.

Ps: it was worth 404 points :)
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now