Overlapping Images

Anyone know how to overlap one graphic onto a portion of another graphic? Would this entail dhtml or css? I would really appreciate the code. Thanks!
ehopkinsAsked:
Who is Participating?
 
hualingConnect With a Mentor Commented:
you can define  class called "overlap" as :
<style type="text/css">
     <!--
       .overlap { position:relative;
                      top:...
                      left:...    
            }
      -->
</style>

insert the code after </title> before</head>

this class define a relative layer,and you can specify the top and the left overlap the original image.
good luck!

0
 
ehopkinsAuthor Commented:
Can you be more specific [i.e., where to I made reference to image-01.gif and image-02.gif]? Thanks...
0
 
hualingCommented:
please try this one:
<html>
<head>
      <title>Untitled</title>
      <style type="text/css">
     <!--
       <!--
       .img{ position:absolute;
                      top:10
                      left:10      
            }
      -->

            }
      -->
</style>

</head>

<body>
<img src="image-01"><div class="image"><img src="image-02.gif" </div>
</body>
</html>

0
 
hualingCommented:
image-02 will at the absolute position which is 10 pix from top and left of the screen Overlap the image-01.
you can change any parameters which defined in<style>...
try?

have a nice weekend!

Hualing
0
 
hualingCommented:
Sorry i must correct some errors :
try this:
<html>
<head>
<title>Untitled</title>
<style type="text/css">
     <!--
       <!--
       .img{ position:absolute;
                      top:10 ;
                      left:10 ;      
            }
      -->

            }
      -->
</style>

</head>

<body>
<img src="image-01"><div class="img"><img src="image-02.gif"></div>
</body>
</html>


0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.