powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / Java [игнор отключен] [закрыт для гостей] / Изменение image src средствами CSS без JavaScript'а
17 сообщений из 17, страница 1 из 1
Изменение image src средствами CSS без JavaScript'а
    #33672646
funikovyuri
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
есть
Код: plaintext
1.
<a href="..."><img src="go-off.gif" alt="go" width="45" height="25" name="btn-go" 
			style="vertical-align:middle;" onMouseOver="rollOver(this,'roll');" onMouseOut="rollOver(this,'off');"></a>


rollOver() заменяет src на нужную картинку. Вопрос, можно ли отказаться от JS и сделать смену изображения средствами CSS?


http://www.sql.ru/forum/actualthread.aspx?tid=283574
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33672657
ап
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
возможно
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673063
yelena
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<html>
<head>
<style>
a {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid # 000000 ;
  background: url('backgr.gif') top left no-repeat;
}

a:hover {
  background-position: right bottom;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673211
funikovyuri
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
yelena

круто. спасибо!
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673259
funikovyuri
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
yelena , а как добится отображения картинки на тойже строке что и предыдущий html-элемент? (в моем случае это select и картинка ссылки отображается на другой строке)

Я так понимаю это зависит от значения display? только вот для inline у меня вообще ничего не отображается...
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673265
Фотография ZS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
align=left|right или табличками
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673276
funikovyuri
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
таблички нельзя... align тут вроде не поможет
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673279
funikovyuri
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
оказывается с display:inline работает на IE 6 но не работает на FF1.5... во как!

а как это обойти?
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673299
Фотография ZS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
funikovyuriтаблички нельзя... align тут вроде не поможет

Поможет, он даст то, что у тебя картинка и остальное будут на одной строке, а не переноситься на следующую, можно использовать не только left или right, но и что-то вроде absmiddle и т.д.
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673348
yelena
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
я думаю, раз табличку нельзя, то позиционирование поможет

a {
position: absolute;
top: 10px;
left: 100px;
display: block;
width: 50px;
height: 50px;
border: 1px solid #000000;
background: url('backgr.gif') top left no-repeat;
}

координаты сами подберете

Если position: relative; с отрицательным смещением, то дырка останется размером с картинку
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673486
funikovyuri
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
yelena

спасибо, посмотрю... а вы не можете прокоментировать почему IE отображет display:inline нормально, а FF нет?
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673613
yelena
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Выдержки из стандарта CSS

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.).

Authors may specify the background of an element (i.e., its rendering surface) as either a color or an image. In terms of the box model, "background" refers to the background of the content, padding and border areas.

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas...

Если рассматривать <a></a> как inline-элемент, то там content area отсутствует, потому что текста или иллюстрации внутри <a></a> нет, а значит, и фона не будет.

FireFox отображает страничку в соответствии со стандартом, а IE нет.
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673676
funikovyuri
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Т.е. решить задачу в соответсвие со стандартом с помощью display:inline не удасться? Просто position:absolute мне кажется слишком сильным средством...
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673682
yelena
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
К тому же по стандарту CSS ширина и высота для inline-элементов не задаются:

'width'
Value: <length> | <percentage> | auto | inherit
Initial: auto
Applies to: all elements but non-replaced inline elements, table rows, and row groups
Inherited: no
Percentages: refer to width of containing block
Media: visual
Computed value: the percentage or 'auto' as specified or the absolute length; 'auto' if the property does not apply

This property specifies the content width of boxes generated by block-level and replaced elements.

This property does not apply to non-replaced inline-level elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children).

Так что нужно на FireFox ориентироваться в плане соответствия стандарту.
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673687
yelena
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
менее радикальное средство таблица, но вы сказали, что таблицу использовать нельзя
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673701
yelena
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
yelenaК тому же по стандарту CSS ширина и высота для inline-элементов не задаются:


Правильнее сказать, для non-replaced inline elements не задаются.
А ссылка как раз такой элемент.
Если бы <img>, то можно было бы задать.
...
Рейтинг: 0 / 0
Изменение image src средствами CSS без JavaScript'а
    #33673811
funikovyuri
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
yelena

ясно... еще раз спасибо!
...
Рейтинг: 0 / 0
17 сообщений из 17, страница 1 из 1
Форумы / Java [игнор отключен] [закрыт для гостей] / Изменение image src средствами CSS без JavaScript'а
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]