Why isn't my random image not postitioning ?

[JamieGreen]

Hi everybody,

I have a javascript that displays a random image whenever the page gets loaded but I can't seem to get the image on the right position...

I've got

var gallery = new Array();
gallery[0] = new Array(new Array ("Image_01.jpg", "#01"), new Array ("Image_02.jpg", "#02"));



function pickImageFrom(whichGallery)
{
var idx = Math.floor(Math.random() * gallery[whichGallery].length);

document.write('<IMG STYLE="position:absolute; TOP:105px; LEFT:52px; WIDTH:249px; HEIGHT:150px"><a href="' + gallery[whichGallery][idx][1] + '"><img src="./Images/' + gallery[whichGallery][idx][0] + '"></a>');
}

and my h tml file,

<script language="javascript">pickImageFrom(0);</script>

The image appears in the top left corner of the page and a box with the same size as the image on the correct position, (it's just 4 lines, one pixel wide that draws the shape)

Is the positioning maybe possible with CSS ?

Thanks in advance

[paul_wilkins]

Yes, the positioning issue is a css-related one. The good people in the css forum will be able to easily resolve that one for you.

[JamieGreen]

Thanks for giving me a start but I already know how to position images in CSS, I don't know anything about Javascript.
So can you please give me one more hint ?

I think my CSS would be,

#pickImageFrom(0){
		position: absolute;
		left: 105;
		top: 52px;
		display:block;
		width: 150px;
		height: 249px;
		background: url("../Images/Image_01.jpg") 0 0 no-repeat;
		}

and then my h tml (strange I can't type "h tml" in 4 letters without a space?)

<div class="pickImageFrom(0)"></div>

But this won't work, do I need to ask a solution in the CSS forum?

Thanks

[paul_wilkins]

That's not a class name, the # shows that it's an identifer instead.

Identifiers also aren't allowed to use parenthesis in their name.
http://www.w3.org/TR/html401/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

If the pickImageFrom section will not possibly be used more than one one the page, keep it as an identifier. Otherwise if it's possible for multiple sections to be called pickImageFrom, use a class instead.

The people in the css forum will be able to expand in much greater depth on the correct application of class names versus identifiers.

[JamieGreen]

Hmm, don't know what you mean actually, I've got 4 javascripts, each the same only with another number, but I use them like this

<script language="javascript">pickImageFrom(0);</script>
<script language="javascript">pickImageFrom(1);</script>
<script language="javascript">pickImageFrom(2);</script>
<script language="javascript">pickImageFrom(3);</script>

But then they don't position..

so I need to go with

.pickImageFrom(0){
		position: absolute;
		left: 105;
		top: 52px;
		display:block;
		width: 150px;
		height: 150px;
		background: url("../Images/Image_01.jpg") 0 0 no-repeat;
		}

but 4 times each with 0 - 3 in the pickImageFrom

and

<div class="pickImageFrom(0)">
<a href="./mySite.h tml"></a>
</div>

As you said I need to go with a class instead of an identifier. Can't get it working though (very new to html) but now I know that it has to be positioned with CSS, I'll search for some info in the CSS forum.

Thanks

[paul_wilkins]

That's a good idea. They'll be able to more effectively teach you about proper use of class names.