full div area onclick

This problem was not solved.. it was just evaded.. so dont use this as reference

what i have is

<div>
    <img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
    <div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
        <pre style='width:100%;height:100%;'>
            \lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
        </pre>
    </div>
</div>

yes i know its ugly but well..

my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !

i dont want to use document.getElementById etc...

there will be multiple instances of this code and it wi开发者_JAVA百科ll be in unknown places.

i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)

my question is simple :

why the hell does it work only if i click on text and how to fire onclick for the whole div

In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.

Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/

which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.

I removed the parts of the JS that calculated width and height and that fixed the issue.

If you click on the lime green area that holds your text, the action works.

Unless there is some other reason, you don't need to adjust width or height.

It's hard to tell what behavior you really want.

You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).

Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.

Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV