Clickable icon

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Roedy Green - 28 Apr 2005 23:40 GMT

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:

"images/roedy.jpg"

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

Signature

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

Reply to this Message

Lauri Raittila - 29 Apr 2005 00:07 GMT

> I want to set up links to photos marked with camera icon.
>
[quoted text clipped - 6 lines]
>
> "images/roedy.jpg"

Why? Not possible.

Signature

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

Reply to this Message

Roedy Green - 29 Apr 2005 00:43 GMT

>> "images/roedy.jpg"
>
>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/mckinney_grills_rumsfeld.htm

Signature

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

Reply to this Message

Lauri Raittila - 29 Apr 2005 09:34 GMT

> >> "images/roedy.jpg"
> >
> >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)]

Signature

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

Reply to this Message

David Dorward - 29 Apr 2005 07:45 GMT

> 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:
> "images/roedy.jpg"

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

Signature

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

Reply to this Message

Roedy Green - 29 Apr 2005 10:34 GMT

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

Signature

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

Reply to this Message

Jón Fairbairn - 29 Apr 2005 10:38 GMT

> > I would like it if I could replace code like this:
> >
[quoted text clipped - 4 lines]
>
> Not possible with CSS, but pretty trivial in most tempting systems.

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

Signature

Jón Fairbairn Jon.Fairbairn@cl.cam.ac.uk

Reply to this Message

David Dorward - 29 Apr 2005 19:17 GMT

>> 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"

Signature

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

Reply to this Message

Benjamin Niemann - 29 Apr 2005 21:10 GMT

> I want to set up links to photos marked with camera icon.
>
[quoted text clipped - 9 lines]
> 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??)

Signature

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / April 2005

Clickable icon