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.
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;widt h:200;bord er:5px outset silver;
position:absolute;left:100 ;top:100;o verflow:au to}
</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('z oomer').st yle.zoom=Z level+'%';
setTimeout('zoomup()',25);
}
}
function zoomdown()
{
if (Zlevel>downlimit)
{
Zlevel--;
document.getElementById('z oomer').st yle.zoom=Z level+'%';
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&
<html>
<head>
<title> ZOOM </title>
<style>
#zoomer {zoom:100%;padding:20; background-color:aliceblue
#container{height:200;widt
position:absolute;left:100
</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('z
setTimeout('zoomup()',25);
}
}
function zoomdown()
{
if (Zlevel>downlimit)
{
Zlevel--;
document.getElementById('z
setTimeout('zoomdown()',25
}
}
//-->
</script>
</head>
<body>
<button onClick="zoomit('u')">Zoom
<button onClick="zoomit('d')">Zoom
<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. ;-)
But until they answer, we don't know. ;-)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Run the zoom out with runinterval untill a specific size to have a 3D effect.
If you want image effects, do them in an image editing program.