[jQuery] AutoScaling Image
OK, maybe someone can help me wrap my head around a good way of doing this.
Here's the setup (question to follow). I have a container div that contains a) an image [float:left] b) a table, and c) a div below the image and table. I use JQuery to hide the lower div on page load. I have a hover() event on the container that will show the lower div on mouseover and hide the lower div on mouseout.
<div id="listingContainer1" class="listing">
<img src="myimage.jpg" width="30" alt="something" id="img1" class="listingImg" />
<table class="littleDetail">
<tr>
<td>
Some minor details
</td>
</tr>
</table>
<table class="moreDetail">
<tr>
<td>
And here we would list more in-depth detail
</td>
</tr>
</table>
</div>
So, what I would like to do is sort of a fisheye-type of effect. In my hover action, have it so that the image would auto-scale larger on the container mouseover and revert back on mouseout. First I went to the Interface plugin and checked out the demos. The Fisheye() wouldn't really apply, and the image resizer demo is tied to the slider, so these were out. I also looked at the Resizable demo in the ExtJS library, but it didn't have the fisheye kind of effect to it. Anyone out there had need of this before? Come across a plugin that can do this for me?
<br clear="all">
--
Steve "Cutter" Blades
Adobe Certified Professional
Advanced Macromedia ColdFusion MX 7 Developer
_____________________________
<a href="http://blog.cutterscrossing.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://blog.cutterscrossing.com</a>
---------------
The Past is a Memory
The Future a Dream
But Today is a Gift
That's why they call it
The Present