Solved

How do I combine layers and masks.

Posted on 2001-06-12
14
379 Views
Last Modified: 2008-02-01
I have an idea for a particular type of logo using DHTML (So, IE4 and NS4+ only?)

The idea is to have the letters that make up the name of the site act as a transparent mask onto a sliding cartoon strip. The cartoon strip is only visible "through" the letters.

Where the letters are not (?), the normal document background is visible.

The cartoon is very wide, but only needs to be moved from right to left.

Ideally, the letters (which I assume are actually going to be some soft of graphical image will also have a border to them.


I think it looks something like this. This from back to front.

Background
 Cartoon layer which uses Javascript to slide from right to left
 Letters acting as mask, fixed position.

I think I need several different masks, but I am not too sure.

Ideas and suggestions welcome (Grade B and c), solutions get you grade A.

Regards,

Richard Quadling.
0
Comment
Question by:RQuadling
14 Comments
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
*grin* never say a C grade, I pass.
0
 
LVL 40

Author Comment

by:RQuadling
Comment Utility
Ok. If I get it working from comments presented, they get an 'A' grade!

0
 
LVL 10

Expert Comment

by:dij8
Comment Utility
You could use CSS and the z-index to set where the layers are.  And they will also need to be absolutely positioned.  Then make your letters transparent gifs.

If an object has a link in or on it and a layer over it (a higher z-index) then the link will not be accessible.  What this means is the way in which you move the cartoon will need to be away from (or on top of) the letters.

So using the z-index method your layout will be more like
Background
Cartoon layer which uses Javascript to slide from right to left
Letters acting as mask, fixed position
Rollover or clicked links for moving cartoon layer.

I can pass on code to do this as well if you need it but I am going out for a few hours.  Which means it might not be until tonight that you get a response.
0
 
LVL 40

Author Comment

by:RQuadling
Comment Utility
The cartoon will be moved via client side JavaScript 1 pixel per .1 of a second maybe.

So.

If I wanted the cartoon coming through the letters and the letters to have a border, then I would need something like ...


Layer 1 - mask shaped to include the border of the letters
 Layer 2 - mask shaped to include the cartoon only (fits inside the above mask and is relative to layer 1
 Layer 3 - Cartoon layer animated relative to layer 2
Layer 4 - Border layer relative to layer 1
Background

I assume GIF files for the masks?

I am willing to wait.

I would like an example of the actual code for this sort of things. Cross browser too.

And in light of what I am actually asking for, I have increased the points.

0
 
LVL 10

Expert Comment

by:dij8
Comment Utility
OK, made a couple of images and wrote some code.  I think this is what you are after.  I have made it faster than every second so that you can see it running quickly.

You can see what I have done at http://dij8.com/ee/RQuadling.htm

If it is what you want then just view source to see what you need to do.  And let me know of course so I can post the code here for the PAQ.
0
 
LVL 40

Author Comment

by:RQuadling
Comment Utility
Oh!!!

Very close.

I don't want a rectangular box though. I want to see the document background.

Can the mask filter work with this in some way?

0
 

Expert Comment

by:th94dj
Comment Utility
nice one dij8

the only solution I can think of is to make the surounding area of the gif outside the letter contour identical to the background where the layer resides to give the illusion of background visibility.
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 10

Expert Comment

by:dij8
Comment Utility
I am not sure I follow.  When you say you don't want the box and you want to see the document background, do you mean you just want the letters outline?  If so it is just a matter of editing the letters image to be that way.

I never saved the PSD I used so I will try and edit the gif to see if it is closer to what you want.  But all it will be is editing an image, not changing code.  Will probably take me about half an hour (now 7:23pm UK time).
0
 
LVL 40

Author Comment

by:RQuadling
Comment Utility
The sort of thing I am looking for is a picture frame that is not a rectangle.

There is a border on the frame, but the picture inside the frame is the cartoon.

The cartoon bit works REALLY well for me!

If the picture frame was a circle, then that would show me how to do it. From what I can tell, only rectangles can be used. I initially thought that the clip facility would work like the area method on image maps. If it did, then I could have different animations on different letters all going in different directions, which is what I really want!

But until I can get my head around a non-regular mask with the rest of the frame being transparent, I am sort of stuck. I don't really want to do this in Flash, as I cannot alter the animations without having hundreds of different files!

So.

If the same thing can be done with a circular frame instead and the background coming through around the OUTSIDE of the frame and the cartoon sliding INSIDE the frame, then that would be the EXACT thing I am looking for!

As I want MORE things, more points!!!!

Richard.

0
 
LVL 10

Accepted Solution

by:
dij8 earned 300 total points
Comment Utility
What you are asking is not going to happen.  At least not without Flash or some clever image editing.  I think the closest you are going to get without using Flash is what the page I have done is now changed to.

I could do the multiple cartoons moving in different directions but I think from the code already there you should be able to figure it out.
0
 
LVL 40

Author Comment

by:RQuadling
Comment Utility
I think you are right about doing it with DHTML. I've read a little bit more about masks and they are next to useless.

I assumed that a mask would be an irregular transparency clip, but it is not.

Ho hum!

Thanks for the effort.

Here are the points!
0
 
LVL 40

Author Comment

by:RQuadling
Comment Utility
If anyone else can come up with a better , non-Flash solution, then I would be very greatful!

Thanks.

Richard Quadling.
0
 
LVL 10

Expert Comment

by:dij8
Comment Utility
I'm sorry I couldn't be more helpful.  Glad to have been some assistance though. :-)

Thanks for the A.
0
 
LVL 10

Expert Comment

by:dij8
Comment Utility
Oh yeah, and for the sake of the PAQ the code I used was this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Layered images</title>
<style type="text/css">
body {
  background-color:#000033;
  color:#ffcc99;
  font-size : 10px;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#themask {
  position:absolute;
  top:20;
  left:50;
  z-index:0;
}
#lettersdiv {
  position:absolute;
  top:50;
  left:100;
  z-index:10;
}
#cartoonout {
  position:absolute;
  top:50;
  left:100;
  width:350px;
  height:80px;
  z-index:2;
  overflow : hidden;
  clip:rect(0,350,80,0);
}
#cartoonin {
  position:absolute;
  top:0px;
  left:0px;
  z-index:5;
}
</style>
<script language="JavaScript" type="text/javascript">
<!-- // cloak
var docAll = (document.all) ? true:false;
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById&&!document.all) ? true:false;
var docbit, docbitend, stylebit, objectwidth
if (docAll) {
  docbit="document.all[";
  docbitend="]";
  stylebit=".style";
  objectwidth=".clientWidth";
}
else if (docLayers) {
  docbit="document.layers[";
  docbitend="]";
  stylebit="";
  objectwidth=".document.width";
}
else if (docId) {
  docbit="document.getElementById(";
  docbitend=")";
  stylebit=".style";
  objectwidth=".offsetWidth";
}
else {
  docbit="document.";
  docbitend="";
  stylebit=".style";
  objectwidth=".offsetWidth";
}
var thecartoon, cartoonwidth
cartoonwidth = 800
function init() {
  if (docLayers) {
    thecartoon = eval(docbit+'"cartoonout"'+docbitend+'.'+docbit+'"cartoonin"'+docbitend+stylebit)
  } else {
    thecartoon = eval(docbit+'"cartoonin"'+docbitend+stylebit)
  }
  eval(thecartoon.left=350)
  movecartoon()
}
function movecartoon() {
  if (parseInt(thecartoon.left)>-cartoonwidth) {
    eval(thecartoon.left=parseInt(thecartoon.left)-5)
  } else {
    eval(thecartoon.left=350)
  }
  setTimeout("movecartoon()",100)
}
// decloak -->
</script>
</head>
<body onload="init()">
<div id="themask"><img src="mask.gif" width="450" height="150" alt="" border="0"></div>
<div id="lettersdiv"><img src="letters.gif" width="350" height="80" alt="" border="0"></div>
<div id="cartoonout">
  <div id="cartoonin"><img src="cartoon.gif" width="800" height="80" alt="" border="0"></div>
</div>
<p>Content of page can go here</p>
</body>
</html>
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 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

10 Experts available now in Live!

Get 1:1 Help Now