Solved

Overlapping Images

Posted on 1998-12-04
5
357 Views
Last Modified: 2010-04-09
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!
0
Comment
Question by:ehopkins
  • 4
5 Comments
 

Accepted Solution

by:
hualing earned 50 total points
Comment Utility
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
 

Author Comment

by:ehopkins
Comment Utility
Can you be more specific [i.e., where to I made reference to image-01.gif and image-02.gif]? Thanks...
0
 

Expert Comment

by:hualing
Comment Utility
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
 

Expert Comment

by:hualing
Comment Utility
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
 

Expert Comment

by:hualing
Comment Utility
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

771 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now