473,320 Members | 1,969 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Image hyperlinks using CSS on a background image - possible?

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
10 15664
/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
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
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
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
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
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
/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
/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
*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
*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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Paul | last post by:
Hi, Is it possible using JavaScript to write text over an image? I know this would be possible by using a HTML table and using the image as a background but this is undesired. Also, an image map...
6
by: Marek Mänd | last post by:
Can the <button><img></button> mutated via CSS so, that the inner image of <BUTTON> would entirely visually become the button itsself - I mean without the outer elements borders and so... ...
3
by: MediaDesign | last post by:
so there's the problem: my text links have background images and when I put links around images on my page, they too get the background image treatment which I do not...I have tried several...
4
by: Seefor | last post by:
Hi, I want my text hyperlinks to have a dotted border underneath, so I did this which works fine: a, a:link, a:visited, a:hover, a:active { color: #000; text-decoration: none;
8
by: Cardman | last post by:
I am hopeful that someone can quickly solve my image alignment issue when things are just not going right and where my attempts to solve this alignment issue have all failed. First of all take a...
0
by: Siva | last post by:
Hi, I am designing a page in asp.net. I am facing problem with placing the image box and the hyperlinks inside the panels. I am not able to align / place it inside the panel. My page contains...
24
by: TC | last post by:
Hi folks I want to enhance my website to distinguish "external" hyperlinks from "internal" ones. With that aim, I've written the following two small files for testing purposes: ...
1
by: Viken Karaguesian | last post by:
Hello everyone, I have a slight problem that I can't seem to solve. I'm not sure if it's a CSS problem, HTML problem or simply an IE-6 bug. I chose this forum as I suspect the fix may be with...
1
by: gnewsgroup | last post by:
I have a user control called Footer.ascx, in which a background image is inserted like so: <div id="footerdiv" style="background-image:url('Images/ mybackground.jpg');...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.