I need a alt-title-target array for my Script

[4evrblu]

I am a novice when it comes to Javascript, but I am fairly proud of the one I have working at Total Physique Online

In the Sponsor section, I have one banner in particular that updates each day automatically. It's pretty cool.

However, due to the fact that the code is a customized code of a tutorial I saw online, I cannot take full credit for it, and the fact that I am creating this thread is largely due to the fact that I lack a fundamental understanding of how to create arrays from scratch without breaking the code I so painstakingly got to work (I know the code may look simple to most jscript masters, but for a guy like me this was like creating a masterpiece! heheh I know....sad eh?)

Here is the code:

today = new Date();
day = today.getDay();
arday = new Array("http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/sunday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/monday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/tuesday.gif",
"http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/wednesday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/thursday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/friday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/saturday.gif");

arURL = new Array("http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=4421", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=1012", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=4999",
"http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6132", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6127", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=1026", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6191");

document.write("<a href='" + arURL[day] + "'><img src='" + arday[day] + "' border='0'><\/a>");

What I want is for each image to have a specific title and alt tag, and for each link to have a target that is _blank - so that when you mouse over the image you get a title that appears that says order such n such today, and when you click the image it launches a new window.

Can someone take the above code, copy it, add the required elements and post it in this thread?

I want to thank you in advance.

Many blessings.

[paul_wilkins]

Let's compartmentalize the code so that it's easier to make changes to it, without breaking how it works.

function dayImage(day) {
	var dayOfWeek = [
		'sunday',
		'monday',
		'tuesday',
		'wednesday',
		'thursday',
		'friday',
		'saturday'
	];
	return 'http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/' + dayOfWeek[day] + '.gif';
}
function url(day) {
	urlCode = [
		'4421',
		'1012', 
		'4999',
		'6132',
		'6127',
		'1026',
		'6191'
	];
	return 'http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=' + urlCode[day];
}
var today = new Date();
var day = today.getDay();
var image = '<img src="' + dayImage(day) + '" border="0">';
var link = '<a href="' + url(day) + '">' + image + '<\/a>'
document.write(link);

Does that make it easier for you to see where the changes you need to make, should occur?

[tripy]

I personally found OOP more readable, so:

  //we create an object to hold the banner infos
  banner=function(url, img, alt, trg){
    this.url=url
    this.alt=alt
    this.img=img
    this.target=trg
  }
 
  //we create the banners
  ban1=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 1','_top')
  ban2=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 2','_top')
  ban3=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 3','_top')
  ban4=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 4','_top')
  ban5=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 5','_top')
  ban6=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 6','_top')
  ban7=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 7','_top')
 
  //and associate them to the array
  ary=new Array(ban1, ban2, ban3, ban4, ban5, ban6, ban7)
 
  //we get the day of week number
  day = new Date().getDay();
 
  //and we output the html code
  lnk="<a href='"+ary[day].url+"' alt='"+ary[day].alt+"' title='"+ary[day].alt+"' target='"+ary[day].trg+"'><img src='"+ary[day].img+"' border='0'/></a>"
  document.write(lnk)

would be my go.

[paul_wilkins]

Here's a second pass at that code, which may be easier to update and maintain over time:

var imageSource = 'http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/';
var sponsorPrefix = 'http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=';
var sponsor = [
	{image: 'sunday.gif', code: '4421', title: 'Order ... today'},
	{image: 'monday.gif', code: '1012', title: 'Order ... today'},
	{image: 'tuesday.gif', code: '4999', title: 'Order ... today'},
	{image: 'wednesday.gif', code: '6132', title: 'Order ... today'},
	{image: 'thursday.gif', code: '6127', title: 'Order ... today'},
	{image: 'friday.gif', code: '1026', title: 'Order ... today'},
	{image: 'saturday.gif', code: '6191', title: 'Order ... today'}
];
var today = new Date();
var day = today.getDay();
var image = '<img src="' + imageSource + sponsor[day].image + '" border="0">';
var title = 'title="' + sponsor[day].title + '"';
var href = 'href="' + sponsorPrefix + sponsor[day].code + '"';
var link = '<a ' + href + ' ' + title + ' target="_top">' + image + '<\/a>';
document.write(link);

Edit:

@tripy: Ahh, it seems we have both arrived at similar inspirations

[4evrblu]

I personally found OOP more readable, so:

  //we create an object to hold the banner infos
  banner=function(url, img, alt, trg){
    this.url=url
    this.alt=alt
    this.img=img
    this.target=trg
  }
 
  //we create the banners
  ban1=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 1','_top')
  ban2=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 2','_top')
  ban3=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 3','_top')
  ban4=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 4','_top')
  ban5=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 5','_top')
  ban6=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 6','_top')
  ban7=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 7','_top')
 
  //and associate them to the array
  ary=new Array(ban1, ban2, ban3, ban4, ban5, ban6, ban7)
 
  //we get the day of week number
  day = new Date().getDay();
 
  //and we output the html code
  lnk="<a href='"+ary[day].url+"' alt='"+ary[day].alt+"' title='"+ary[day].alt+"' target='"+ary[day].trg+"'><img src='"+ary[day].img+"' border='0'/></a>"
  document.write(lnk)

would be my go.

Tripy, I took your suggestion and customized the code thusly:

//we create an object to hold the banner infos
  banner=function(url, img, alt, trg){
    Order.url=url
    Order.alt=alt
    Order.img=img
    Order.target=trg
  }
  
  //we create the banners
  ban1=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=4421','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/sunday.gif','Order Vitamin C Today','_blank')
  ban2=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=1012','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/monday.gif','Order CO Q-10 Today','_blank')
  ban3=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=4999','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/tuesday.gif','Order OmeGold Today','_blank')
  ban4=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6132','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/wednesday.gif','Order Daily Biobasics Today','_blank')
  ban5=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6127','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/thursday.gif','Order MSM Plus Today','_blank')
  ban6=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=1026','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/friday.gif','Order Real NRG Today','_blank')
  ban7=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6191','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/saturday.gif','Order Proanthenols Today','_blank')
  
  //and associate them to the array
  ary=new Array(ban1, ban2, ban3, ban4, ban5, ban6, ban7)
  
  //we get the day of week number
  day = new Date().getDay();
  
  //and we output the html code
  lnk="<a href='"+ary[day].url+"' alt='"+ary[day].alt+"' title='"+ary[day].alt+"' target='"+ary[day].trg+"'><img src='"+ary[day].img+"' border='0'/></a>"
  document.write(lnk)

It broke the images so that no image or link appears in the banner section. Did I implement this improperly?

I am calling the script with this line of code:

<li><script language="javascript" type="text/javascript" src="/wordpress/wp-content/themes/redux2/js/spotlight.js"></script></li>

which was more or less working with my original script.

[4evrblu]

Here's a second pass at that code, which may be easier to update and maintain over time:

var imageSource = 'http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/';
var sponsorPrefix = 'http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=';
var sponsor = [
	{image: 'sunday.gif', code: '4421', title: 'Order ... today'},
	{image: 'monday.gif', code: '1012', title: 'Order ... today'},
	{image: 'tuesday.gif', code: '4999', title: 'Order ... today'},
	{image: 'wednesday.gif', code: '6132', title: 'Order ... today'},
	{image: 'thursday.gif', code: '6127', title: 'Order ... today'},
	{image: 'friday.gif', code: '1026', title: 'Order ... today'},
	{image: 'saturday.gif', code: '6191', title: 'Order ... today'}
];
var today = new Date();
var day = today.getDay();
var image = '<img src="' + gifSource + sponsor[day].image + '" border="0">';
var title = 'title="' + sponsor[day].title + '"';
var href = 'href="' + sponsorPrefix + sponsor[day].code + '"';
var link = '<a ' + href + ' ' + title + ' target="_top">' + image + '<\/a>';
document.write(link);

Edit:

@tripy: Ahh, it seems we have both arrived at similar inspirations

PMR, like Tripy's suggestion, yours 0 though quite appealing - broke the images as well and left the banner spot empty. Hmmm

[paul_wilkins]

My apologies, that code was written without testing it live.

Change the gifSource to imageSource and it'll work perfect.

[4evrblu]

My apologies, that code was written without testing it live.

Change the gifSource to imageSource and it'll work perfect.

~giggle~

I am always puzzled how a teeny tiny letter or space or word can break or make a code in js.

Paul, thanks. That worked. The only problem is that the target array fails.

This is how I coded it:

var imageSource = 'http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/';
var sponsorPrefix = 'http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=';
var sponsor = [
    {image: 'sunday.gif', code: '4421', title: 'Order Vitamin C Plus today!', target: '_blank'},
    {image: 'monday.gif', code: '1012', title: 'Order COQ-10 today!', target: '_blank'},
    {image: 'tuesday.gif', code: '4999', title: 'Order OmeGold EPA today!', target: '_blank'},
    {image: 'wednesday.gif', code: '6132', title: 'Order Daily BioBasics today!', target: '_blank'},
    {image: 'thursday.gif', code: '6127', title: 'Order MSM Plus today!', target: '_blank'},
    {image: 'friday.gif', code: '1026', title: 'Order RealNRG today!', target: '_blank'},
    {image: 'saturday.gif', code: '6191', title: 'Order Proanthenols today!', target: '_blank'}
];
var today = new Date();
var day = today.getDay();
var image = '<img src="' + imageSource + sponsor[day].image + '" border="0">';
var title = 'title="' + sponsor[day].title + '"';
var href = 'href="' + sponsorPrefix + sponsor[day].code + '"';
var link = '<a ' + href + ' ' + title + ' target="_top">' + image + '<\/a>';
document.write(link);

It will not launch the page in a new window.

OK I see what I need to do. Paul thanks. Tripy THANKS!@!!!!!

[paul_wilkins]

It doesn't serve much purpose to place identical information in the sponsor array.

Remove the target properties from the sponsor array and adjust instead the link variable near the bottom of the script so that it says target="_blank"

[tripy]

@tripy: Ahh, it seems we have both arrived at similar inspirations

Yep, looks like it, but I stayed on a simpler path than you took.

It broke the images so that no image or link appears in the banner section. Did I implement this improperly?

Yep.
You changed

  banner=function(url, img, alt, trg){
    this.url=url
    this.alt=alt
    this.img=img
    this.target=trg
  }

to

  banner=function(url, img, alt, trg){
    Order.url=url
    Order.alt=alt
    Order.img=img
    Order.target=trg
  }

"this" is a keyword that means "in the context of this OOP object, we refer to ourself". You cannot change it like that.
Changing "Order" back to "this" corrected it.