Javascript Coding with Array

shayp · 12-12-2011, 08: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 More text 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, 09:22 PM

With a bit more code you could...

Code:

<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, 09:27 PM

By "active link" I assume you mean an <a> link?

Yes.

Code:

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, 09:58 PM

jmrker:

blurb[4]="Text 5 More text 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-12-2011, 11:37 PM

Quote:

Originally Posted by shayp

jmrker:

blurb[4]="Text 5 More text 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!