Неточности и дополнения!

[VDV_forever]

Думаю, что намного лучше будет, если пиктограммы выделить в отдельную колонку и разместить их там вертикально, одну под другой
Размер можно сделать средний.

[Владимир]

Есть ли способ писать вот это как-нибудь покороче?

Код: Выделить всё

<img src="http://handbookhmm.ru/wp-content/uploads/2017/08/coy.png" alt="" title="жёлтый - компьютер"/><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/necromancer.png" alt="" title="Necromancer"/>

я бы с удовольствием вообще писал это примерно как

Код: Выделить всё

<*tagname* class="coy"><*tagname* class="necromancer">

Можно ссылку сократить, как в файловой системе. Зависит от того, где файл с этим кодом лежит. Можно опустить alt. Но по стандарту не рекомендуется.

Цитата:

я бы с удовольствием вообще писал это примерно как

Так можно сделать с помощью CSS. Но всё равно в CSS придётся прописывать ссылку.

Хотя я понял, о чём ты. Если одинаковых картинок много, то это действительно может уменьшить размер. Например, так:

В html:

Код: Выделить всё

<img class="coy" />

В css:

Код: Выделить всё

.coy {
    content: url("относительный путь к картинке");
}

Ещё можно попробовать использовать селектор. Но не знаю, будет ли такое работать

html:

Код: Выделить всё

<img title="тайтл" />

css:

Код: Выделить всё

img[title="тайтл"] {
    content: url("относительный путь к картинке");
}

Нужно тестить.

[VDV_forever]

Владимир писал(а):

Есть ли способ писать вот это как-нибудь покороче?

Код: Выделить всё

<img src="http://handbookhmm.ru/wp-content/uploads/2017/08/coy.png" alt="" title="жёлтый - компьютер"/><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/necromancer.png" alt="" title="Necromancer"/>

я бы с удовольствием вообще писал это примерно как

Код: Выделить всё

<*tagname* class="coy"><*tagname* class="necromancer">

А смысл делать короче, Владимир? Я бы не заморачивался

[Владимир]

VDV_forever писал(а):

А смысл делать короче, Владимир? Я бы не заморачивался

Потому что сейчас описание одной карты выглядит вот так:

Код: Выделить всё

<tr>
  <td align="center"><b>3</b></td>
  <td align="center"><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/Slugfest.gif" alt="Slugfest" width="144" height="144" border="0"></td>
  <td align="center"><table border=0><tr><td align=center><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/standardwin.png" alt="" /> <img src="http://handbookhmm.ru/wp-content/uploads/2017/08/standardlose.png" alt="" /></td></tr>
<tr><td><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/cohb.png" alt="" /><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/knight.png" alt="" /></td></tr>
<tr><td><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/cohg.png" alt="" /><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/barbarian.png" alt="" /></td></tr>
<tr><td><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/cohr.png" alt="" /><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/sorceress.png" alt="" /></td></tr>
<tr><td><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/cohy.png" alt="" /><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/wizard.png" alt="" /></td></tr>
<tr><td><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/coho.png" alt="" /><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/warlock.png" alt="" /></td></tr>
<tr><td><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/cohp.png" alt="" /><img src="http://handbookhmm.ru/wp-content/uploads/2017/08/necromancer.png" alt="" /></td></tr>
  </table></td>
  <td align="center" valign="top"><strong>Slugfest</strong><br>Six heroes with large armies prepare to slug it out for total domination!<hr><strong>Жаркая битва</strong><br>Шесть героев с огромными войсками сражаются друг с другом за власть.</td>
</tr>

Это не финальная версия оформления раздела. И здесь нет title для картинок. Который для одних и тех же картинок всегда будет одинаковый, но сейчас его нужно писать вручную.

Короче, немного потестировал. content работает нормально в Chrome. В Firefox не завелось. Немного погуглил и нашёл такой вариант, который заработал и в Firefox:

html:

Код: Выделить всё

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
      <img class="griffin" />
   </body>
</html>

css:

Код: Выделить всё

.griffin::after {
   content: url("griffin.bmp");
}

* * *
Проверил вариант с title. По-моему, самый удобный:

html:

Код: Выделить всё

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <img title="Грифон" /> <img title="Зелёный дракон" />
   </body>
</html>

css:

Код: Выделить всё

img[title="Грифон"]::after {
   content: url("griffin.bmp");
}

img[title="Зелёный дракон"]::after {
   content: url("greendragon.bmp");
}

[Владимир]

Если написать оба варианта - работать будет во всём, проверил.
Как теперь сделать title'ы?

Ответил выше.

Цитата:

Если написать оба варианта - работать будет во всём, проверил.

У меня без ::after в Firefox не работает.

[Владимир]

Попытка очередная... Маленькие карты готовы полностью.
От стилей в итоге отказался. Не нравится, что тогда получившиеся объекты воспринимаются страницей не совсем как картинки. Например, контекстное меню у них не картиночное.