Solved

image style

Posted on 2002-04-19
5
239 Views
Last Modified: 2010-04-09
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.
0
Comment
Question by:champs
  • 2
  • 2
5 Comments
 
LVL 19

Expert Comment

by:webwoman
ID: 6953787
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6954071
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&

0
 
LVL 19

Expert Comment

by:webwoman
ID: 6955473
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. ;-)

0
 
LVL 14

Accepted Solution

by:
avner earned 25 total points
ID: 6962663
Actually you can do it for NS too :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<!--Avner , avnerC@fundtech.co.il-->
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ZOOM(how) {
if (how=="+") {
moshe.height+=5;
moshe.width+=5;
}
else{
if (moshe.height>5)
moshe.height-=5;
if (moshe.width>5)
moshe.width-=5;
}
}
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<a href="javascript:ZOOM('+')">ZOOM IN</a>&nbsp;&nbsp;<a href="javascript:ZOOM('-')">ZOOM out</a>
<BR><BR><BR><center>
<img  id="moshe" name="moshe" src="http://www.experts-exchange.com/images/kp_logo2.gif">
</BODY>
</HTML>
0
 
LVL 14

Expert Comment

by:avner
ID: 6962668
Run the zoom out with runinterval untill a specific size to have a 3D effect.
0

Featured Post

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question