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/mckinney_grills_rumsfeld.htm

--
Canadian Mind Products, Roedy Green.
See http://mindprod.com/iraq.html photos of Bush's war crimes

[Lauri Raittila]

Re: Clickable icon

in comp.infosystem s.www.authoring.stylesheets, Roedy Green wrote:[color=blue]
> 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>[/color]

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/buy-opera.html?AID=882173

[Roedy Green]

Re: Clickable icon

On Fri, 29 Apr 2005 01:07:24 +0200, Lauri Raittila
<lauri@raittila .cjb.net> wrote or quoted :
[color=blue][color=green]
>> <span class="photo">" images/roedy.jpg"</span>[/color]
>
>Why? Not possible.[/color]

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/mckinney_grills_rumsfeld.htm

--
Canadian Mind Products, Roedy Green.
See http://mindprod.com/iraq.html photos of Bush's war crimes

[David Dorward]

Re: Clickable icon

Roedy Green wrote:
[color=blue]
> 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>[/color]

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]

Re: Clickable icon

in comp.infosystem s.www.authoring.stylesheets, Roedy Green wrote:[color=blue]
> On Fri, 29 Apr 2005 01:07:24 +0200, Lauri Raittila
> <lauri@raittila .cjb.net> wrote or quoted :
>[color=green][color=darkred]
> >> <span class="photo">" images/roedy.jpg"</span>[/color]
> >
> >Why? Not possible.[/color]
>
> It would be easier to write and maintain.[/color]

Not good reason. Use preprosessing/makro in your editor.
[color=blue]
> 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.[/color]

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/buy-opera.html?AID=882173

[Roedy Green]

Re: Clickable icon

On Fri, 29 Apr 2005 07:45:45 +0100, David Dorward <dorward@yahoo. com>
wrote or quoted :
[color=blue]
>Not possible with CSS, but pretty trivial in most tempting systems.[/color]

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/mckinney_grills_rumsfeld.htm

--
Canadian Mind Products, Roedy Green.
See http://mindprod.com/iraq.html photos of Bush's war crimes

[Jón Fairbairn]

Re: Clickable icon

David Dorward <dorward@yahoo. com> writes:
[color=blue]
> Roedy Green wrote:
>[color=green]
> > 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>[/color]
>
> Not possible with CSS, but pretty trivial in most tempting systems.[/color]

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

--
Jón Fairbairn Jon.Fairbairn@c l.cam.ac.uk

[David Dorward]

Re: Clickable icon

Jón Fairbairn wrote:
[color=blue]
> David Dorward <dorward@yahoo. com> writes:[/color]
[color=blue][color=green]
>> Not possible with CSS, but pretty trivial in most tempting systems.[/color][/color]
[color=blue]
> But you don't say which systems are most tempting ;-)[/color]

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]

Re: Clickable icon

Roedy Green wrote:
[color=blue]
> 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?[/color]
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/