View Full Version : javascript to create hyperlinks with changing variable

07-17-2010, 03:47 PM
I need someone who can help me create javascript code which will create a hyperlink string with a changing variable:

This script should write and execute a hyperlink string which opens a separate pop-up window, nothing more. No image files, no subfolders, forget all that stuff. JUST A HYPERLINK.

The hyperlink SYNTAX does all the work in loading and selecting the images, NOT THE SCRIPT. There is only one changing variable, the value following clipart_id= Here is the basic hyperlink syntax:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id=00000&path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>


The basic html page will contain only 2 objects, an input box and a NEXT BUTTON.

Step 1: Initialize the variable from an input box, this variable is used to set the value following clipart_id= which is part of the hyperlink syntax

Step 2: The user inputs the initial variable which is used to write the first hyperlink string; click NEXT to launch the first pop-up window

Step 3: For each subsequent action Click NEXT - OnClick - This ADDS +1 to the initial variable, this variable is passed to be inserted in a new hyperlink string AND then launches a NEW hyperlink to open a NEW popup window. This is an infinite type of action which advances the value of clipart_id= every time the NEXT button is clicked.

Each time you click the NEXT button it advances a counter which executes a NEW hyperlink in a NEW popup window. The only thing that ever changes is the variable after clipart_id=, BUT the entire url syntax of the hyperlink string must be maintained exactly as shown below. If you change the syntax it will not work.

So, if the first value to start with is lets say 13000; this is input in a box; then the first hyperlink string will automatically be written and open using this:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id=13000&path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

Click the NEXT BUTTON and now a new hyperlink window will open which reads like this:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id=13001&path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

click the NEXT BUTTON and now a new hyperlink hyperlink window will open reads like this:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id=13002&path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

And so on and so on... Nothing else changes. So the "nextpath" after a CLICK is a complete new hyperlink string which contains a vew variable for the value following clipart_id=

All I am trying to do is execute a standardized hyperlink string with one changing variable.


Old Pedant
07-17-2010, 11:10 PM
What is the purpose of this???

Are you trying to grab a bunch of images from some site, where the site doesn't want you to do that?

If so, part of me doesn't want to help you. Another part of me wants to say that's a horribly inefficient way to steal site content. An amusing conflict.

07-17-2010, 11:31 PM
If that is the way you start every conversation or business introduction, I have no interest in your suggestions or assistance.

There is no nefarious purpose to this exercise.

Old Pedant
07-17-2010, 11:45 PM
Sorry...it was an attempt to be mildly amusing. Clearly fell really flat on its face.

I really did want to know the purpose, to see if there's an easier way to accomplish this.

You keep saying "a new hyperlink window" and that's a bit confusing.

You really want an ENTIRE NEW WINDOW to appear with *just* the hyperlink appearing in it???

That is, you really want to create a POPUP window each time, where each window consists of just

<a href="http://www.websitename.com/clipart/manipulate?clipart_id=13001&path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>


That's clearly possible, but such a hyperlink will *NOT* be clickable, because there is no content between the <a> and </a> tags. So the window will just sit there, doing nothing.

So I say again, what's the purpose???

07-18-2010, 12:58 AM
This is really embarassing. But we spent months creating an image database for a new design tool. We had to upload each image one at a time in order to assign very unique variables, keywords and other color management properties for our new graphic software.

We actually maintain 2 databases, one has all of the custom images uploaded with all kinds of unique properties for online viewing, the other is high quality vector files we use for production. Somehow, a mistake was made and the clipart ids somehow either got corrupted, copied over, or whatever. The system was never designed to display the images by id#. When we started doing testing, we found that the ids did not correlate with our production database and we have no way of reviewing the images by id number effectively, the database uses different image formats. The embarassing part is we never built in a procedure to dump the data and then reload it enmass since each image required special interaction with the graphic software. I am not the programmer, so this is way over my head.

We do not have the luxury or time to go in and redo the database, but we did figure that if we could review each image one at a time by code number sequentially, we could relatively get to the bottom of the issue and make corrections so we could launch our program. I figured that a simple java applet would help us with the debugging.

Yes, its not efficient and horribly archaic, but its what we need at this time. Please do not comment on the problem or issues with database management, what's done is done.

Basically, what we want is the result of the hyperlink to display in the new window. We want to sequentially review the actual image by id number.

Old Pedant
07-18-2010, 04:43 AM
OH! That's much easier and makes a lot more sense. You don't really need the hyperlinks, you just need the *EFFECT* of them. Trivial.

But shouldn't you do something to capture the correspondence between the ID number and whatever designator you will now be giving the images??

Perhaps a simple <form> with the ID already filled in an a field for you to enter the designator? And then you would capture those two values and put them in a DB someplace as you automatically then move to the next image??

But anyway, to get started, how about this:

<script type="text/javascript">
var current = 13000; // or whatever starting point

function nextPic(btn)
var url = "http://www.websitename.com/clipart/manipulate?clipart_id="
+ current + "&path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500";
document.getElementById("PIC").src = url;
btn.form.showing.value = current;
<iframe id="PIC" style="width: 550px; height: 550px;"></iframe>
Showing: <input readonly name="showing" style="width: 200px;"/>
<input type="button" value="NEXT" onclick="nextPic(this)" />

07-18-2010, 01:50 PM
Thanks, this is what I needed. We are not adjusting the database, we are using this to compare visually against a log book which has all the images separately.

07-18-2010, 02:19 PM
quick question, how can I use an input field to initialize the current value without having to change that by resaving the file?

Old Pedant
07-19-2010, 07:54 PM
Sorry...lost me.

What is "the current value"? You mean the number/name of the file?

There is nothing you have shown so far that is showing the actual name of the file, so far as I can see. All we see is a number (your 13000, etc.) which may or may not be related to the name of the file. But if that's what you mean by "current value", then my code should be showing it to you:

Showing: <input readonly name="showing" style="width: 200px;"/>

If you mean you want to be able to type in a new number (or name? or whatever?) that will be given to that file (either to change the name of the file or maybe to make a copy of the file in another directory, so you still have the old name/number around, just in case), then that's exactly what I asked you about:
Perhaps a simple <form> with the ID already filled in an a field for you to enter the designator? And then you would capture those two values and put them in a DB someplace as you automatically then move to the next image??
Clearly that's possible, but you will have to write the cdoe to do that in some server-side language (PHP/ASP/JSP/etc.).

If I'm way out in left field, please explain what you meant by "initialize the current value without having to change that ."