Stylesheets - Re: Superimposing one image on anouther

Author

Re: Superimposing one image on anouther

Mike

2007-04-09, 6:19 pm

On Apr 8, 12:47 pm, "-Lost" <missed-s...@comcast.net> wrote:
> <ampel...@XXXXXXXXXX> wrote in message
>
> news:1176033824.069623.21170@n59g2000hsh.googlegroups.com...
>
>
> Sounds like a job for DHTML. That is, CSS and JavaScript. To be honest, that could be
> done with :hover in CSS (remember Internet Explorer only likes :hover on links).
>
> <a href="">
> <img src="" />
> <span>superimposed</span>
> </a>
>
> a span { display: none; }
> a:hover span
> {
> display: block;
> position: absolute;
> top: 100px; // or whatever positions your "superimposed" layer better
> left: 100px; // or same as above
>
> }
>
> For further CSS assistance you can try this group:
> comp.infosystems.www.authoring.stylesheets
>
> If you need further JavaScript assistance, post back.
>
> -Lost

So far so good. Id like to have the upper left corner of my main image
be my 0(zero) point so no mater where the main image moves the top
image will move relative to it.Is this easy?
Any suggestions?
Thanks
Mike

Ben C

2007-04-09, 6:19 pm

On 2007-04-09, Mike <ampeloso@XXXXXXXXXX> wrote:
> On Apr 8, 12:47 pm, "-Lost" <missed-s...@comcast.net> wrote:
>
> So far so good. Id like to have the upper left corner of my main image
> be my 0(zero) point so no mater where the main image moves the top
> image will move relative to it.Is this easy?
> Any suggestions?

Yes just make the main image position: relative so it becomes the
containing block for (and therefore also provides the origin for) the
superimposed one.

-Lost

2007-04-09, 6:19 pm

"Mike" <ampeloso@XXXXXXXXXX> wrote in message
news:1176136672.519503.246970@d57g2000hsg.googlegroups.com...
> On Apr 8, 12:47 pm, "-Lost" <missed-s...@comcast.net> wrote:
>
> So far so good. Id like to have the upper left corner of my main image
> be my 0(zero) point so no mater where the main image moves the top
> image will move relative to it.Is this easy?
> Any suggestions?
> Thanks

http://devguru.com/technologies/css2/8124.asp

See "relative." This still seems like a purely CSS question to me.

-Lost

OrigMacBabe

2007-04-17, 11:39 pm

quote:
Originally posted by -Lost
"Mike" <ampeloso@XXXXXXXXXX> wrote in message
news:1176136672.519503.246970@d57g2000hsg.googlegroups.com...[color=darkred]
> This still seems like a purely CSS question to me.

Yes, this is a purely CSS question ... but I still hope you can help ...

I am having a similar issue, but slightly different.

I am trying to superimpose an image over a section of the image in the background of a <div> I would like to image to act as a hotspot similar to an imagemap .

The <div id="header"> is centered on the page wrt to window size and is positioned 15px from the top of the window. It houses a background image (HeaderImage)

I have created another image that is a subsection (or slice) of the background image that is twice the height of the <div id="header">, transparent on one end with the image to be superimposed on the other (OverlayImage). The plan is to leave the transparent part of the image as the a:link state and change its positioning to reveal the superimposed image in the a:hover state. (simlar to the way the logo on subcide.com works or many rocker-style menus work.)

On subcide.com, he achieves this simply because the site is a fixed with, and he styled the <h1> element to contain his desired logo.

I have tried making the original <div> positioned relatively, but this required changing the positioning of every other element that follows it on the page. Even with this, I have been unable to have the superimposed image vary with the original image when the page is resized.

The original <div> is the header and I don't want the entire div to be a link, just the one section.

I can't help but feel that I am missing a simple solution.

I have been completely unable to achieve either of my goals.

1. Is there a way to have the overlay image aligned properly to the image in the background of the header, even when the window is resized?

Can I make the header image an imagemap if it is held in the background? If not, can I still have it positioned in the center of the window when resized without using it as a background image, so I can simply create the imagemap I desire (where the new/superimposed image appears on hover over the specific area of the image)

2. If no solution appears that will allow the desired effect and I must create a fixed image in the header, can someone please point me to a better instruction on repositioning an image on hover because I have been unable to achieve this effect.

Thank you

OMB

OrigMacBabe

2007-04-19, 2:03 am

Yes, I was indeed missing a simple solution ... incredibly simple!

With no responses I was left to just figure it out on my own. Once I returned to looking at the math instead of the code, it all became obvious.

I created three divs, all floated right in the header:

The first div, aligned to the right wall is set to width: 50%.

The second, aligned to the left edge of the first, has its width set to the offset in pixels from the center of the background image to the right edge of the overlay image.

The third div is aligned to the left edge of the second, has its width set to the width of the overlay image, and contains a link, whose background is the overlay image set to view the transparent end of the overlay image in the normal state, and repositioned to reveal the overlay image on a:hover.

For those who want to know!