...

View Full Version : Javascript Coding with Array



shayp
12-12-2011, 09:09 PM
I have a code that I implemented on my site. I was wondering if there was a way to had an active link within the 'blurb' section? I'm not familiar with Javascript...

var blurb = new Array();
blurb[0]="Text 1"
blurb[1]="Text 2"
blurb[2]="Text 3"
blurb[3]="Text 4"
blurb[4]="Text 5<br>More text<br>Add a link"
blurb[5]="www.link.com"

for (i=0; i < aryImages.length; i++) {
var preload = new Image();
preload.src = aryImages[i];
}

function swap(imgIndex) {
document['imgMain'].src = aryImages[imgIndex];
TheText = blurb[imgIndex];
document.getElementById('blurbarea').innerHTML=TheText;
}

Any help would be great!!

jmrker
12-12-2011, 10:22 PM
With a bit more code you could...


<html>
<head>
<title>Test</title>

<script type="text/javascript">
//<![CDATA[
var blurb = new Array();
blurb[0]="Text 1"
blurb[1]="Text 2"
blurb[2]="Text 3"
blurb[3]="Text 4"
blurb[4]="Text 5<br>More text<br>Add a link to"
+" <a href='http://www.webdeveloper.com'>Webdeveloper.com</a>"
blurb[5]="<a href='http://www.codingforums.com'>www.codingforums.com</a>"

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var aryImages = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg','21.jpg'];

for (i=0; i < aryImages.length; i++) {
var preload = new Image();
preload.src = aryImages[i];
}

function swap(imgIndex) {
document['imgMain'].src = baseURL+aryImages[imgIndex];
TheText = blurb[imgIndex];
document.getElementById('blurbarea').innerHTML=TheText;
}
//]]>
</script>
</head>
<body>
<button onclick="swap(0)">Swap 0</button>
<button onclick="swap(1)">Swap 1</button>
<button onclick="swap(2)">Swap 2</button>
<button onclick="swap(3)">Swap 3</button>
<button onclick="swap(4)">Swap 4</button>
<button onclick="swap(5)">Swap 5</button>

<br><img id="imgMain" src="" alt="Main image"><br>
<div id="blurbarea"></div>
</body>
</html>

Old Pedant
12-12-2011, 10:27 PM
By "active link" I assume you mean an <a> link?

Yes.



var allinfo = [
["image0.jpg", "blurb 0", "www.site0.com"],
["image1.jpg", "blurb 1", "www.site1.com"],
["image2.jpg", "blurb 2", "www.site2.com"]
];

var preload = [];
for ( var i = 0; i < allinfo.length; ++i )
{
var pic = new Image();
pic.src = allinfo[i][0];
preload.push(pic);
}

function swap(ix)
{
info = allinfo[ix];
document.getElementById("imgMain").src = info[0];
document.getElementById("linkMain").innerHTML = info[1];
document.getElementById("linkMain").href = info[1];
}
...
<img id="imgMain" ... />
<a id="linkMain" href="url goes here">blurb goes here</a>


Like that?

shayp
12-12-2011, 10:58 PM
jmrker:

blurb[4]="Text 5<br>More text<br>Add a link to"
+" <a href='http://www.webdeveloper.com'>Webdeveloper.com</a>"
blurb[5]="<a href='http://www.codingforums.com'>www.codingforums.com</a>"

this was perfect. Thank you!

jmrker
12-13-2011, 12:37 AM
jmrker:

blurb[4]="Text 5<br>More text<br>Add a link to"
+" <a href='http://www.webdeveloper.com'>Webdeveloper.com</a>"
blurb[5]="<a href='http://www.codingforums.com'>www.codingforums.com</a>"

this was perfect. Thank you!

You're most welcome.
Happy to help.

I tried to keep your original code as much as possible.
Note, my own design would be closer to 'Old Pedant's solution.
Reason...If you wanted to randomize display, it is much easier to co-ordinate
one array with the information, rather than keeping track of multiple arrays.
Can it be done...yes, but is it worth it to use multiple arrays, probably not.

Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum