changeimage() also changes image position

[lawrence.mcdonell]

Hi All ,

I have a problem with a handler that changes a backgroundImage
property of the page header div ("mast") but it also changes the
position of image, down about 10px and to the left also. I need help
real bad on this because I've spent far too many hours just getting
this far by hacking and flailing - please help...

problem at:
http://www.tooobvious.info/tooobvious/lawrencecv/picturesbu.html

Clicking lets you change the page header pic, cycling through an array
of 9 pics.

I have a Div called "mast" with a backgroundImage (set in an external
style sheet). The Div "mast" is nested in another Div "container". I
have an onclick handler in a table cell which calls the changeImage()
handler. The changeImage handler has the array of pics and changes the
image OK. Please help with any suggestions.

1.
<td colspan="19" bgcolor="#D3D3D3"><a onClick="changeImage()" >change
banner image</a> </td>

2.
#container {
width: 780px;
margin: 30px auto 0 auto;
padding: 0;
background:transparent url(../img/bg.jpg) repeat-y;
}

#mast {
height: 200px;
background:transparent url(../img/mast1.jpg) no-repeat;
margin: 0 ;
}


3.
<!-- <script language="JavaScript" src="assets/changeImageOnClick.js"
type="text/JavaScript"></script>
-->

<script type="text/javascript">

currentIndx=0;
MyImages=new Array();


MyImages[0]='./img/mast2.jpg';
MyImages[1]='./img/mast3.jpg';

MyImages[2]='./img/mast4.jpg';
MyImages[3]='./img/mast5.jpg';
MyImages[4]='./img/mast6.jpg';
MyImages[5]='./img/mast7.jpg';
MyImages[6]='./img/mast8.jpg';
MyImages[7]='./img/mast9.jpg';
MyImages[8]='./img/mast10.jpg';


/* ####################### now we preload the images
####################### */
imagesPreloaded = new Array(9)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded = new Image(178,120)
imagesPreloaded.src=MyImages;
}
for (var i = 0; i < imagesPreloaded.length ; i++)
{
x=imagesPreloaded.src;
}

/* ####################### we create the functions to go forward and
go back ####################### */

function changeImage() {

if (currentIndx<imagesPreloaded.length-1){
currentIndx=currentIndx+1
}
else {
currentIndx=0
}
theimage=(MyImages[currentIndx]);
document.getElementById('mast').style.background="url"+"('"+theimage
+"') no repeat top center";
}


</script>

 

[pr]

I have a problem with a handler that changes a backgroundImage
property of the page header div ("mast") but it also changes the
position of image, down about 10px and to the left also. I need help
real bad on this because I've spent far too many hours just getting
this far by hacking and flailing - please help...

problem at:
http://www.tooobvious.info/tooobvious/lawrencecv/picturesbu.html

[...]

Maybe you've changed that test page since you posted, but it doesn't
work at all for me; or perhaps just not in Firefox; giving the error:

"Warning: Expected colour but found 'no'. Expected end of value for
property but found 'no'. Error in parsing value for property
'background'. Declaration dropped."

- which suggests Firefox doesn't like your all-in-one 'style.background'
declaration and might prefer its CSS properties separately
(backgroundImage, for example).

If you validate your markup at <URL: http://validator.w3.org/> and
continue to see problems, post again with a URL whose content is
unlikely to change imminently.

 

[Thomas 'PointedEars' Lahn]

I have a problem with a handler that changes a backgroundImage
property of the page header div ("mast") but it also changes the
position of image, down about 10px and to the left also. I need help
real bad on this because I've spent far too many hours just getting
this far by hacking and flailing - please help...

problem at:
http://www.tooobvious.info/tooobvious/lawrencecv/picturesbu.html

[...]

Maybe you've changed that test page since you posted, but it doesn't
work at all for me; or perhaps just not in Firefox; giving the error:

"Warning: Expected colour but found 'no'. Expected end of value for
property but found 'no'. Error in parsing value for property
'background'. Declaration dropped."

- which suggests Firefox doesn't like your all-in-one 'style.background'
declaration and might prefer its CSS properties separately
(backgroundImage, for example).

You are mistaken, FF supports the `background' property well. Provided your
FF build is not buggy, the reason for the error message would be most
obvious: `no' simply is no valid (sub-)value.

However, it could be the OP modified the document or stylesheet in the
meantime again because I do not get the same *warning* (not error) that you
got, but I get

| Warning: Expected end of value for property but found '>'. Error in
| parsing value for property 'background-color'. Declaration dropped.
| Source File:
| http://www.tooobvious.info/tooobvious/lawrencecv/picturesbu.html
| Line: 172

Since there are other warnings as well,

If you validate your markup at <URL: http://validator.w3.org/> and
continue to see problems, post again with a URL whose content is
unlikely to change imminently.

the OP would be well-advised not only to validate his markup but also his
CSS: http://jigsaw.w3.org/css-validator/

Also, several script identifiers are used as variables but are not declared
as such.

var foo = "bar";


PointedEars