Determining an images actual height

[Zef]

I have this following code that enlarges an image when you click it. It works great BUT the height of each image I use will be different. I want all images to load to their natural height. What javascript could I use to call in the images original ACTUAL height into where it says height goes here?

<img src="example.jpg" height="440"  onclick="this.src='example.jpg';this.height=HEIGHT GOES HERE" ondblclick="example.jpg';this.height=440"/>

Thanks in advance!

[Jon-86]

Don't set the height attribute and it will load the full sized image by default...

[Zef]

At 4/29/10 11:27 AM, Jon-86 wrote: Don't set the height attribute and it will load the full sized image by default...

I want it to load full size only when I click it though.

[GustTheASGuy]

http://krook.org/jsdom/Element.html

Remove the width/height attributes via JS when clicked and it will be resized back to default size.

[Zef]

At 4/29/10 01:02 PM, GustTheASGuy wrote: http://krook.org/jsdom/Element.html

Remove the width/height attributes via JS when clicked and it will be resized back to default size.

OK that makes sense but my js is terrible. What do i take from the page you linked me to?

[CronoMan]

Sounds like a job for jQuery!
Use the functions to add and remove a class or attribute.. something like :

$(function()
{
    $(".zoomimage").click(function()
    {
        if($(this).hasClass("unzoomed"))
            $(this).removeClass("unzoomed");
        else
            $(this).addClass("unzoomed");
    });
});

where in the css-class unzoomed, you constrain the size (which you put on the image by default)

<style type="text/css">
.unzoomed
{
    height: 100px;
}
</style>

<img class="zoomimage unzoomed" src="goatse.jpg" />
<img class="zoomimage unzoomed" src="tubgirl.jpg" />