OT: More PS help

[LaRue Medlin]

Here is a picture of a window frame. I need it to have clear window panes so I can put a picture behind it. How do I do it or can someone help me out a little... I have tried and failed. So, if I can get this to happen, there will be a java slide show running on my website and I want the window over it, just like looking out side. Making sense? THANKS[Broken External Image]:

 

[Thomas Rogers]

That's going to be difficult because images on top of images isn't easy in HTML. I guess you would have to use frames/layers and absolute positioning, but I wouldn't even try it.



Instead of what you are thinking, couldn't you create 4 images, and for each image include the frame of the window around them (the inner wood vert and horizontal would be 1/2 width on the various sides of your 4 images)? Then, stitch the 4 images together via a 2x2 table with cellpadding and cellspacing=0.



TJR

 

[Kevin Palmer]

I thought I had read that if it was saved as a GIF that the back gorund color would be transparent... Or something like that.

 

[Thomas Rogers]

Making it a transparent gif is the easy part. Getting images on top of images, that is the hard part. I don't do hard, I do easy, thus the recommendation I made.



TJR

 

[Gene Marshall]

[Broken External Image]:

I have a blank window frame in my library

 

[Travis Munday]

Even using a table, I still don't think you'dt get the desired effect if Java is being used. It looks like you'll have to run a CSS (cascading style sheet) and absolutly position the various elements that you want overlaying each other, then modify the z-index of each element so the frame overlay's the Java. Here is a <a href="http://www.w3schools.com/css/css_positioning.asp" target="top">link</a> that will introduce CSS positioning and Z-index.

 

[Thomas Rogers]

Using a table you would get the desired effect if each quadrant image was already composited to include the window frame AND the image behind it (thus avoid the layering). That's the KISS approach.



TJR

 

[Rob T]

Simply put the images in a div on a different z-coord.



You guys are old school html. Keep up with some of the new stuff.

 

[Rob T]

Here is your window with clear panes.







<div style="position:absolute;z-index:1;">

<img src="http://www.zjstech.net/~library/2928/window.gif">

</div>





<marquee behavior=alternate><img src="http://www.zjstech.net/~library/102/image002.gif"></marquee>

 

[Thomas Rogers]

Thanks Rob but I am caught up.



If there are two ways to do something I typically choose the simpler...especially in this case because things like layers and absolute positioning tend to get all skewed and look different on different browzers (ie, mozilla, etc). Also, if planning on doing "animation" in the window (LaRue talked about flipping images based on user interaction) it might look a little "odd" to see the background image update then the overlay image update on top of that.



TJR

 

[Thomas Rogers]

Slick Rob...but note how you have to compensate for things below now... (your image overlay is obscuring my post below). Sometimes what appear to be simple little neat tricks have you jumping through hoops. Still, it is a cool effect and nice.



TJR

 

[Rob T]

If all of the images are the same size as the window you do not have to worry about what is below the window. The window is actually above the html page. If I use two divs, one for the window and one for the slideshow I can put them any where I want.

 

[LaRue Medlin]

Rob,, that is exactly what I want, but what is a "div" The program I'm using,, "cool page" will let me overlay items.



EDIT::: I just tried it and it is perfect. I can drag and drop and it stays transparent but I can't save it or use later???? It keeps looking for the gif file

 

[Rob T]

Right Click on the window and Save Target As...



A div is similar to a span but is like a 'block area' instead of an 'inline area'. The div can be placed anywhere in the html code and located anywhere on the page. A span has to be used where you want it located similar to a table.

 

[LaRue Medlin]

Thanks Rob. Everything looks great until I try to run it. No matter how I set it the html script over runs the frame. So THANKS! a bunch.. I'll still use it but will make each photo "framed" and try that.



EDIT::: Check it out!!:

:lol:

 

[Thomas Rogers]

Not for nothing, LaRue, but how exactly does the "inside, looking out" motif of the website you showed (which makes sense for them) fit with your business?



Wouldn't looking through a keyhole make more sense?



TJR

 

[LaRue Medlin]

I manage a friends construction website. Inside looking out towards your new stuff he just built.... He liked it...and I think it's pretty cool....



Thanks Tom

 

[Thomas Rogers]

Oh, I didn't know you were working on that site...I thought you were snagging ideas for your site.



Same complaint as before: Links within the same site shouldn't open a new window (a pet peeve of mine).



Did you look at the samples on www.Frontpagetools.com?



One particularly nice one is linked below, and another named "Back To Basics"....both had an outdoors theme to them.



The key to a good looking commercial site is to strike a good balance between originality, unbland, yet not too flashy. It's tough.





TJR