position image with javascript code

[optjco]

I found this piece of javascript code on the net which scrolls through images, i have tried to add top & left co-ordinates to it so I could move the position of the images however it does not seem to work could someone have a quick look to see what I am doing wrong Please

This is the original code

//-3) time between switching the ad, in milliseconds -\\
var refreshTime = 5000; //- 5000 ms = 5 seconds -\\

//-4) number of ads to rotate -\\
var numAds = 3;

function makeAd() {
	this.width = ''
	this.height = ''
	this.src = ''
	this.href = ''
	this.mouseover = ''
	this.sponsor = ''
}

var ads = new Array()
for(var i = 1; i <= numAds; i++) { ads[i] = new makeAd() }

//- 5) Copy and paste the lines between the banner definition for 
//each banner you want to rotate and be sure to change numAds to 
//the number of banners (look about 15 lines up for numAds)
i = 1;


/*------------begin banner definition----------*/
ads[i].width = "200"                           //width of image
ads[i].height = "152"                           //height of image
ads[i].src = "Images/MelJoe.jpg"  			       //image url
ads[i].href = ""           	       //link url
ads[i].mouseover = ""            //text to display when mouse moves over banner
ads[i].sponsor = ""                     //text to display for text link under banner
i++
/*-------------end banner definition-----------*/

ads[i].width = "200"                           //width of image
ads[i].height = "152"                           //height of image
ads[i].src = "Images/sharon.jpg"  			
ads[i].href = ""           	 
ads[i].mouseover = ""       
ads[i].sponsor = ""                 
i++


ads[i].width = "200"                           //width of image
ads[i].height = "152"                           //height of image
ads[i].src = "Images/Grandchildren.jpg"  		
ads[i].href = ""           	 
ads[i].mouseover = ""       
ads[i].sponsor = ""                 
i++


var myCode = '';
do {
var n= Math.floor(Math.random() * (numAds + 1) + 1);
} while(n > numAds);
var current_ad = n;
myCode = getCode(n);

function getCode(adNumber){
	var tempCode = ""
	tempCode += ('<a href="'+ ads[adNumber].href +'" \n')
	tempCode += ('onMouseOver="status=\''+ ads[adNumber].mouseover +'\';return true" \n')
	tempCode += ('onMouseOut="status=\'\'"> \n')
	tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width)
	tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"')
	tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >')
	tempCode += ('</a>')
	return tempCode;
	}

function newAd(){
	current_ad++;
	if (current_ad > numAds)
		current_ad = 1;
	if (document.all){
	   write(getCode(current_ad));
	   }
}

function write(text){
	if (document.layers) {
		document.bannerAd1.document.write(text)
		document.bannerAd1.document.close();
		}
	else
		if (document.all)
			document.all.bannerAd1.innerHTML = text
	
}

and this is my amended code with the added lines in Blue

//-3) time between switching the ad, in milliseconds -\\
var refreshTime = 5000; //- 5000 ms = 5 seconds -\\

//-4) number of ads to rotate -\\
var numAds = 3;

function makeAd() {
	this.width = ''
	this.height = ''
	this.src = ''
	this.href = ''
	this.mouseover = ''
	this.sponsor = ''
    [COLOR=blue][b]this.top = ''
    this.left = ''[/b][/color]
}

var ads = new Array()
for(var i = 1; i <= numAds; i++) { ads[i] = new makeAd() }

//- 5) Copy and paste the lines between the banner definition for 
//each banner you want to rotate and be sure to change numAds to 
//the number of banners (look about 15 lines up for numAds)
i = 1;


/*------------begin banner definition----------*/
ads[i].width = "200"                           //width of image
ads[i].height = "152"                           //height of image
ads[i].src = "Images/MelJoe.jpg"  			       //image url
ads[i].href = ""           	       //link url
ads[i].mouseover = ""            //text to display when mouse moves over banner
ads[i].sponsor = ""                     //text to display for text link under banner
[COLOR=blue][b]ads[i].top = "200"             // set top of image
ads[i].left = "200"            // set left for image[/b][/color]
i++
/*-------------end banner definition-----------*/

ads[i].width = "200"                           //width of image
ads[i].height = "152"                           //height of image
ads[i].src = "Images/sharon.jpg"  			
ads[i].href = ""           	 
ads[i].mouseover = ""       
ads[i].sponsor = "" 
[COLOR=blue][b]ads[i].top = "200"             // set top of image
ads[i].left = "200"            // set left for image[/b][/color]
                
i++


ads[i].width = "200"                           //width of image
ads[i].height = "152"                           //height of image
ads[i].src = "Images/Grandchildren.jpg"  			
ads[i].href = ""           	 
ads[i].mouseover = ""       
ads[i].sponsor = ""
[COLOR=blue][b]ads[i].top = "200"             // set top of image
ads[i].left = "200"            // set left for image[/b][/color]
                
i++


var myCode = '';
do {
var n= Math.floor(Math.random() * (numAds + 1) + 1);
} while(n > numAds);
var current_ad = n;
myCode = getCode(n);

function getCode(adNumber){
	var tempCode = ""
	tempCode += ('<a href="'+ ads[adNumber].href +'" \n')
	tempCode += ('onMouseOver="status=\''+ ads[adNumber].mouseover +'\';return true" \n')
	tempCode += ('onMouseOut="status=\'\'"> \n')
	tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width)
	tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"')
	tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >')
	tempCode += ('</a>')
	return tempCode;
	}

function newAd(){
	current_ad++;
	if (current_ad > numAds)
		current_ad = 1;
	if (document.all){
	   write(getCode(current_ad));
	   }
}

function write(text){
	if (document.layers) {
		document.bannerAd1.document.write(text)
		document.bannerAd1.document.close();
		}
	else
		if (document.all)
			document.all.bannerAd1.innerHTML = text
	
}

Regards

Olly

 

[MOrac]

.top and .left are sub-elements of the .style element, and even then only work for an object which has relative or absolute positioning.

You would need to add:

    tempCode += 'style="position: absolute; top: ' + ads[adNumber].top + '; left: ' + ads[adNumber].left + '" \n';

before the line adding the onMouseOver event.

 

[optjco]

MOrac,
thanks for that it works fine apart from the fact that when the page loads initially or when the page is refreshed to image still shows in the top left hand corner until it changes to the next image and then it shows in the position i stipulate.

Any Ideas on that

Regards

Olly

 

[MOrac]

Sure ... the original html also needs the positional style element added to it - otherwise it only happens after a JS rewrite occurs.

 

[optjco]

MOrac,
I did as you suggested and put the positional style in the html however i did not realise that when the javascript ran that the settings in there would be offset by the amount that i entered.

i.e
my html position was 50px left and 20px top and my javascript settings were 200px left and 200px top therefore once the images changed then there positions were


250px left and 220px top

am I on the right track here or am i still doing something wrong ?




Regards

Olly

 

[MOrac]

That sounds more like a relative position than an absolute one - you are putting the style position as 'absolute' and on the same <a> element that is being replaced, aren't you?