469,273 Members | 1,786 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,273 developers. It's quick & easy.

help IE / Firefox problem GetElementById

4
Heej, my script is working great in IE but it's not working in Firefox, i'm sure this isn't a very big problem for the more moderated users, but i'm new with javascript;). it's a script to show photos in a DIV
script:

//extern file.js

function showphoto (set)
{
document.getElementById('photos').innerHTML = set;
}

// the link

<img style="cursor:pointer" onclick="showphoto('&lt;img src=`fotos/projecten/dissonant/IMG_7309.jpg`&gt;')" src="fotos/projecten/dissonant/IMG_7309small.jpg" width="90" height="60" border="0" />

// the DIV

<div align="center" id="photos">
</div>

//
I hope someone can help me, thanks
May 18 '07 #1
5 4765
pbmods
5,821 Expert 4TB
Heya, borger. Welcome to TSDN!

Expand|Select|Wrap|Line Numbers
  1. function showphoto (set)
  2. {
  3.     document.getElementById('photos').innerHTML = set;
  4. }
Instead, try this:

Expand|Select|Wrap|Line Numbers
  1. <img style="cursor:pointer;" onclick="showphoto('fotos/projecten/dissonant/IMG_7309.jpg')" src="..." />
  2. <div id="photos"><img style="visibility:hidden" src="" alt="" width="128" height="128" /></div>
  3.  
Expand|Select|Wrap|Line Numbers
  1. function showphoto(set) {
  2.     var thePhotos = document.getElementById('photos');
  3.     thePhotos.firstChild.src = set;
  4.     thePhotos.firstChild.style.visibility = 'visible';
  5. }
  6.  
May 18 '07 #2
borger
4
Heej,

Thanks a lot for your fast reaction and the working script!,

Code: ( html4strict )
<img style="cursor:pointer;" onclick="showphoto('fotos/projecten/dissonant/IMG_7309.jpg')" src="..." />
<div id="photos"><img style="visibility:hidden" src="" alt="" width="128" height="128" /></div>


Code: ( javascript )
function showphoto(set) {
var thePhotos = document.getElementById('photos');
thePhotos.firstChild.src = set;
thePhotos.firstChild.style.visibility = 'visible';
}

of course I want to understand this so I hope I understand it now,

1. the code I made before, is getting into the 'variable thePhotos'.
2. When it's a variable we can add some more atributes on it
3. Between the <div></div> every 'src' will be the value, wich is added by 'onclick do'
4. after the 'onclick do' visibility='hidden' is getting visiblity=visible so I can see the div.
end. so far I understand it.

question: but what means 'firstChild' what is the function of it?

(I wanna learn javascript that's why my questions of course)
sorry for the bad english, i'm from the Netherlands.

Regards,

H. Borger
May 19 '07 #3
pbmods
5,821 Expert 4TB
of course I want to understand this so I hope I understand it now,

1. the code I made before, is getting into the 'variable thePhotos'.
Correct. In JavaScript, everything is an object. So by creating a variable to store the result of "document.getElementById('thePhotos')", we're storing an HTML DIV Element Object (I'll give you a link to a real nice tutorial that explains what that means towards the bottom of the post ~_^).
2. When it's a variable we can add some more atributes on it.
Sort of correct. Actually, I just used a variable so that we wouldn't have to call document.getElementById twice. This would have worked just as well (and given how fast modern computers are, it would have executed just as fast):
Expand|Select|Wrap|Line Numbers
  1. function showphoto(set) {
  2.     document.getElementById('photos').firstChild.src = set;
  3.     document.getElementById('photos').firstChild.style.visibility = 'visible';
  4. }
3. Between the <div></div> every 'src' will be the value, wich is added by 'onclick do'
This one's up to you. What I did was create a single image whose source will be altered whenever the User clicks on any of the thumbnail images. Depending on the nature of your project, you may want to create a set number of full-size images and switch between them, or you may want to dynamically create images. The link to that article is coming; don't worry :)
4. after the 'onclick do' visibility='hidden' is getting visiblity=visible so I can see the div.
Correct. Since when the page first loads, the full-size image has no src. Rather than display a blank image (which different browsers handle differently), we keep it hidden. So naturally, once we assign it a src, we want it to be visible.
end. so far I understand it.

