Topic awaiting preservation: object shrink on mouseover $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8893" title="Pages that link to Topic awaiting preservation: object shrink on mouseover" rel="nofollow" >Topic awaiting preservation: object shrink on mouseover\$

Author	Thread
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 10-08-2003 19:18 Hi guys, I'm looking to create an effect whereby a 35px X 35px div or image appears to shrink to nothing on mouseover. I'm no good with timed events in javascript so I'm hoping somebody will be help me out. Thnaks, Jon
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 10-08-2003 23:37 Ok, I have been playing since I'm kinda in a hurry and I have come up with a semi working solution: <html> <head> <script type="text/javascript"> function shrink(el) { pxWidth = el.offsetWidth pxHeight = el.offsetHeight el.style.width = pxWidth-1+'px' el.style.height = pxHeight-1+'px' setTimeout('shrink('+el+')',500); } </script> </head> <body> <div style="width:35px;height:35px;background:#CCCCCC" onmouseover="shrink(this);"></div> </body> </html> The problem is that it doesn't keep shrinking - it throws an error, now I think I know why it does this, but I have no idea how to fix it (I'm iffy with the 'this' declaration) tho I didn't particularly want to have to use the document.getElementById('whatever') method instead. Also I'm a little worried that if I have this onmouseover function applied to multiple objects on the page that each time a new object is moused over then it will cease the function on the previous objects currently 'shrinking'. Some help would be much appreciated. Thanks again guys, Jon [This message has been edited by smonkey (edited 10-09-2003).]

Topic awaiting preservation: object shrink on mouseover\$

Author

Thread

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 10-08-2003 19:18

Hi guys,

I'm looking to create an effect whereby a 35px X 35px div or image appears to shrink to nothing on mouseover.

I'm no good with timed events in javascript so I'm hoping somebody will be help me out.

Thnaks,

Jon

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 10-08-2003 23:37

Ok, I have been playing since I'm kinda in a hurry and I have come up with a semi working solution:

<html>
<head>

<script type="text/javascript">

function shrink(el) {

pxWidth = el.offsetWidth
pxHeight = el.offsetHeight

el.style.width = pxWidth-1+'px'
el.style.height = pxHeight-1+'px'

setTimeout('shrink('+el+')',500);

}

</script>

</head>
<body>

<div style="width:35px;height:35px;background:#CCCCCC" onmouseover="shrink(this);"></div>

</body>
</html>

The problem is that it doesn't keep shrinking - it throws an error, now I think I know why it does this, but I have no idea how to fix it (I'm iffy with the 'this' declaration) tho I didn't particularly want to have to use the document.getElementById('whatever') method instead.

Also I'm a little worried that if I have this onmouseover function applied to multiple objects on the page that each time a new object is moused over then it will cease the function on the previous objects currently 'shrinking'.

Some help would be much appreciated.

Thanks again guys,

Jon

[This message has been edited by smonkey (edited 10-09-2003).]