как заставить изображение действовать как ссылка без javascript

#xhtml #tags #hyperlink #image

#xhtml #Теги #гиперссылка #изображение

Вопрос:

каково наилучшее решение для того, чтобы ссылка содержала как текст, так и изображение, и решение по-прежнему будет проверяться w3c в соответствии с XHTML 1.0 STRICT? И без javascript.

Ответ №1:

Используйте CSS, во-первых, javascript не нужен.

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

1. на самом деле, мне действительно нравится ваше. Это понятно и без html. На самом деле, изображение в данном случае предназначено только для «стиля» и оформления. Отличное решение!

2. Честно говоря, это супер отличное решение, демонстрирующее мощь css и полностью прошедшее строгую проверку xhtml 1.0, и я некоторое время пытался найти обходной путь с этим, лол .. спасибо.

3. 🙂 css действительно очень мощный, все, что вам нужно сделать, это найти свой способ обойти его и проявить творческий подход. поскольку я вижу здесь ваше новое предложение, вы можете пометить один из ответов как принятый, если он вас устраивает, слева под параметром upvote-downvote есть значок галочки: P

4. Технически это не семантически корректно, поскольку изображение является не фоновым, а встроенным изображением, и поэтому решение corroded на самом деле правильное.

5. нет, вы неверны, мне все равно, имеет ли само изображение поведение, мне просто нужно, чтобы оно выглядело так, как будто оно «интерактивно».

Ответ №2:

Я бы обернул ссылку (якорь) вокруг div и придал div фоновое изображение с использованием CSS. Внутри DIV добавьте интервал, содержащий текст, и установите стиль «margin» для диапазона, чтобы выровнять текст по вкусу.

По сути, тестовый ТЕКСТ будет выглядеть наложенным на изображение.

Надеюсь, это поможет.

Ответ №3:

вы пробовали читать черезhttp://htmldog.com /? Обычно это показывает, как использовать базовый HTML

 <a href="link.html">
  TEXT HERE
  <img src="imageurl.jpg" width="100" height="100" alt="TEXT HERE FOR ALT" />
</a>