467,861 Members | 1,581 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,861 developers. It's quick & easy.

Linked, absolutely-positioned image with background effect?

Hello all,

I have a very wide image that I want positioned in the extreme top left
of the page. If the browser window is too narrow to contain the whole
thing, that's fine-- the image should just be cut off, with no
horizontal scrollbar. If the browser window is wider than the image,
then I'd like a gray region to the right of the image. (The right side
of the image fades to gray, so the image will look okay even if the
browser window is wider than the image.)

So far, so good. I have a solution for this that uses an absolutely-
positioned div with the image and gray as its background. The only
problem is that I would like to make this image into a link.

I tried nesting the image inside an absolutely-positioned h1, but the
wide image caused a horizontal scrollbar to appear. I set "width:
100%" on the image, but that just distorted it. In addition, this
approach does not accomplish the fade-to-gray I mentioned.

Can anyone think of a way to accomplish the visual things described
above while having the image be a link? Thanks for the help!

Jul 21 '05 #1
  • viewed: 2319
Share:
5 Replies
On 5 Feb 2005 10:23:14 -0800, Benjamin Esham <bd*****@gmail.com> wrote:
I have a very wide image that I want positioned in the extreme top left
of the page. If the browser window is too narrow to contain the whole
thing, that's fine-- the image should just be cut off, with no
horizontal scrollbar. If the browser window is wider than the image,
then I'd like a gray region to the right of the image. (The right side
of the image fades to gray, so the image will look okay even if the
browser window is wider than the image.)

So far, so good. I have a solution for this that uses an absolutely-
positioned div with the image and gray as its background. The only
problem is that I would like to make this image into a link.

I tried nesting the image inside an absolutely-positioned h1, but the
wide image caused a horizontal scrollbar to appear. I set "width:
100%" on the image, but that just distorted it. In addition, this
approach does not accomplish the fade-to-gray I mentioned.

Can anyone think of a way to accomplish the visual things described
above while having the image be a link? Thanks for the help!


You could simulate the image be a link: Position a div over the div containing
the image. Put an anchor on a transparant image in the first div.

<div class="img-container">&nbsp;</div>
<div class="link-container"><a href="foo.html"><img src="transparant.png" alt="
"></a></div>

..img-container, .link-container {
position:absolute;
width:100%;
height:100%;
padding:0;
border:0;
margin:0;
top:0;
left:0; }

..img-container {
z-index:1;
background:gray url(foo/bar.gif) top left no-repeat fixed; }

..link-container img {
width:100%;
height:100%; }

Ugly as hell, but might do the trick.
Not tested.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #2
On Sat, 05 Feb 2005 19:40:53 +0100, Barbara de Zoete <b_********@hotmail.com>
wrote:
On 5 Feb 2005 10:23:14 -0800, Benjamin Esham <bd*****@gmail.com> wrote:

<large, very large image, needs to be link>
You could simulate the image be a link: Position a div over the div containing
the image. Put an anchor on a transparant image in the first div.

<div class="img-container">&nbsp;</div>
<div class="link-container"><a href="foo.html"><img src="transparant.png"
alt=" "></a></div>


Well, come to think of it. Better idea is to put the large image as a background
for the div class="link-container". That way you need only one div. Silly me.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #3
> You could simulate the image be a link: Position a div over the div
containing the image. Put an anchor on a transparant image in the
first div.


This worked great-- thanks! One question, though: some browsers
(IE6?) don't support transparent PNGs. Will users be able to see the
background image if the transparent image displays incorrectly?
Setting the z-index looks like it might fix that, but if I only use
one div, setting the z-index won't have any effect.

In any case, I guess I could just use a transparent GIF. It might be
painful ideologically ;-), but if it gets the job done... whatever.

Thanks for your help!

Jul 21 '05 #4
On 5 Feb 2005 11:40:02 -0800, Benjamin Esham <bd*****@gmail.com> wrote:
You could simulate the image be a link: Position a div over the div
containing the image. Put an anchor on a transparant image in the
first div.
This worked great-- thanks! One question, though: some browsers
(IE6?) don't support transparent PNGs. Will users be able to see the
background image if the transparent image displays incorrectly?


True. Better use .gif (&deity; forbid) ;-)
Setting the z-index looks like it might fix that, but if I only use
one div, setting the z-index won't have any effect.

The z-index is not necessary. I put it in while typing, but seemingly changed my
mind already when typing the styles for the second div.

Using the one div is probably better any way.
In any case, I guess I could just use a transparent GIF. It might be
painful ideologically ;-), but if it gets the job done... whatever.

Like I said: 'Ugly as hell' ;-) So a gif couldn't spoil anything really.

Thanks for your help!


Welcome.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #5
Benjamin Esham wrote:
You could simulate the image be a link: Position a div over the div
containing the image. Put an anchor on a transparant image in the
first div.

This worked great-- thanks! One question, though: some browsers
(IE6?) don't support transparent PNGs. Will users be able to see the
background image if the transparent image displays incorrectly?
Setting the z-index looks like it might fix that, but if I only use
one div, setting the z-index won't have any effect.

In any case, I guess I could just use a transparent GIF. It might be
painful ideologically ;-), but if it gets the job done... whatever.

Thanks for your help!


an elegant java script to make png's transparent in IE

http://homepage.ntlworld.com/bobosola/index.htm
Jul 21 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Jeff Cheng | last post: by
16 posts views Thread by surender | last post: by
1 post views Thread by robert demo via AccessMonster.com | last post: by
33 posts views Thread by junky_fellow | last post: by
9 posts views Thread by Goh, Yong Kwang | last post: by
2 posts views Thread by Claire | last post: by
17 posts views Thread by darrell.blake | last post: by
36 posts views Thread by Martin Larsen | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.