Clickable icon

[Roedy Green]

I want to set up links to photos marked with camera icon.

I would like it if I could replace code like this:

<a href="images/roedy.jpg"><img src="images/camera.gif" width="29"
height="24" border="0" alt="photo"></a>

With code like this:

<span class="photo">"images/roedy.jpg"</span>
How close can I get, and what does the .photo style sheet entry look
like?
Bush crime family lost/embezzled $3 trillion from Pentagon.
Complicit Bush-friendly media keeps mum.
http://www.infowars.com/articles/us/...s_rumsfeld.htm
--
Canadian Mind Products, Roedy Green.
See http://mindprod.com/iraq.html photos of Bush's war crimes

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Roedy Green wrote:

I want to set up links to photos marked with camera icon.

I would like it if I could replace code like this:

<a href="images/roedy.jpg"><img src="images/camera.gif" width="29"
height="24" border="0" alt="photo"></a>

With code like this:

<span class="photo">"images/roedy.jpg"</span>

Why? Not possible.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Roedy Green]

On Fri, 29 Apr 2005 01:07:24 +0200, Lauri Raittila
<la***@raittila.cjb.net> wrote or quoted :

<span class="photo">"images/roedy.jpg"</span>

Why? Not possible.

It would be easier to write and maintain. If not possible, can I do
something similar that is not quite that terse, where at least I don't
need the <img element for the camera.gif each time.
Bush crime family lost/embezzled $3 trillion from Pentagon.
Complicit Bush-friendly media keeps mum.
http://www.infowars.com/articles/us/...s_rumsfeld.htm
--
Canadian Mind Products, Roedy Green.
See http://mindprod.com/iraq.html photos of Bush's war crimes

[David Dorward]

Roedy Green wrote:

I would like it if I could replace code like this:

<a href="images/roedy.jpg"><img src="images/camera.gif" width="29"
height="24" border="0" alt="photo"></a>
With code like this:
<span class="photo">"images/roedy.jpg"</span>

Not possible with CSS, but pretty trivial in most tempting systems.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Roedy Green wrote:

On Fri, 29 Apr 2005 01:07:24 +0200, Lauri Raittila
<la***@raittila.cjb.net> wrote or quoted :

<span class="photo">"images/roedy.jpg"</span>
Why? Not possible.

It would be easier to write and maintain.

Not good reason. Use preprosessing/makro in your editor.
If not possible, can I do something similar that is not quite
that terse, where at least I don't need the <img element for
the camera.gif each time.

Depends. If you need it in inline context, it is not exactly simple...
URL?

[please use standard sig separator "-- " (note space)]

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Roedy Green]

On Fri, 29 Apr 2005 07:45:45 +0100, David Dorward <do*****@yahoo.com>
wrote or quoted :

Not possible with CSS, but pretty trivial in most tempting systems.

I wrote a macro to do it. It expands into the explicit image
reference.
Bush crime family lost/embezzled $3 trillion from Pentagon.
Complicit Bush-friendly media keeps mum.
http://www.infowars.com/articles/us/...s_rumsfeld.htm
--
Canadian Mind Products, Roedy Green.
See http://mindprod.com/iraq.html photos of Bush's war crimes

[Jón Fairbairn]

David Dorward <do*****@yahoo.com> writes:

Roedy Green wrote:

I would like it if I could replace code like this:

<a href="images/roedy.jpg"><img src="images/camera.gif" width="29"
height="24" border="0" alt="photo"></a>
With code like this:
<span class="photo">"images/roedy.jpg"</span>

Not possible with CSS, but pretty trivial in most tempting systems.

But you don't say which systems are most tempting ;-)

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

[David Dorward]

Jón Fairbairn wrote:

David Dorward <do*****@yahoo.com> writes:

Not possible with CSS, but pretty trivial in most tempting systems.

But you don't say which systems are most tempting ;-)

Never post to Usenet before fully waking up. "Templating"

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Benjamin Niemann]

Roedy Green wrote:

I want to set up links to photos marked with camera icon.

I would like it if I could replace code like this:

<a href="images/roedy.jpg"><img src="images/camera.gif" width="29"
height="24" border="0" alt="photo"></a>

With code like this:

<span class="photo">"images/roedy.jpg"</span>
How close can I get, and what does the .photo style sheet entry look
like?

There is no way to make a link without an <a> tag.

You could get rid of the <img> tag (assuming that it is the same icon for
all tags), by setting it as the links background-image in CSS. In order to
keep accessability, there should be some content in the <a> tag, like
<a class="photo" href="images/roedy.jpg">show photo</a>.

If the <a> can be styles as a block element (depends on your layout), than
you can get rid of the text completely by using an image replacement
technique, e.g.
..photo {
display: block;
text-indent: -2000em; /* move text far out of visible area */
background-image: url(images/camera.gif);
width: 16px; height: 16px;
}

If the <a> must be inline, you can at least add the icon to the text
..photo {
padding-left: 20px; /* add some space at the left for icon */
background-image: url(images/camera.gif);
background-repeat: no-repeat;
}
(I don't know, if you could hide the text completely for inline elements...
would text-indent work, too??)

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/