 Modify File Name - Approach 2 |
  |
| slantt |
 Nov 27 2011, 01:17 PM
Post
#1
|
|
Newbie  Group: Members Posts: 18 Joined: 16-November 11 Member No.: 15,867  |
For those of you who responded to my topic 'Modify File Name' - thank you.
I've opted to try another approach using an array. I created a small concept test script as follows: <html> <body> <script type="text/javascript"> var d = 1; var picture = new array(4); moon[0] = "moon0.png"; moon[1] = "moon1.png"; moon[2] = "moon2.png"; moon[3] = "moon3.png"; </script> <img src="picture+[d]"/> </body> </html> I'm attempting to display moon1.png but it's not working. Is my concept wrong? Can this be done in this manner? Any advice appreciated... Jim |
  |
 
|
| pandy |
Nov 27 2011, 02:31 PM
Post
#2
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Yes, you are on the right track but you have a few things wrong.
1. JavaScript is case sensitive. It's 'new Array', not 'new array'. 2. To refer to one of the elements in an array you use the array's name and tag on the index of the element you are after within square brackets. You know that, but you used (part of) the file name instead of the name of the array. CODE picture[0] = "moon0.png"; 3. You can't put JavaScript directly in the HTML. Apart from that, the square bracket construct doesn't mean anything on its own. You can't pick it loose from the array name. So this thing here doesn't mean anything at all. HTML <img src="picture+[d]"/> To make the script work, you need to trigger it somehow. Put it in a function. Then you call the function onload. That's because JavaScript can't switch the image before that part of the page is drawn. That image object doesn't exist before the browser has created it, so you must make sure the script doesn't run prematurely. You do that by running the script first when the page has loaded, with window.onload. To be able to target this specific image, give the IMG an id. Something like so would work I think. CODE function doDa() { var d = 1; var picture = new Array(4); picture[0] = "moon0.png"; picture[1] = "moon1.png"; picture[2] = "moon2.png"; picture[3] = "moon3.png"; // changes the value of src for the img with the id 'pic' document.getElementById('pic').src = picture[d]; } // calls the function once the page is fully loaded window.onload = doDa; HTML <!-- add an id and an initial image here, so there is something until the switch takes place --> <img src="start_image.jpg" id="pic"> Does that make sense? |
|
|
|
| slantt |
Nov 27 2011, 03:02 PM
Post
#3
|
|
Newbie Group: Members Posts: 18 Joined: 16-November 11 Member No.: 15,867 |
Damn - that makes a lot of sense. Thanks for the helping hand. Not used to dealing with these kinds of concepts (ex mainframe assembler programmer)
Jim |
|
|
|
| pandy |
Nov 27 2011, 03:12 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Then you know more than me.
 |
|
|
|
| Christian J |
Nov 27 2011, 03:45 PM
Post
#5
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Nov 27 2011, 08:31 PM)  To make the script work, you need to trigger it somehow. Put it in a function. Then you call the function onload. That's because JavaScript can't switch the image before that part of the page is drawn. That image object doesn't exist before the browser has created it, so you must make sure the script doesn't run prematurely. You do that by running the script first when the page has loaded, with window.onload. You don't really need a function or an onload event as long as the script comes after the IMG element, like this: CODE <img src="dog.jpg" alt="" id="foo"> <script type="text/javascript"> document.getElementById('foo').src="cat.jpg"; </script> Some browsers (that use incremental rendering, IIRC) may also act a bit slow when you use onload. QUOTE ; changes the value of src for the img with the id 'pic' In javascript you can't use semicolons for comments, they're for statement endings. Use these instead: CODE // single line /* multiple lines */ |
|
|
|
| Christian J |
Nov 27 2011, 03:53 PM
Post
#6
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(slantt @ Nov 27 2011, 07:17 PM) moon[0] = "moon0.png"; moon[1] = "moon1.png"; moon[2] = "moon2.png"; moon[3] = "moon3.png"; What is the purpose of the array? If you use this: CODE document.getElementById('pic').src="moon"+d+".png"; you don't need an array at all. |
|
|
|
| pandy |
Nov 27 2011, 04:00 PM
Post
#7
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE You don't really need a function or an onload event as long as the script comes after the IMG element And how pretty is that? Here I'm trying to pass on some good habits... Tsss.  QUOTE In javascript you can't use semicolons for comments, they're for statement endings. I guess that wasn't very elegant either. Thanks for the lesson BTW.  I'll change it above in case someone else copies.  QUOTE you don't need an array at all Unless you want to learn how to do it or maybe plan to add some randomness... |
|
|
|
| Christian J |
Nov 28 2011, 01:34 PM
Post
#8
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Nov 27 2011, 10:00 PM) QUOTE You don't really need a function or an onload event as long as the script comes after the IMG element And how pretty is that? Here I'm trying to pass on some good habits... Tsss. I agree it's prettier to place a SCRIPT element in the HEAD section instead of say last on a web page, but I still prefer not to use onload. One reason is redrawing. This doesn't only happen in browsers with incremental rendering (Opera?), redrawing also appears to show up when the onload event waits for images to load. This becomes especially ugly if you use JS to hide say menu items, and they stay open until all images on the page have loaded. Another reason is that the window.onload event can only be used once, so for multiple function calls you'll need something like this: CODE function init() { foo(); bar(); } window.onload=init; You can put multiple function calls in the BODY element's ONLOAD attribute though: CODE <body onload="foo(); bar();"> but that's hardly prettier than a SCRIPT at the bottom of the page source. Maybe the addEventListener method (or the MSIE equivalent attachEvent) can be used for multiple load events, but I've never bothered to learn it. According to http://dean.edwards.name/weblog/2005/09/busted/ this may also let you avoid page redrawings with some extra coding. I must say I prefer my own solution for its simplicity.  |
|
|
|
| pandy |
Nov 28 2011, 03:09 PM
Post
#9
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I think slantt can cross those bridges when he comes to them. He's just trying to get this idea of his to work.
|
|
|
|
| Christian J |
Nov 28 2011, 04:16 PM
Post
#10
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
I'm just trying to pass on some good habits.
|
|
|
|
| pandy |
Dec 4 2011, 06:05 PM
Post
#11
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(Christian J @ Nov 27 2011, 09:45 PM) QUOTE ; changes the value of src for the img with the id 'pic' In javascript you can't use semicolons for comments, they're for statement endings. [/code] I'm sure I'm getting senile now. It didn't realize until yesterday what I had done. I sort of assumed I had used CSS comments by mistake which happens sometimes when I jump from one language to the other. I was blind to the fact that CSS don't use semi colons either... But my text editor does. How confused can a person get? |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 20th April 2024 - 01:39 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC