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="javasc ript:veranderKe uze(this.id);" alt="">

[Martin Honnen]

ja********@gmai l.com wrote:

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

<img src="images/hokje.gif" id=""
onClick="javasc ript:veranderKe uze(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="verand erKeuze(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.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Duncan Booth]

wrote:

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="javasc ript:veranderKe uze(this.id);" alt="">

Putting 641 clickable images on a page sounds like a recipe for disaster,
but if you are determined to do that, why bother giving them id's at all?

Rewrite your veranderKeuze script to accept an image object instead of an
id and then just do:

<img src="images/hokje.gif" onClick="javasc ript:veranderKe uze(this);"
alt="">

[Robert]

ja********@gmai l.com wrote:

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="javasc ript:veranderKe uze(this.id);" alt="">

It is possible to get all images in a document using
getElementsByTa gName 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[i].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.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Baconbutty]

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

http://msdn.microsoft.com/library/de...s/uniqueid.asp

[RobG]

JAPIO wrote:

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.

--
Rob

[J.J.SOLARI]

JAPIO <ja********@gma il.com> wrote:

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="clickabl e" 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.stopPropagati on )
{
e.stopPropagati on();
}
// DOM Microsoft
else if( window.event )
{
window.event.ca ncelBubble = 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 = substitutedImag e.src;

// some necessary action
...

}

function init()
{
// array of *all* images in document
IMGS = document.getEle mentsByTagName( "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.getEle mentById("click able").getEleme ntsByTagName("i mg");

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

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

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

for ( i=0; i < IMGS.length; i++ )
{
IMGS[i].onclick = changeSrcClick;
}
}
var IMGS = new Array();
var substitutedImag e = new Image( W, H );
substitutedImag e.src = "image_to_subst itute.png";

window.onload = init;

</script>

hih,

JJS.
--
Anti-spam : <http://public.xdi.org/=jj.solari>

[Randy Webb]

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

ja********@gmai l.com wrote:

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="javasc ript:veranderKe uze(this.id);" alt="">

It is possible to get all images in a document using
getElementsByTa gName 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.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly