|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
April 28th, 2004, 05:04 AM
|
|||
|
|||
|
CSS- Loops and Vars
Hello all,
I am trying to get a picture seperated into 24 pieces to appear. I need to write the necessary javascript that will generate the complete image dynamically. To do this efficiently I need to store the source for each image in an array(s) and loop through the array(s) and produce the html to generate the complete image. If someone would be kind enough to post some sample code to put me in the right direction, or what loop to use that would be great. Kind Regards, Ben
|
|
#2
April 28th, 2004, 07:20 AM
|
||||
|
||||
|
However you've got the images laid out onscreen (I'm guessing a table or divs) make sure you give each image an id, like:
<img src="whatever" id="image1" /> then, the easiest way to do this would be to call all your images somthing like: 1.gif, 2.gif 3.gif, etc. the the js would look something like this: Code:
for (i=1; i<24; i++)
{
img = 'image' + i;
src = 'yourpath' + i + '.gif';
document.getElementById(img).src = src;
}
however, if you HAVE to use an array, it would look something like: Code:
images = array('this1', 'that1', 'anuver1', 'this1too');
for (i=1; i<24; i++)
{
img = 'image'+i;
src = 'yourpath' + images[i] + '.gif';
document.getElementById(img).src = src;
}
hope that helps
|
|
#3
April 28th, 2004, 07:28 AM
|
||||
|
||||
|
Ah, just read your post again, and noticed that you need to generate the html too.
Try this: Code:
images = array('this1', 'that1', 'anuver1', 'this1too');
c_image = "":
function write_img ()
{
for (i=1; i<24; i++)
{
src = 'yourpath' + images[i] + '.gif';
c_image += '<div id="?"><img src="' + src + '" /></div>";
}
}
//then where you want the image to appear:
<script>document.write(c_image);</script>
hope that helps
|
|
#5
April 28th, 2004, 08:37 AM
|
|||
|
|||
|
Hit another snag, I still cannot get the images to appear
 Here is the code that I have used so far: ------------------------------------------- <html> <head> <title>3755P - The Dollhouse</title> <script type="javascript" language="text/javascript"> var newArray= theImages(); var theImages[1]="1.jpg"; var theImages[2]="2.jpg"; var theImages[3]="3.jpg"; var theImages[4]="4.jpg"; function write_img () { for (i=1; i<24; i++) { src = 'yourpath' + images[i] + '.jpg'; c_image += '<div id="?"><img src="' + src + '" /></div>"; } } return; </script> </head> <body bgcolor="#FFFFFF" link="#FF9933" alink="#F9933" vlink="#FF9933" background=""> <!--Begin Dynamic Table--> <table width="100%" border="0" cellspacing="0" cellpadding="0" background=""> <tr> <td width="25%"><script>document.write('1.jpg');</script></td> <td width="25%"><script>document.write('2.jpg');</script></td> <td width="25%"><script>document.write('3.jpg');</script></td> <td width="25%"><script>document.write('4.jpg');</script></td> </tr> </body> </html> ------------------------------------------- This is the code that I have used, I am new to this language so I apologise if the code seems completly wrong. Any thoughts? Regards, Ben
|
|
#6
April 28th, 2004, 09:35 AM
|
|||
|
|||
|
let me guess, you see 1.jpg, 2.jpg...
Throw away the 'yourpath' stuff. That was just a part of the previous example. Have write_img() take the filename as a parameter. For example:
Code:
function write_img(f, cls) {
var html = '<img src="'+f+'" class="'+cls+'">';
document.write(html);
}
Then use JavaScript to generate your table, e.g.: Code:
<SCRIPT TYPE="text/javascript">
document.write('<table class="mytbl"><tr>');
for (var i = 0; i < theImages.length; i++) {
document.write('<td class="mytd">' + write_img(theImages[i], 'myimg') + '</td>');
}
document.write('</tr></table>');
</SCRIPT>
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS- Loops and Vars |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
