Link to home
Start Free TrialLog in
Avatar of champs
champs

asked on

image style

can i apply styles to an img element so that the image appears to be coming out or going in (like a 3-d effect)? Alternately can the <td> element containing the image be styled to provide this effect.
Avatar of webwoman
webwoman

No. You can't do anything to the image other than move it if it's in a div.

If you want image effects, do them in an image editing program.
IE5.5+ only, you can style a div with the zoom and put and image in it:

<html>
<head>
<title> ZOOM </title>
<style>
   #zoomer {zoom:100%;padding:20; background-color:aliceblue}
   #container{height:200;width:200;border:5px outset silver;
              position:absolute;left:100;top:100;overflow:auto}
</style>
<script language="JavaScript">
<!--
   var Zlevel=100;
   var downlimit=40;
   var uplimit=400;
   function zoomit(x)
   {
      if (x=="u") setTimeout('zoomup()',25);
      if (x=="d") setTimeout('zoomdown()',25);
   }
   function zoomup()
   {
      if (Zlevel<uplimit)
      {
         Zlevel=Zlevel+20;
         document.getElementById('zoomer').style.zoom=Zlevel+'%';
         setTimeout('zoomup()',25);
      }
   }
   function zoomdown()
   {
      if (Zlevel>downlimit)
      {
         Zlevel--;
         document.getElementById('zoomer').style.zoom=Zlevel+'%';
         setTimeout('zoomdown()',25);
      }
   }
//-->
</script>
</head>
<body>
<button onClick="zoomit('u')">Zoom up</button>
<button onClick="zoomit('d')">Zoom down</button>
<div id="container">
<div id="zoomer">
   <img src="IMG1.gif" border="0">
</div>
</div>
</body>
</html>


Cd&

I doubt that's what they want... and I'd bet they want it to work on more than just IE5.5+

But until they answer, we don't know. ;-)

ASKER CERTIFIED SOLUTION
Avatar of avner
avner

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Run the zoom out with runinterval untill a specific size to have a 3D effect.