question: but what means 'firstChild' what is the function of it?

(I wanna learn javascript that's why my questions of course)
That is an admirable goal, borger. Welcome to DOM! Here's that link I've been telling you so many wonderful things about:
http://www.quirksmode.org/dom/intro.html

Post back if you have any questions.
May 19 '07 #4
borger
4
Heej, Thanks a Lot, I will read the 'DOM' website!

The photoalbum is finished now.

Next problem;) I made a rollover menu with a submenu in it:

1. by the rollover on the MAIN buttons you see a hover images.
2. when you rollover you see the subButtons and the hover images keep up. untill you leave the subButtons.

now the problem:
the hover images only go away when you leave the subButtons, but they don't leave when I'm not moving my mouse over the subButtons(div).

1. I used alerts for the script, for testing. but I don't get them working.
2. instead of using the alerts I wanted to do:
(by a rollover on Home2)
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('about').style.background= 'none';
  2. document.getElementById('media').style.background= 'none';
  3. document.getElementById('hosting').style.background= 'none';
  4. document.getElementById('portfolio').style.background= 'none';
  5. document.getElementById('contact').style.background= 'none';
(by a rollover on about etc)
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('home2').style.background= 'none';
  2. document.getElementById('media').style.background= 'none';
  3. document.getElementById('hosting').style.background= 'none';
  4. document.getElementById('portfolio').style.background= 'none';
  5. document.getElementById('contact').style.background= 'none';
I made the script till this:

Expand|Select|Wrap|Line Numbers
  1. function showmenu (hover, pages, padding)
  2.     {
  3.         var theMenu = document.getElementById('menu');
  4.         theMenu.innerHTML = pages;
  5.         theMenu.style.visibility= 'visible';
  6.         theMenu.style.paddingLeft= padding;
  7.         document.getElementById(hover).style.background= 'url(tmpl/button_hover.png)';
  8.  
  9. if (hover=home2){alert('home2');}
  10. if (hover=about){alert('about');}
  11.     }
  12.  
  13. function hidemenu ()
  14.     {
  15.         document.getElementById('menu').style.visibility= 'hidden';
  16. document.getElementById('home2').style.background= 'none';
  17. document.getElementById('about').style.background= 'none';
  18. document.getElementById('media').style.background= 'none';
  19. document.getElementById('hosting').style.background= 'none';
  20. document.getElementById('portfolio').style.background= 'none';
  21. document.getElementById('contact').style.background= 'none';
  22.     }    }
May 24 '07 #5
borger
4
Hej,

I hope people don't start with this problem yet, I solved the problem by using more functions(Y)

Expand|Select|Wrap|Line Numbers
  1. function activemenu (main, mainsub, info)
  2.     {
  3.         document.getElementById(mainsub).innerHTML = info;
  4.         document.getElementById(mainsub).style.visibility= 'visible';
  5.         document.getElementById(main).style.background= 'url(tmpl/button_hover.png)';
  6.     }
  7.  
  8. function activehover (main)
  9.     {
  10.         document.getElementById(main).style.background= 'url(tmpl/button_hover.png)';
  11.     }
  12.  
  13. function hidehover (main)
  14.     {
  15.         document.getElementById(main).style.background= 'none';
  16.     }
  17.  
  18. function hidemenu ()
  19.     {
  20.         document.getElementById('home2').style.visibility= 'hidden';
  21.         document.getElementById('home').style.background= 'none';
  22.         document.getElementById('about').style.background= 'none';
  23.         document.getElementById('media').style.background= 'none';
  24.         document.getElementById('hosting').style.background= 'none';
  25.         document.getElementById('portfolio').style.background= 'none';
  26.         document.getElementById('contact').style.background= 'none';
  27.     }
May 25 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Craig Keightley | last post: by
4 posts views Thread by tcole6 | last post: by
2 posts views Thread by hzgt9b | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.