JAPIO <jaapkramer@gmail.com> wrote:
[color=blue]
> 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.[/color]
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").getElementsBy TagName("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[i].className == "clickable" )
{ IMGS[i].onclick = changeSrcClick; }
=========================================== */
for ( i=0; i < IMGS.length; i++ )
{
IMGS[i].onclick = changeSrcClick;
}
}
var IMGS = new Array();
var substitutedImage = new Image( W, H );
substitutedImage.src = "image_to_substitute.png";
window.onload = init;
</script>
hih,
JJS.
--
Anti-spam : <http://public.xdi.org/=jj.solari>
