hope someone can help a noob. Many thanks in advance.

I have an index page with links to hundreds of other pages holding song words. I have built each song page but it would be MUCH simpler to have one MASTER page that took a variable from the index page and found the corresponding words (which exist as png graphics.)

I have sorted Step 1 - I can pass a variable from the index page to the master page using:

<a href="javascript: window.open('MUSIC/beatles/mastertest2.html?song=ER', '_parent')">

where song=ER is the variable to display the words for Eleanor Rigby. For Step 2, I can also retrieve that information in the master page with:

var imageSrc = (qs("song")+".png");  document.write(imageSrc);

which will display the text ER.png which is the name of the image I want to display.

For Step 3 I am trying to get this same variable read into:

<input type="image" src="imageSrc;">

to display the picture. I have searched this and other forums for days now and nothing suggested works for me. I could be missing out an essential early step in the coding?

Update:

My master html file has this code to retrieve the variable:

function qs(search_for) {
    var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i=0; i<parms.length; i++) {
        var pos = parms[i].indexOf('=');
        if (pos > 0 && search_for == parms[i].substring(0,pos)) {
            return parms[i].substring(pos+1);;
        }
    }
    return "";
}

And it uses this code to disply the variable (appended with .png) just to prove to me that it is getting through:

var imageSrc = (qs("song")+".png");
document.write(imageSrc);

Then I am trying to feed the variable into a routine to display the png selected. The next script doesn't work but I am thrashing about trying anything right now:

var imageSrc = (qs("song")+".png");
document.write(imageSrc);

<input type="image" src="@imageSrc;" border="0" value="Notes" onClick="placeIt(); showIt()">
<input id="song-image" type="image">
var imageSrc = 'ER.png';
var input = document.getElementById('song-image');
input.src = imageSrc;

hope someone can help a noob. Many thanks in advance.

I have an index page with links to hundreds of other pages holding song words. I have built each song page but it would be MUCH simpler to have one MASTER page that took a variable from the index page and found the corresponding words (which exist as png graphics.)

I have sorted Step 1 - I can pass a variable from the index page to the master page using:

<a href="javascript: window.open('MUSIC/beatles/mastertest2.html?song=ER', '_parent')">

where song=ER is the variable to display the words for Eleanor Rigby. For Step 2, I can also retrieve that information in the master page with:

var imageSrc = (qs("song")+".png");  document.write(imageSrc);

which will display the text ER.png which is the name of the image I want to display.

For Step 3 I am trying to get this same variable read into:

<input type="image" src="imageSrc;">

to display the picture. I have searched this and other forums for days now and nothing suggested works for me. I could be missing out an essential early step in the coding?

Update:

My master html file has this code to retrieve the variable:

function qs(search_for) {
    var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i=0; i<parms.length; i++) {
        var pos = parms[i].indexOf('=');
        if (pos > 0 && search_for == parms[i].substring(0,pos)) {
            return parms[i].substring(pos+1);;
        }
    }
    return "";
}

And it uses this code to disply the variable (appended with .png) just to prove to me that it is getting through:

var imageSrc = (qs("song")+".png");
document.write(imageSrc);

Then I am trying to feed the variable into a routine to display the png selected. The next script doesn't work but I am thrashing about trying anything right now:

var imageSrc = (qs("song")+".png");
document.write(imageSrc);

<input type="image" src="@imageSrc;" border="0" value="Notes" onClick="placeIt(); showIt()">
<input id="song-image" type="image">
var imageSrc = 'ER.png';
var input = document.getElementById('song-image');
input.src = imageSrc;

• javascript
• variables
• image
• src

• I have updated your question with your ments. The code is easier to read in your question. You can always update your question with the small edit link below your question. Please review the changes, if everything is as you intended. – Olaf Dietsche Commented Jan 27, 2013 at 16:29

2 Answers 2

If you have already <input type="image"> in your HTML page, you must add an id and then set it's src attribute with

HTML:

<input id="song-image" type="image">

JS:

var imageSrc = 'http://www.lorempixel./200/100';
var input = document.getElementById('song-image');
input.src = imageSrc;

JSFiddle for testing.

If I understood you right, its very simple. Are you looking for this?

var input = document.createElement('input');
input.type = 'image';
input.src = imageSrc;
document.body.appendChild(input);

If you can print the variable imageSrc using document.write, then you can use it like shown above.