Solved

How do I combine layers and masks.

Posted on 2001-06-12
14
395 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:Richard Quadling
[X]
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
14 Comments
 
LVL 22

Expert Comment

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

Author Comment

by:Richard Quadling
ID: 6180585
Ok. If I get it working from comments presented, they get an 'A' grade!

0
 
LVL 10

Expert Comment

by:dij8
ID: 6180743
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Author Comment

by:Richard Quadling
ID: 6181271
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
ID: 6183512
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:Richard Quadling
ID: 6185335
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
ID: 6186262
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
 
LVL 10

Expert Comment

by:dij8
ID: 6187793
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:Richard Quadling
ID: 6189996
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
ID: 6190087
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:Richard Quadling
ID: 6190190
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:Richard Quadling
ID: 6190192
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
ID: 6190202
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
ID: 6190216
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

732 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