Dynamic rel argument values for image size

[ManicMiner]

Hi guys, hope someone can help. I think this should be very easy to seasoned JS developers. I've tried lots of ways but this has me stumped. I'll explain in detail what I am doing.

This code references a Jquery class:
<a class="bumpbox" href="IMG.jpg" rel="640,480">View Image</a>

The image file:
<img src="IMG.jpg" id="x">

which upon clicking opens the image in a clean popup window. So far so good. I want to know the height X width properties of the image programatically, so I wrote this Javascript function:

<script language = "Javascript">
var w;
var h;

w = document.images.x.width;
h = document.images.x.height;

var hw = w+', '+h;

</script>


which works beautifully. I appened <a> code above to include
onclick = "alert(hw);" to test the values are correct and it works great. A pop-up of the heightXwidth values of the image pops up on the click.


So my problem is that the image loaded is dynamic and the height and width values are going to be different each time.

For this bit:
<a class="bumpbox" href="IMG.jpg" rel="640,480">View Image</a>

I need to pass in those values to the "rel" values dynamically.

I were doing ASP, I'd use

rel="<%=h%>,<%=w%>"

But I want to keep this server side and use the values retrieved from my javascript function. I've tried lots of ways here but no cigar

Stuff like
<a class="bumpbox" href="IMG.jpg" rel="<script>hw<script>">View Image</a>


Can anyone help? Is this even possible?

Thanks in advance!

[CuppyTea]

You need to be careful about getting the height and width from images. They will only have height and width attributes when the image has completed loading. (e.g. capture "onload" events on image elements).

Never-the-less, when your in a position to set the rel of the anchor tags (e.g you know the height/ width), just do theAnchorElement.rel = h +"X" + w

To do this nicely with jQuery, you might look at something like...

$(document).ready(function() {
	$('.bumpbox').each(function() {
		var me = $(this);
		var imageToPreload = new Image();
		
		imageToPreload.onload = function() {
			me.attr('rel', $(this).attr('width') + "X" + $(this).attr('height'));
		}
		imageToPreload.src = $(this).attr('href');
	});
})