Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Overlapping Images

Posted on 1998-12-04
5
362 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
ID: 1840214
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
ID: 1840215
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
ID: 1840216
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
ID: 1840217
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
ID: 1840218
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
div to fit another div 8 28
Show tab when enter div and change underline color 3 60
Html Table looping 4 25
SSRS 2016 Rendering HTML tables 3 25
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

791 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