putting an image link into the CSS

[Cartoper]

I want to move the image for a link from the HTML to the CSS, but
cannot figure out how to do it. Here is the old HTML:

<a href="somewhere.html"><img src="anImage.gif"/></a>

The image is 18x48

[Chris F.A. Johnson]

On 2007-09-22, Cartoper wrote:

I want to move the image for a link from the HTML to the CSS, but
cannot figure out how to do it.

CSS is for presentation, not content. You cannot do it with CSS
unless you want it to be a background image.

Here is the old HTML:

<a href="somewhere.html"><img src="anImage.gif"/></a>

The image is 18x48

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[Cartoper]

On Sep 22, 7:30 pm, "Chris F.A. Johnson" <[e-mail]:

>
CSS is for presentation, not content. You cannot do it with CSS
unless you want it to be a background image.

Exactly, I am trying to figure out how to make it the background image
of the link. What I am trying to do is move all the presentation
formatting to the CSS, including the images. The ultimate objective
is to be able to change the CSS file and change the whole theming of
the site.

[dorayme]

In article
<11**********************@r29g2000hsg.googlegroups .com>,
Cartoper <ca******@gmail.comwrote:

On Sep 22, 7:30 pm, "Chris F.A. Johnson" <[e-mail]:

CSS is for presentation, not content. You cannot do it with CSS
unless you want it to be a background image.

Exactly, I am trying to figure out how to make it the background image
of the link. What I am trying to do is move all the presentation
formatting to the CSS, including the images. The ultimate objective
is to be able to change the CSS file and change the whole theming of
the site.

If your images are just for decoration, and you want them to be
background, then that is simple enough, the image will fit in the
element if the latter is dimensioned sufficiently. Something
like:

background: #fffcdf url("pics/montageStrip50.jpg");

But your initial desire to making the image a link will have to
be modified to wanting to make some other content of the element
a link. You will find it not easy to make the whole area taken up
by the background a link without playing tricks and having it
work well cross browser. But someone may have a simple answer for
you? I say, put in the pic as foreground and make it a link if it
is meaningfully something that people will understand. Or leave
images as background but make other provisions that people will
understand as meaningfully a link (like some text).

--
dorayme

[Thomas 'PointedEars' Lahn]

Cartoper wrote:

On Sep 22, 7:30 pm, "Chris F.A. Johnson" <[e-mail]:

> CSS is for presentation, not content. You cannot do it with CSS
unless you want it to be a background image.

Exactly, I am trying to figure out how to make it the background image
of the link. What I am trying to do is move all the presentation
formatting to the CSS, including the images. The ultimate objective
is to be able to change the CSS file and change the whole theming of
the site.

Wrong approach.

Your `img' element requires an (here: non-empty) `alt' attribute value in
either case, for validity and accessibility. Which clearly indicates that
an image that is the content of an a[href] element is not presentational, it
is content. You will have to replace that content with something else if
you use a background image, because otherwise that link will no longer be
accessible for people and ignored by search engines. (There is no way to
specify a textual alternative for background images.)

But if you use text and a background image, it is likely that you will run
into accessibility issues in the case CSS is supported and the
"presentational" background image can be perceived by the user (e.g. bad
contrast and scaled fonts).

And if you put the text into the image and make the content transparent to
avoid that, it is not unlikely that this will be (mis)recognized by search
engines as an attempt to trick them, therefore being ignored as well and
your site maybe blacklisted.

So you you better stick with the `img' element, and provide the `alt'
attribute. And if theming is an issue, there is server-side scripting.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[Bergamot]

Thomas 'PointedEars' Lahn wrote:

>
But if you use text and a background image, it is likely that you will run
into accessibility issues in the case CSS is supported and the
"presentational" background image can be perceived by the user (e.g. bad
contrast and scaled fonts).

?

If you mean the text is in the background image, then that can most
definitely be a problem.

However, plain text links styled with a background image can be very
accessible, providing they are done correctly. A patterned bg can
certainly pose a readability problem, but common effects like drop
shadows are not. Look up 'CSS sliding doors' for example.

And if you put the text into the image and make the content transparent

Are you referring to image replacement? That's the common term for
hiding foreground text with background images via various CSS
techniques. IR was originally developed strictly to benefit search
engines and pretty much all methods have some kind of accessibility problem.

it is not unlikely that this will be (mis)recognized by search
engines as an attempt to trick them, therefore being ignored as well and
your site maybe blacklisted.

I wouldn't go that far, though keyword spamming may get you blacklisted
no matter how you do it.

So you you better stick with the `img' element, and provide the `alt'
attribute.

I think it really depends on the context, which the OP hasn't provided.

--
Berg

[Andy Dingley]

On 23 Sep, 00:05, Cartoper <[e-mail]:

I want to move the image for a link from the HTML to the CSS, but
cannot figure out how to do it.

Don't. CSS only does "background" images, and that's probably not what
you want.

Use an <imgtag, same as you always did. CSS doesn't have a direct
equivalent for this.

[Bergamot]

Thomas 'PointedEars' Lahn wrote:

>
the `a' element contained nothing else but
the `img' element, the `img' element has to refer to a graphic providing
information about the purpose of the link.

such an image would still not be presentational (it has
*meaning*), and so CSS would be the wrong approach.

Actually, the alt text to go with that image would have meaning, not
necessarily the image itself. Seems to me the whole purpose of the OP's
inquiry was to be able to style the link independently of its content
(which is probably the alt text, not the graphic), and is *exactly* the
right job for CSS.

Such a change often requires thinking about the content differently than
the old-school way supplied by the OP. You're intentions on this subject
may be in the right place, but your advice is too narrow-minded. Look at
the problem from a different angle and you'll see more possibilities.

--
Berg

[Jon Fairbairn]

Andy Dingley <di*****@codesmiths.comwrites:

On 23 Sep, 00:05, Cartoper <[e-mail]:

>I want to move the image for a link from the HTML to the CSS, but
cannot figure out how to do it.

Don't. CSS only does "background" images,

Not /only/ background images:

<style>
a#muddy-the-waters:before
{ content: url("mud.png");
}
</style>

Cross-browser operation? Pardon, what was that? I heard the
"cross" bit...

--
Jón Fairbairn Jo***********@cl.cam.ac.uk

[Thomas 'PointedEars' Lahn]

Bergamot wrote:

Thomas 'PointedEars' Lahn wrote:

>the `a' element contained nothing else but the `img' element, the `img'
element has to refer to a graphic providing information about the purpose
of the link.

such an image would still not be presentational (it has
*meaning*), and so CSS would be the wrong approach.

Actually, the alt text to go with that image would have meaning, not
necessarily the image itself.

If the image would be the only content of the `a' element as the OP stated,
the image would not be presentational, period.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann