Generate unique ID

[jaapkramer]

I have a page with 641 images in it. Each image can be clicked with as
result that the image source will be changed. For this the images need
to have a unique ID. But to do this manually for 641 is just too much.
Is there a way to give each image his own unique id without setting
them myself?

The image:

<img src="images/hokje.gif" id=""
onClick="javascript:veranderKeuze(this.id);" alt="">

 

[Martin Honnen]

Is there a way to give each image his own unique id without setting
them myself?

<img src="images/hokje.gif" id=""
onClick="javascript:veranderKeuze(this.id);" alt="">

I don't think you need an id at all, simply pass the image object itself
to the function e.g.
<img onclick="veranderKeuze(this);"
and then
function veranderKeuze (img) {
img.src = 'whatever.gif';
}
Or what exactly do you need the id for in your function? You haven't
shown that.

 

[Robert]

I have a page with 641 images in it. Each image can be clicked with as
result that the image source will be changed. For this the images need
to have a unique ID. But to do this manually for 641 is just too much.
Is there a way to give each image his own unique id without setting
them myself?

The image:

<img src="images/hokje.gif" id=""
onClick="javascript:veranderKeuze(this.id);" alt="">

It is possible to get all images in a document using
getElementsByTagName and then iterating over them and seting a unique
id. However looking at your example I don't see why you need the id. How
about using the event in the 'veranderKeuze' function and getting the
target or srcElement to do something with the image?

PS
It is better to use onclick instead of onClick.
And remove the javascript: in the event.

 

[JAPIO]

Let me explain:

Each image will represent an field in a database.
When one image is clicked the image source will be changed and a update
request will be send to the database (probably a iframe location
refresh somewhere).
So i need the id to update the field which it belongs too.

 

[Martin Honnen]

JAPIO wrote:

Each image will represent an field in a database.
When one image is clicked the image source will be changed and a update
request will be send to the database (probably a iframe location
refresh somewhere).
So i need the id to update the field which it belongs too.

But if you have server side code and that stuff comes from a data base
then you should easily be able to generate the ids on the server, there
is certainly no need to to it "manually" as your first post said.
Of course you can loop through all images on the client and generate ids
there ( e.g.
var images = document.images, length = images.length;
for (var i = 0; i < length; i++) {
images.id = 'image' + i;
}
) but I don't see how that helps then to get the ids necessary to relate
to your data base fields, that is information you have available on the
server and consequently you should simply generate the needed ids there.

 

[Baconbutty]

This may be Microsoft only, but what about the "uniqueID" property.

http://msdn.microsoft.com/library/d...uthor/dhtml/reference/properties/uniqueid.asp

 

[RobG]

Let me explain:

Each image will represent an field in a database.
When one image is clicked the image source will be changed and a update
request will be send to the database (probably a iframe location
refresh somewhere).
So i need the id to update the field which it belongs too.

Presumably your page is generated at the server, so why not generate
the id there? Any ID generated at the client will likely be
meaningless to the server, it will just the position in the images
array - and if JavaScript is not available, no IDs will be assigned.

You could add the database key as a query string on the end of the
image's href (again, server generated). But be aware users have a
habbit of spoofing this kind of stuff.

An ID must start with a letter, but can include numbers, hypens &
underscores (and other characters too) so you could just generate an
ID like 'id-x' or 'id_x' or 'id:x' where 'x' is just a sequential number.

 

[J.J.SOLARI]

Let me explain:

Each image will represent an field in a database.
When one image is clicked the image source will be changed and a update
request will be send to the database (probably a iframe location
refresh somewhere).
So i need the id to update the field which it belongs too.

JAPIO,

Let's have the HTML like:

<img src="some_image.png"
<!-- class="clickable" if needed (see below) -->
width="W" height="H" alt="">

Then this JS (supposing that there is only one image to substitute for
all 641 images - that is a set of 641+1 images - otherwise, IMO, a set
of 2*641 images for one page is NOT reasonable):

<script type="text/javascript">

// stop event propagation
function stopBubble( e )
{
// DOM W3C
if( e.stopPropagation )
{
e.stopPropagation();
}
// DOM Microsoft
else if( window.event )
{
window.event.cancelBubble = true;
}
}

// perform some action on image src
function changeSrcClick( e )
{
// get event according to W3C or Microsoft DOM
e = ( e ) ? e : ( (window.event) ? window.event : null);

// if no event return
if ( !e ) return;

// stopBubble( e );

var node = ( e.target ) ? e.target : e.srcElement;

// bubbling bug workaround
if ( node.nodeType == 3 ) node = node.parentNode;

// image substitution like this
node.src = substitutedImage.src;

// some necessary action
...

}

function init()
{
// array of *all* images in document
IMGS = document.getElementsByTagName( "img" );

/* ================ NOTE ====================

If you need to exclude some image(s) from this set of clickable images,
you can do whether, depending of your document structure:

- put clickable images in a div with id="clickable"
IMGS = document.getElementById("clickable").getElementsByTagName("img");

- give them a particular class like class="clickable"; in this case, in
next code, instead of direct method setting, just have a condition like:

if( IMGS.className == "clickable" )
{ IMGS.onclick = changeSrcClick; }

=========================================== */

for ( i=0; i < IMGS.length; i++ )
{
IMGS.onclick = changeSrcClick;
}
}
var IMGS = new Array();
var substitutedImage = new Image( W, H );
substitutedImage.src = "image_to_substitute.png";

window.onload = init;

</script>

hih,

JJS.

 

[Randy Webb]

Robert said the following on 7/22/2005 8:38 AM:

It is possible to get all images in a document using
getElementsByTagName and then iterating over them and seting a unique
id.

It is even easier, and thus probably more efficient, to use the
document.images collection.

PS
It is better to use onclick instead of onClick.

Why? There is no difference.

 

[JAPIO]

At the moment i use the script given by J.J.SOLARI.
document.getElementsByTagName gives an error, so i used document.images
instead. This is working fine.

Thank you all for now!

 

[Randy Webb]

JAPIO said the following on 7/25/2005 3:28 AM:

At the moment i use the script given by J.J.SOLARI.

The advice given by Martin Honnen will take you way further in the end.

document.getElementsByTagName gives an error, so i used document.images
instead.

document.images collection is a lot more efficient than
getElementsByTagName, if for no other reason than the overhead involved
in invoking one method to produce an array that already exists in the
other collection.

 

[JAPIO]

I've got it working now. I now have a page with over 600 images wich
are all clickable. When an image is clicked it will be stored in a db
according to its own id. And if clicked again, it will be removed.

Now i can regenerate the page from the db so that all the clicked
images wil be visible again.

Thanks again.