PDA

Click to See Complete Forum and Search --> : Random Picture sizes

elohel
04-21-2003, 05:16 PM
I'm putting the Random Image (http://javascript.internet.com/miscellaneous/random-image.html) code on my website, and I want to make the pictures smaller. Height='###' and width='###' (with numbers as the #s :P) mess it up completely when I put them before or after the image URLs. Where in the code can I specify the different sizes (and alt tags if I use them), or do I need to find images that are already the size I want?
khalidali63
04-21-2003, 05:21 PM
There could be multioe ways to get this done.
1.once you re-set the image src,then set the width and height properties,

2.if u are creating imnage objects then you should be able to re-set size by using
imgObject=width="size"
imgObject.width="size";

etc...
to find a specific answer you will need to post your code where all this happens so that one can determine correct course of action for you.
Jona
04-21-2003, 05:35 PM
I made this code in a flash and I don't know if it gives errors or not but here you go (sorry I'm so busy).

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
// Set up the image files to be used.
var theImages = new Array() // do not change this
// Set up the sizes of the corresponding images
var theWidth = new Array() // do not change this
var theHeight = new Array()
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = '1.gif'
theImages[1] = '2.gif'
theImages[2] = '3.gif'
theImages[3] = '4.gif'

theWidth[0] = '120' // width of first image in pixels
theWidth[1] = '70'
theWidth[2] = '90'
theWidth[3] = '200'

theHeight[0] = '120' // height of first image in pixels
theHeight[1] = '70' // these will all be square because the width and height are the same
theHeight[2] = '90'
theHeight[3] = '200'

// do not edit anything below this line

var w, h;
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
w = theWidth[i];
h = theHeight[i];
}
var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
document.write('<img src="'+theImages[whichImage]+'" width='w' height='h' name="test">');
}
</script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
showImage();
alert(document.images['test'].height);
alert(document.images['test'].width);
alert(document.images['test'].src);
</script>
DrDaMour
04-21-2003, 06:02 PM
say you have <img id="dog" src="URL">

and i figure you know what
<script>
dog.src = "newURL"
</script>

does

well
dog.alt ="alternate text"
dog.height="image height"
dog.width="immage width"

...
dog.onclick=onclickeven

the process goes on forever & for all objects.

think of it this way, when you have an html tag, it's creating an object and all the parameters you set, are it's members, javascript lets you dynamically change those members. it's just the ID.membername = newvalue
or you can do
oldvalue = ID.membername
Jona
04-21-2003, 06:04 PM
This is similar to object-oriented programming; except for the fact that you are not creating your own objects. Instead, you're simply getting the properties of already-existing objects.
DrDaMour
04-21-2003, 06:08 PM
your html creates the objects, and wouldn't you know browsers use O-O ideas!?!?
Jona
04-21-2003, 06:17 PM
:confused: Don't get what you said, but okay...
Jona
04-21-2003, 06:27 PM
I've tested this script and it works:

<html><HEAD>
<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
var theWidth = new Array()
var theHeight = new Array()
theImages[0] = '1.gif'
theImages[1] = '2.gif'
theImages[2] = '3.gif'
theImages[3] = '4.gif'

theWidth[0] = '120'
theWidth[1] = '70'
theWidth[2] = '90'
theWidth[3] = '200'

theHeight[0] = '120'
theHeight[1] = '70'
theHeight[2] = '90'
theHeight[3] = '200'
var w, h;
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
w = theWidth[whichImage];
h = theHeight[whichImage];
function showImage(){
document.write('<img src="'+theImages[whichImage]+'" width='+w+' height='+h+' name="test">');
}
</script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
showImage();
alert(document.images['test'].height);
alert(document.images['test'].width);
alert(document.images['test'].src);
</script>