Image hyperlinks using CSS on a background image - possible?

Imran

Hi,

I am attempting to create a CSS-driven website, in that I want to be
able to control the display/content from the CSS file. I do not want
to use tables.

On a page, I have a background image (that contains smaller images)
and I would like to assign the smaller images as hyperlinks.

What is the best way to do this? I know I can use an imagemap, but is
there a better way using CSS? Thanks in advance.

AIM

Jul 20 '05 #1

Stanimir Stamenkov

/Imran/:

On a page, I have a background image (that contains smaller images)
and I would like to assign the smaller images as hyperlinks.
Perhaps you're misusing the term 'background image'. While the style
sheet could declare a background image for a particular element, it
is meant for decorative purpose, only (it could live without it),
but like it seems your image has a functional and content role.
What is the best way to do this? I know I can use an imagemap, but is
there a better way using CSS? Thanks in advance.

The best way is just using "image map". Be sure to specify
alternative content for the image and more important to the AREA
elements of the MAP it uses:

<AREA alt="Home" ...
<AREA alt="Funny Things" ...
<AREA alt="More Stuff" ...

BTW, what aspects of the appearance of this functional image map you
expect to control through a style sheet? The image itself has a
pretty one way appearance.

--
Stanimir

Jul 20 '05 #2

Imran

Thanks for the quick response Stanimir.

I posted the request after briefly speaking to a friend in need, and I
totally got the wrong end of the stick.

What I/my friend actually require is the ability to include hyperlinks
(<a href...>) within an external stylesheet. For example, I want to
be able to declare an image in a stylesheet and set it as a hyperlink,
without the need for using <a href...> within the HTML source. Is
this possible? Thanks.

Regards,

AIM

Stanimir Stamenkov <s7****@netscape.net> wrote in message news:<c5*************@ID-207379.news.uni-berlin.de>...

/Imran/:

On a page, I have a background image (that contains smaller images)
and I would like to assign the smaller images as hyperlinks.

Perhaps you're misusing the term 'background image'. While the style
sheet could declare a background image for a particular element, it
is meant for decorative purpose, only (it could live without it),
but like it seems your image has a functional and content role.

What is the best way to do this? I know I can use an imagemap, but is
there a better way using CSS? Thanks in advance.

The best way is just using "image map". Be sure to specify
alternative content for the image and more important to the AREA
elements of the MAP it uses:

<AREA alt="Home" ...
<AREA alt="Funny Things" ...
<AREA alt="More Stuff" ...

BTW, what aspects of the appearance of this functional image map you
expect to control through a style sheet? The image itself has a
pretty one way appearance.

Jul 20 '05 #3

kchayka

Imran wrote:

For example, I want to
be able to declare an image in a stylesheet and set it as a hyperlink,
without the need for using <a href...> within the HTML source. Is
this possible?

No. Except in rare cases, CSS is only for presentation, not content. A
hyperlink is content. You can change the appearance of the hyperlink
using CSS, or hide it altogether, but that's about it.

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Jul 20 '05 #4

Eric Bohlman

ai*@datawright.co.uk (Imran) wrote in
news:18**************************@posting.google.c om:

Hi,

I am attempting to create a CSS-driven website, in that I want to be
able to control the display/content from the CSS file. I do not want
to use tables.
If you mean "don't want to use tables for purely layout purposes" then
you're on the right track. But don't hesitate to use tables for genuinely
tabular data (the situation where you have one or more "objects" with two
or more "properties"); they are the correct semantic construct for marking
up such data.

On a page, I have a background image (that contains smaller images)
and I would like to assign the smaller images as hyperlinks.

What is the best way to do this? I know I can use an imagemap, but is
there a better way using CSS? Thanks in advance.

Use an imagemap (assuming the images in question are genuine pictures, not
just text pre-rendered as images). CSS styling is, by design, supposed to
be *optional*; a page should be *functional*, if rather plain or even ugly,
without any styling. Since navigation is an essential function of a page,
it shouldn't depend on optional features.

Jul 20 '05 #5

Jan Roland Eriksson

On 8 Apr 2004 12:00:10 -0700, ai*@datawright.co.uk (Imran) wrote:

What I/my friend actually require is the ability to include hyperlinks
(<a href...>) within an external stylesheet...

As CSS generated content, right?

Note the fact that search engines on the www do not care about CSS, so
your site would never end up being properly indexed.

You do want your creation to stand a chance to be found by someone else
who is looking for it, right?

CSS is an optional thing, the content of any and all web page shall be
accessible even to those who chose to only access your elements content.
It's not your problem if such a "viewer" gets your info in an ugly
presentation as long as it is made available in a fully readable way.

--
Rex

Jul 20 '05 #6

Karl Smith

ai*@datawright.co.uk (Imran) wrote:

What I/my friend actually require is the ability to include hyperlinks
(<a href...>) within an external stylesheet. For example, I want to
be able to declare an image in a stylesheet and set it as a hyperlink,
without the need for using <a href...> within the HTML source. Is
this possible? Thanks.

Unfortunately, no. The situation is very political.
The best you will get is using:

<a id="oz" href="oz.xml">&nbsp;</a>

