Closed Thread Icon

Topic awaiting preservation: object shrink on mouseover (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=8893" title="Pages that link to Topic awaiting preservation: object shrink on mouseover (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: object shrink on mouseover <span class="small">(Page 1 of 1)</span>\
 
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted 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 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).]

« Backwards — Onwards »

Show Forum Drop Down Menu
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail