javascript – Possible to aquire a CSS defined size for an image via Jscript and change URL values before image loads?

So what I have is the following HTML structure

<div class=\"large\">
<a href=\"http://www.google.com\">
<img src=\"/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1\" width=\"800\" height=\"600\" border=\"0\" /></a>
</div>

Now that mythumb.php is a thumbnailer script that will on the fly create a thumbnail with predefined size limits (in this case 800×600).

However in my CSS file i\’ve set

.large img
{
width:400px;
height:300px;
}

This is done so I achieve a retina effect on iphones/ipad, etc..

However, I was thinking this is better to be accomplished dynamically, and I want to be able to pull the CSS defined width and height and replace those values in the URL

In this case, would it be possible for javascript to change

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1

to

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg*&h=300&w=400*&zc=1&s=1

This change should occur before the image loads so we dont waste the users bandwidth downloading the same image twice.

I would also like to only apply this to images being called from the mythumb.php, not my other static images on the page

Does anyone think something like this is possible?

Rating: 1 out of 5 based on 3 ratings

The post javascript – Possible to aquire a CSS defined size for an image via Jscript and change URL values before image loads? appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-possible-to-aquire-a-css-defined-size-for-an-image-via-jscript-and-change-url-values-before-image-loads.html