#oz {
background-image: dorothy.jpg;
width: ;
height: ;}

But you are wishing for:

<anyElementType id="oz"/>

#oz {
background-image: dorothy.jpg;
linkto: oz.xml;
width: ;
height: ;}

Aren't you?

The W3C realize that if linking is controlled by CSS (which it should
be, since almost all other aspects of implementation are), XML will
become useful in mainstream websites and they will lose control of
defining markup "standards". That is, the scope of W3C's mandate will
be reduced to CSS and *only* CSS. The "pointy brackets for everything"
crowd put a fair amount of effort into arguing against the
implementation of "CLINK", while pushing their XLINK enigma.

They also disliked CSS when it started and said it would be only one
of a number of stylesheet languages. Ask a question about XSL here,
and see how much interest there is in trying to write stylesheets with
pointy brackets.

--
Karl Smith.

Jul 20 '05 #7

Stanimir Stamenkov

/Karl Smith/:

The W3C realize that if linking is controlled by CSS...

Like Jan Roland Eriksson wrote in another message: In theory one
could control it by CSS using "generated content":

<element id="one"/>
<element id="two"/>
<element id="three"/>

and the CSS:

element[id=one]:before {
content: url(one.html);
}

element[id=two]:before {
content: url(two.html);
}

element[id=three]:before {
content: url(three.html);
}

and that doesn't mix with the statement/fact: "Style sheets are
presentational hints, only" where the main document content should
include everything it needs to serve its purpose in the absence of
the style sheet or where the style sheet language's not supported.

So, if one want hyper-link functionality in the main (content)
document he should include it there and not tricking with style
sheets. Moreover the hyper-link elements have content which would be
"lost" if generated only in the visual rendering. As far as I
understand you insist on using style sheets to enhance the document
language functionality where such mixing is not appropriate -
there's no such thing as "All-in-one" solution, but there are
smaller components with clear functional assignment.

--
Stanimir

Jul 20 '05 #8

Stanimir Stamenkov

/Karl Smith/:

The W3C realize that if linking is controlled by CSS...

Like Jan Roland Eriksson wrote in another message: In theory one
could control it by CSS using "generated content":

<element id="one"/>
<element id="two"/>
<element id="three"/>

and the CSS:

element[id=one]:before {
content: url(one.html);
}

element[id=two]:before {
content: url(two.html);
}

element[id=three]:before {
content: url(three.html);
}

and that doesn't mix with the statement/fact: "Style sheets are
presentational hints, only" where the main document content should
include everything it needs to serve its purpose in the absence of
the style sheet or where the style sheet language's not supported.

So, if one want hyper-link functionality in the main (content)
document he should include it there and not tricking with style
sheets. Moreover the hyper-link elements have content which would be
"lost" if generated only in the visual rendering. As far as I
understand you insist on using style sheets to enhance the document
language functionality where such mixing is not appropriate -
there's no such thing as "All-in-one" solution, but there are
smaller components with clear functional assignment.

--
Stanimir

Jul 20 '05 #9

Christoph Paeper

*Karl Smith* <go************@kjsmith.com>:

Unfortunately, no. The situation is very political.

<anyElementType id="oz"/>

#oz {
background-image: dorothy.jpg;
linkto: oz.xml;
That would be an appropriate approach in a very limited number of cases,
probably none, because link targets are content. Extensions to CSS for the
description of hyperlinking mechanisms (and behaviours) like

<anyElementType id="oz" link="oz.xml"/>

#oz {
background-image: dorothy.jpg;
link-to: attr("link", URL);}

are more likely to happen.
They also disliked CSS when it started and said it would be only one
of a number of stylesheet languages.
It is: DSSSL, JSSS...
Ask a question about XSL here, and see how much interest there is in
trying to write stylesheets with pointy brackets.

Sadly XSL has a lot of influence in the designing process of CSS, because
the W3C tries to harmonize their vocabularies (and SVG's) as much as
possible. Therefore XSL inherits some very ill keywords to CSS (3).

--
A bus station is where a bus stops,
a train station is where a train stops,
on my desk I have a work station...

Jul 20 '05 #10

Christoph Paeper

*Karl Smith* <go************@kjsmith.com>:

Unfortunately, no. The situation is very political.

<anyElementType id="oz"/>

#oz {
background-image: dorothy.jpg;
linkto: oz.xml;
That would be an appropriate approach in a very limited number of cases,
probably none, because link targets are content. Extensions to CSS for the
description of hyperlinking mechanisms (and behaviours) like

<anyElementType id="oz" link="oz.xml"/>

#oz {
background-image: dorothy.jpg;
link-to: attr("link", URL);}

are more likely to happen.
They also disliked CSS when it started and said it would be only one
of a number of stylesheet languages.
It is: DSSSL, JSSS...
Ask a question about XSL here, and see how much interest there is in
trying to write stylesheets with pointy brackets.

Sadly XSL has a lot of influence in the designing process of CSS, because
the W3C tries to harmonize their vocabularies (and SVG's) as much as
possible. Therefore XSL inherits some very ill keywords to CSS (3).

--
A bus station is where a bus stops,
a train station is where a train stops,
on my desk I have a work station...

Jul 20 '05 #11