0

what is the best solution to having a link have both text and and image, and the solution will still be w3c validated under XHTML 1.0 STRICT? And w/o javascript.

dave
  • 401
  • 2
  • 6
  • 10

3 Answers3

1

have you tried reading through http://htmldog.com/? That usually shows how to use basic HTML

<a href="link.html">
  TEXT HERE
  <img src="imageurl.jpg" width="100" height="100" alt="TEXT HERE FOR ALT" />
</a>
corroded
  • 21,406
  • 19
  • 83
  • 132
1

Use CSS, no need for javascript in the first place.

<a href="#" class="image">Hello</a>

<style>
    .image {
       padding-left: 20px; // width of image
       background: url(image.jpg) no-repeat scroll left center;
       height: 20px; // height of image
       line-height: 20px; //height of image
       // other rules that you need  
    }
</style>
Claudiu
  • 3,261
  • 1
  • 15
  • 27
  • actually, i really like yours. It's clear and no html. As a matter of fact, the image in this case is just for "style" and decoration. Great solution! – dave May 26 '11 at 03:56
  • Honestly, this is a super great solution, shows the power of css and fully xhtml 1.0 strict validated, and i've been trying to figure a work around with this for a while lol..thanks. – dave May 26 '11 at 04:18
  • :) css is very powerfull indeed, all you need to do is find your way around it and get creative. as i see your new around here, you can mark one of the answers as accepted if your satisfied with it, there's a tick icon below the upvote-downvote option on the left :P – Claudiu May 26 '11 at 04:21
  • This is technically not semantically correct, as the image isn't a background image, but an inline image, and so corroded's solution is actually correct. – Kevin Ji May 26 '11 at 19:05
  • no your incorrect, i don't care if the image itself has behavior, i just need it to appear as if it's "clickable". – dave May 26 '11 at 20:34
  • @mc10 technically semantically correct? i've been working in the field for about 4/5 years and i can't understand that, care to explain? – Claudiu May 26 '11 at 22:01
  • It depends, but usually, if the image is has an important semantic meaning within the page itself, using an image provides the best compatibility between users. See also: [When to use IMG vs. CSS background-image?](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) – Kevin Ji May 27 '11 at 21:40
  • It's a link really. When someone wants an image and a text it's usually an icon / small image, but you want to have the link and link text, that's important. You wouldn't ask for a link on a 1000sq px and 4 words, would you? And by the way, I was being ironic, I know what you meant, I just think you're using words that you don't really understand. COmpatibility between users? Seriously, I don't just post stuff for fun. – Claudiu May 28 '11 at 00:00
1

I would wrap the link (anchor) around a div, and give the div a background image w CSS. The within the DIV add a span containing the text and set "margin" style on the span to align the text to taste.

Essentially test TEXT will look superimposed on the image.

Hope this helps.

Glenn Ferrie
  • 10,290
  • 3
  • 42
  • 73