/    Sign up×
Community /Pin to ProfileBookmark

inserting an image sourced from an array

This is what I want to do.

Normally I would insert an image with

<img src = “picture.jpg” height=”300″ width=”300″>

and add text from a variable with

<script language=”javascript”>document.write (‘some text’);</script>

I have a ‘list’ of names and pictures in an array of arrays like:

var people =[
[‘PHILIP ADDISON’,’PAddison2a.jpg’],
[‘DAVID ASBURY’,’DAsbury2a.jpg’],
[‘J ASHTON’,’oldbadge.jpg’],
[‘MICHAEL AZURDIA’,’MAzurdia.jpg’],
[‘IAN BAKEWELL’,’IBakewell2b.jpg’],
[‘BERNARD BARRY’,’BernardBarry2b.jpg’]

I want to insert a name and associated picture into a web page.

I can insert the name like this

<script language=”javascript”>document.write (people[8][0]);</script>

I want to insert the picture in a similar way like

<img src = “. . .people[8][1]” height=”300″ width=”300″>

But I can’t figure out how to do it.

Any hints would be appreciated.

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@haulinMar 24.2009 — [CODE]window.onload=function()
{
var i, myImg, myDiv, myText;
for (i=0; i<people.length; i++)
{
myImg=document.createElement("img");
myImg.setAttribute("src",people[i][1]);
document.getElementsByTagName("body")[0].appendChild(myImg);
myDiv=document.createElement("div");
myText=document.createTextNode(people[i][0]);
myDiv.appendChild(myText);
document.getElementsByTagName("body")[0].appendChild(myDiv);
}
}[/CODE]

you can set any attribute with the [B]setAttribute[/B] method, height, width, ...
Copy linkTweet thisAlerts:
@spiresgateauthorMar 24.2009 — Thanks for the quick response. I'll have to study it carefully to see how to use it in my application but I'm sure this is the right direction.
Copy linkTweet thisAlerts:
@haulinMar 24.2009 — yup. it's pretty straighforward though. you just create a desired element, set it's attributes and values and insert it inside another element (i used body, but any div or anything). instead of [B]appendChild()[/B] you can use [B]insertBefore()[/B] or [B]replaceNode()[/B]... ask if you have any questions ?
Copy linkTweet thisAlerts:
@spiresgateauthorMar 24.2009 — Got it!

Sorry I was a bit flummoxed at first. My need was only for inserting a fixed people[8][1] but the contents of this would vary. So your reply seemed over-complex at first. But you have successfully introduced me to a whole new aspect which I have introduced as well.
×

Success!

Help @spiresgate spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...