add text to image in new window

[Tonz]

Hard to explain in a short "Subject" line.

Any way, this is the question.

I was given a script that allows an image to be opened in a "standard" page (I call the page "viewer.html"), obviously the idea is to set up a template with nice graphics etc so that when the visitor clicks the thumbnail, the image is opened in a nice looking page, not a blank looking page.

This is the script that is attached to the thumbnail...


<a href="../tech/viewer.html?../meetings/open1/mm09.jpg"><img src="../meetings/open1/mm09t.jpg" width="137" height="90" border="3" bordercolor="#3399CC" alt="" /></a>



This is the script that is in the viewer.html page


<script language="javascript">
ref = document.location.search.substr(1);
document.write('<img src="'+ref+'">');
</script>

This works great (wish I could remember who gave it to me, was it Alien51?),...anyway, what I want to do is add text to the page with the thumbnail that ONLY appears in "viewer.html" page.

Idealy I would like the image to open in a table cell, and the text in another table cell (for formating purposes only) though this is not a high priority, just having the text added is!

I look forward to any help and advice.

Many thanks in advance

Tonz:cool:

[MikoLone]

<script language="javascript">
ref = document.location.search.substr(1);
document.write('<img src="'+ref+'">');
</script>

put the table and whatever other tags taht you want in with the <img> tag. Example



<script language="javascript">
ref = document.location.search.substr(1);
document.write('<table><tr><td><img src="'+ref+'"></td></tr><tr><td>put your test here</td></tr></table>');
</script>


I hope this helps:thumbsup:

[Tonz]

Thanks Mikolone,

Idealy I want to put the put your text here on the page that the visitor clicks from.

For example..


<script language="javascript">
ref = document.location.search.substr(1);
document.write('<img src="'+ref+'">
<text='put your text here'> ')</script>

Obviously the syntaxt above is incorrect.


This is what I want....


Here (http://www.kymera.co.nz/temp/linkem.html)

This is what I have (http://www.efttech.co.nz/temp/html/products.html)


There must be a way of adding text along with the link that will appear on the "viewer.html" page.

Thank you very much for your reply,.... however... not quite there yet.

Tonz

[Tonz]

Anyone???????????


Please



Tonz:cool:

[mordred]

The most simple way IMO would be to pass both the image's URL information and the text as different GET parameters along with the query string itself. On the receiving page, you'll have to extract both parameter's value by a functionality you wrap up your own, or you can use this:


function parseGetVars() {
var getVars = location.search.substring(1).split("&");
var returnVars = new Array();

for(i=0; i < getVars.length; i++) {
var newVar = getVars[i].split("=");
returnVars[unescape(newVar[0])] = unescape(newVar[1]);
}

return returnVars;
}


Then on the starting page, you have a link like

<a href="../tech/viewer.html?image=../meetings/open1/mm09.jpg&text=zappazappa">etc..

On the viewer.html, you'll insert the following JS along with the function above:

<script>
// the code for parseGetVars() comes here

var GET = parseGetVars();
document.write('<img src="' + GET['image'] + '" \/>');
document.write('<br \/>' + GET['text']);
</script>

and voila. Make sure that the text you pass as a GET parameter is URLencoded.

And also note, for such a functionality I wouldn't rely on JavaScript. The whole thing can be easily accomplished with a server-side language reliably and without any losses in functionality - whereas the user could have JS disabled.

[MikoLone]

Thanks I was trying to work on a way to do it. but I hadn't finished. I was thinking it would be easy to build the page dynamically and pass the picture and the text together. I hadn't finished it though. I think mordred has the best solution.

:thumbsup:

[Tonz]

Many , many , many thanks to you both.


Mordred,

Sorry to appear a bit slow (well, it is Friday here) where does the first part of your answer go please?

This bit....
*****************************

function parseGetVars() {
var getVars = location.search.substring(1).split("&");
var returnVars = new Array();

for(i=0; i < getVars.length; i++) {
var newVar = getVars[i].split("=");
returnVars[unescape(newVar[0])] = unescape(newVar[1]);
}

return returnVars;
}

*****************************

Also, what do you mean by
Make sure that the text you pass as a GET parameter is URLencoded. please.

Thanx again, I'm just a bit lost.

Tonz:cool:

[mordred]

Originally posted by Tonz
Sorry to appear a bit slow (well, it is Friday here) where does the first part of your answer go please?


Thank god it's friday... :D

You just put it somewhere on the viewer.html page of yours before the second code snippet is called (for example, at the line where I put my // comment in ;) ).
I only chosed to mention it separately because you might also use another script/function to somehow retrieve the GET parameters, mine was just an example (but it works).


Also, what do you mean by
Make sure that the text you pass as a GET parameter is URLencoded. please.


Because all information is passed as characters appended to the URL, and taken out of it by the script, you have to encode certain characters unless you want to experience strange results. Look for example at the following substitute for "zappazappa", which was used as the text beneath the image:

<a href="../tech/viewer.html?image=../meetings/open1/mm09.jpg&text=This was made by Hennes & Mauritz">

What you will see is that the text written in viewer.html is only "This was made by Hennes ". Why? Because the ampersand has a special meaning: It seperates GET parameters within the query string. To make an ampersand be passed correctly, you'll have to urlencode it - it's sign is %26. This can be automatically decoded by the unescape() function in my parseGetVars() function.
So you either have to ensure that only unproblematic strings are passed, or (better) you encode them in the link. JavaScript provides the escape() function to do this, PHP has an equivalent named urlencode().

[Tonz]

Gotcha..

many thanks.

I remember reading about special charecters in a Jvascript book I have along with unescape "thingies"

I will go try all this...

Thanx again..

Tonz

BTW. Sorry it took so long to come back to you, took the weekend off. (YAYYY)

[Tonz]

YYYaaa HHoooooooo


Works perfectly. (as if there was any doubt)

Awesome stuff, owe 'ya one.

Many thanx

Tonz