472,965 Members | 2,566 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,965 software developers and data experts.

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
5 2485
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Jeff Cheng | last post by:
Can anybody help to trace the runtime error for the following code about sub-Linked list. Thank you, # include <stdio.h> # include <stdlib.h> typedef char *CategoryType;
16
by: surender | last post by:
Hi, Let us think that we have 100 nodes in the single linked list. I have only 50th node address and i don't have the first node address but i want to print the 49th node data. So how can we print...
15
by: brettclare | last post by:
I have linked a large SQL Server table to Access, however 'only' 2,195,439 records are shown and are available to query. Can I increase the size (cache??)/number of records showing in Access? ...
1
by: robert demo via AccessMonster.com | last post by:
I'm trying to retrieve the connection string for a linked table in a backend that is password protected. I've modified the code shown below to temporarily check that the backend has been...
33
by: junky_fellow | last post by:
Consider a singly-linked list. Each node has a structure, struct node { char c; struct node *next; }; Each of the nodes contain an alphabetic character. Can anybody suggest a way to print...
9
by: Goh, Yong Kwang | last post by:
I'm currently doing a project that has a array that supposed to be determined only at runtime. Originally, the prototype I did as a proof of theory (or a quick hack) So one method is to create a...
2
by: Claire | last post by:
Is it safe to use linked lists of objects or is it likely that garbage collection will dump the nodes? thanks
17
by: darrell.blake | last post by:
I've just written a doubly linked list but when I tell the iterator to move forward in the list it removes all the previous elements in the list. i.e. If I were to do: List list; ...
36
by: Martin Larsen | last post by:
Hi, When a PHP program links to a library using include or require (or their _once variations), is the library then linked dynamically or statically? While it might seem irrelevant from a...
7
by: QiongZ | last post by:
Hi, I just recently started studying C++ and basically copied an example in the textbook into VS2008, but it doesn't compile. I tried to modify the code by eliminating all the templates then it...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.