Solved

How do I combine layers and masks.

Posted on 2001-06-12
14
386 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
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
VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
would like the bottom of this page to be smaller 3 29
ASP.net Fit 3 divs on screen side by side 3 28
Javasctipt 2 26
How do I pull the base url for use in html links 7 23
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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…

803 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