Dynamic Banner with Overlay

[SamirD]

I want to create a dynamic banner with an overlay of my site's graphic. I've been able to create a table with dynamic images. That part was easy. The hard part is the overlay. Basically a graphic has to overlay with transparency on top of the table, but I don't know how to do that. :cry

Here's a link to the table with images:
http://www.huntsvillecarscene.com/BANTEST.HTM

Here's a link to the site graphic:
http://www.huntsvillecarscene.com/events/HCSLOGO.bmp
(this is a larger version with different colors and no transparency, but it's good for testing)

Any assistance appreciated. I know it's possible because jfriend uses overlays in his hidden images customization.

[jfriend]

It isn't very clear to me what you want to do. Can you describe it in more detail?

Can you just use a DIV with a background image and then place other images into the DIV (which will automatically overlay the background image)? Use PNG images with a transparent background if you want non-rectangular transparent shapes.

[SamirD]

It isn't very clear to me what you want to do. Can you describe it in more detail?

Can you just use a DIV with a background image and then place other images into the DIV (which will automatically overlay the background image)? Use PNG images with a transparent background if you want non-rectangular transparent shapes.Thank you for the reply. I know if anyone knows how to do this, it's you. :thumb

So what you are describing with the DIV with the background image is almost what I want, except I want the other images to be the background and my site's graphic to overlay those. Basically the same as the div you describe except swap what's overlaying what.

Let me see if I can also describe what I want with a bit more detail. In this link I have created a table of images pulled randomly from SM galleries:
http://www.huntsvillecarscene.com/BANTEST.HTM

I want this graphic, which I will modify for transparency vs white, to overlay the table of images in the previous link:
http://www.huntsvillecarscene.com/events/HCSLOGO.bmp

Does this clarify it? If not, ask me more questions. :D

[jfriend]

Thank you for the reply. I know if anyone knows how to do this, it's you. :thumb

So what you are describing with the DIV with the background image is almost what I want, except I want the other images to be the background and my site's graphic to overlay those. Basically the same as the div you describe except swap what's overlaying what.

Let me see if I can also describe what I want with a bit more detail. In this link I have created a table of images pulled randomly from SM galleries:
http://www.huntsvillecarscene.com/BANTEST.HTM

I want this graphic, which I will modify for transparency vs white, to overlay the table of images in the previous link:
http://www.huntsvillecarscene.com/events/HCSLOGO.bmp

Does this clarify it? If not, ask me more questions. :D First off, your logo image will need to be converted to a PNG image with a transparent background in some sort of graphics editor. Right now, it's a BMP image without a transparent background.

Then, the easiest way to do this would be to take your table of images and make it into a single image that you can assign as the background in my scenario I previously described.

If that's not possible for some reason, then it will take a more complicated set of DIVs and relative and absolute positioning to overlay the logo on top of the table. The current table is an odd assortment of shapes that's a lot smaller than the logo so it doesn't seem like it would look very good when overlaid as it is unless you plan on changing it to make it much larger.

[SamirD]

Thank you very much for the feedback. I think you've got the concept now. :clap
First off, your logo image will need to be converted to a PNG image with a transparent background in some sort of graphics editor. Right now, it's a BMP image without a transparent background.Agreed. It will also have to be resized to fit the table appropriately.
Then, the easiest way to do this would be to take your table of images and make it into a single image that you can assign as the background in my scenario I previously described.But to keep it dynamic, it will have to be generated vs static, similar to the top of dgrin.
If that's not possible for some reason, then it will take a more complicated set of DIVs and relative and absolute positioning to overlay the logo on top of the table. The current table is an odd assortment of shapes that's a lot smaller than the logo so it doesn't seem like it would look very good when overlaid as it is unless you plan on changing it to make it much larger.More complicated it will have to be, and can only use relative positioning as this table actually goes into another piece of html that is dynamically generated. The logo will be shrunk down to fit the table appropriately.

I've quickly made a resized transparent png of the logo. It's kinda dirty because of the anti-alising, but it should work for coding purposes:
http://www.huntsvillecarscene.com/events/HCSLOGO4.png

I've also made a another file which maybe helps nail the concept. Imagine the logo in the bottom table overlayed on the first table with the images:
http://www.huntsvillecarscene.com/events/bantest4.HTM

I really appreciate all your help. :bow

[jfriend]

Thank you very much for the feedback. I think you've got the concept now. :clap
Agreed. It will also have to be resized to fit the table appropriately.
But to keep it dynamic, it will have to be generated vs static, similar to the top of dgrin.
More complicated it will have to be, and can only use relative positioning as this table actually goes into another piece of html that is dynamically generated. The logo will be shrunk down to fit the table appropriately.

I've quickly made a resized transparent png of the logo. It's kinda dirty because of the anti-alising, but it should work for coding purposes:
http://www.huntsvillecarscene.com/events/HCSLOGO4.png

I've also made a another file which maybe helps nail the concept. Imagine the logo in the bottom table overlayed on the first table with the images:
http://www.huntsvillecarscene.com/events/bantest4.HTM

I really appreciate all your help. :bow OK, here's the shell of what you would do:

<div id="myImageTableContainer">
<table id="myImageTable"> .... </table>
<img id="myUnderlayImage" src="..." border="0"/>
</div>

And then your CSS would work like this:

#myImageTableContainer {position:relative;}
#myImageTable {z-index: -10;}
#myUnderlayImage {position:absolute: top:0; left:0; z-index: 10;}

This tells the browser to position the image at the top/left corner of myImageTableContainer (same place myImageTable is locationed) and position it above the table.

[SamirD]

OK, here's the shell of what you would do:

<div id="myImageTableContainer">
<table id="myImageTable"> .... </table>
<img id="myUnderlayImage" src="..." border="0"/>
</div>

And then your CSS would work like this:

#myImageTableContainer {position:relative;}
#myImageTable {z-index: -10;}
#myUnderlayImage {position:absolute: top:0; left:0; z-index: 10;}

This tells the browser to position the image at the top/left corner of myImageTableContainer (same place myImageTable is locationed) and position it above the table.I tried implementing your shell, but I must have missed something. Here's the resulting test file:
http://www.huntsvillecarscene.com/events/bantest6.HTM

What have I missed? :scratch

[jfriend]

I tried implementing your shell, but I must have missed something. Here's the resulting test file:
http://www.huntsvillecarscene.com/events/bantest6.HTM

What have I missed? :scratch A typo in this line (from my posting):

#myUnderlayImage {position:absolute; top:0; left:0; z-index: 10;}

You will need to set a width on the myImageTableContainer object too.

[SamirD]

Getting there! :clap

The problem is that there isn't a fixed width. And this makes positioning a challenge since it needs to be centered both on the x and y axis. How would that be possible?

[jfriend]

Getting there! :clap

The problem is that there isn't a fixed width. And this makes positioning a challenge since it needs to be centered both on the x and y axis. How would that be possible? You didn't tell me that. That is more complicated and I'm not even sure how to center it vertically. Centering horizontally can be done by putting the image in it's own container div, moving the absolute positioning to that div, then centering the image inside that div. Are you really sure you want to do this? Have you actually tried it to see what it looks like? When I mess with your test page to put the transparent image over the thumbnail images, this is what I see:

http://content.screencast.com/users/jfriend/folders/Jing/media/db75047d-c3d7-49bb-84c7-8f3bf21b2a2d/2009-10-11_2243.png

[SamirD]

Sorry. :( I thought the width=100% in the table gave it away. I couldn't see the image that you posted. It probably looks pretty ugly.

I follow the theory on what you explained on the divs pretty well. It's just that in practice, I mess it up. :( I tried what you mentioning here even before you posted, but I have no idea how to properly use div tags so it was just a mess. :dunno Any chance to you can give me another shell?

[jfriend]

Sorry. :( I thought the width=100% in the table gave it away. I couldn't see the image that you posted. It probably looks pretty ugly.

I follow the theory on what you explained on the divs pretty well. It's just that in practice, I mess it up. :( I tried what you mentioning here even before you posted, but I have no idea how to properly use div tags so it was just a mess. :dunno Any chance to you can give me another shell? Can you not see this image (http://content.screencast.com/users/jfriend/folders/Jing/media/db75047d-c3d7-49bb-84c7-8f3bf21b2a2d/2009-10-11_2243.png)?

[SamirD]

Can you not see this image (http://content.screencast.com/users/jfriend/folders/Jing/media/db75047d-c3d7-49bb-84c7-8f3bf21b2a2d/2009-10-11_2243.png)?I see it now. I know it looks ugly, but once the code is in place, I can get a graphics designer to work on the overlay image to work better with the background images. The main thing I want to accomplish right now is the code. That's the hard part for me.

[jfriend]

I see it now. I know it looks ugly, but once the code is in place, I can get a graphics designer to work on the overlay image to work better with the background images. The main thing I want to accomplish right now is the code. That's the hard part for me. I just want to make sure we don't go to all this trouble and then you realize you don't like it. I've seen that before and I end up feeling like I wasted my time.

I don't know how to center the graphic vertically. Here's a new shell that centers it horizontally. FYI, I may not be online much the next few days.

<div id="myImageTableContainer">
<table id="myImageTable" align="center" border="0" cellpadding="6" cellspacing="1" width="100%"></table>
<div id="myUnderlayImageContainer">
<div id="myUnderlayImageCenter">
<img id="myUnderlayImage" src="http://www.huntsvillecarscene.com/events/HCSLOGO4.png" border="0">
</div>
</div>
</div>




/* FOR DYNAMIC HEADER LOGO */
#myImageTableContainer {position:relative; }
#myImageTable {z-index: -10;}
#myUnderlayImageContainer {position:absolute; top:0; left:0; z-index: 10; width: 100%; height: 100%;}
#myUnderlayImageCenter {width: 477px; height: 75px; margin: 0 auto;}

[SamirD]

I just want to make sure we don't go to all this trouble and then you realize you don't like it. I've seen that before and I end up feeling like I wasted my time.I definitely understand. I thought long and hard about a header before deciding on this concept. It's nice because of it's infinite number of combinations, always giving the user a different appearance. Obviously, it will need some cleaning up, but I think it will be really snazzy in the end. :thumb

I don't know how to center the graphic vertically. Here's a new shell that centers it horizontally. FYI, I may not be online much the next few days.

<div id="myImageTableContainer">
<table id="myImageTable" align="center" border="0" cellpadding="6" cellspacing="1" width="100%"></table>
<div id="myUnderlayImageContainer">
<div id="myUnderlayImageCenter">
<img id="myUnderlayImage" src="http://www.huntsvillecarscene.com/events/HCSLOGO4.png" border="0">
</div>
</div>
</div>




/* FOR DYNAMIC HEADER LOGO */
#myImageTableContainer {position:relative; }
#myImageTable {z-index: -10;}
#myUnderlayImageContainer {position:absolute; top:0; left:0; z-index: 10; width: 100%; height: 100%;}
#myUnderlayImageCenter {width: 477px; height: 75px; margin: 0 auto;}I'm not sure if this is a mistake or not, but does there need to be anything between "margin: 0" and "auto" in the last line? I'll try to code this later today and see what happens.

[jfriend]

I'm not sure if this is a mistake or not, but does there need to be anything between "margin: 0" and "auto" in the last line? I'll try to code this later today and see what happens. No.

[SamirD]

No.Thank you for the quick reply. I'll let you know how this goes. :thumb

[jfriend]

Thank you for the quick reply. I'll let you know how this goes. :thumb I will not be online much (if at all) the next couple of days.

[SamirD]

I will not be online much (if at all) the next couple of days.Thank you for the heads-up. I didn't have a chance to try to code this today, but I'll post here with results when I do.