Re[2]: не рисует type=image - Продукты TerraInformatica

Собственно, главный вопрос даже не в этом.

Как бы сделать такой стиль, чтобы в обычном состоянии в элементе рисовалось одно изображение, в :hover — другое, в :active — третье? Причём, чтобы файлы с изображениями задавались не в описании стиля, как сделано, скажем, в сэмпловом colorpopup.htm, а для каждого элемента отдельно.

Здравствуйте, BlaineMono, Вы писали:

BM>Собственно, главный вопрос даже не в этом.

BM>Как бы сделать такой стиль, чтобы в обычном состоянии в элементе рисовалось одно изображение, в :hover — другое, в :active — третье? Причём, чтобы файлы с изображениями задавались не в описании стиля, как сделано, скажем, в сэмпловом colorpopup.htm, а для каждого элемента отдельно.

Стили вполне подходят для решения вопроса
См. background-image + foreground-image

#my-element1
{ foreground-image: url(me1.png) }
#my-element1:hover
{ foreground-image: url(me1-hover.png) }
#my-element1:active
{ foreground-image: url(me1-active.png) }

Когда-то давно, когда начинал разбираться с HTMLayout, похожим образом сляпал свои чекбоксы. Получилась редкостная гадость

Здравствуйте, ShaggyOwl, Вы писали:

SO>Стили вполне подходят для решения вопроса
SO>См. background-image + foreground-image
SO>

SO>#my-element1
SO>{ foreground-image: url(me1.png) }
SO>#my-element1:hover
SO>{ foreground-image: url(me1-hover.png) }
SO>#my-element1:active
SO>{ foreground-image: url(me1-active.png) }
SO>

Это подходит если картинки на всех изображениях одинаковые. А я хочу сделать красивые кнопатьки, на каждой картинка с уникальным умным словом.

Здравствуйте, BlaineMono, Вы писали:

SO>>Стили вполне подходят для решения вопроса
SO>>См. background-image + foreground-image
SO>>

SO>>#my-element1
SO>>{ foreground-image: url(me1.png) }
SO>>#my-element1:hover
SO>>{ foreground-image: url(me1-hover.png) }
SO>>#my-element1:active
SO>>{ foreground-image: url(me1-active.png) }
SO>>

BM>Это подходит если картинки на всех изображениях одинаковые. А я хочу сделать красивые кнопатьки, на каждой картинка с уникальным умным словом.

Да, я понял, такой вариант и предложил

Каждой кнопке присваиваешь свой id (не класс!) и определяешь картинку в css.

css
#first { foreground-image: url(first.png) }
#second { foreground-image: url(second.png) }
...
html
<button #first /> <button #second />

Здравствуйте, ShaggyOwl, Вы писали:

SO>Да, я понял, такой вариант и предложил

SO>Каждой кнопке присваиваешь свой id (не класс!) и определяешь картинку в css.

А. Осознал =) Спасибо!

И всё же, почему <input type="image" src="image.gif"> не работает? Вроде бы такая простая удобная штука, ею даже я пользоваться умею =)

Здравствуйте, BlaineMono, Вы писали:

BM>И всё же, почему <input type="image" src="image.gif"> не работает? Вроде бы такая простая удобная штука, ею даже я пользоваться умею =)
Потому что input type="image" не поддерживается, см. "Input elements supported by default in HTMLayout" на http://www.terrainformatica.com/htmlayout/tagsattributes.whtm

Если ты хочешь сделать input со своим фоновым рисунком, определи в css foreground-image

Здравствуйте, BlaineMono, Вы писали:

BM>Здравствуйте, ShaggyOwl, Вы писали:

SO>>Да, я понял, такой вариант и предложил

SO>>Каждой кнопке присваиваешь свой id (не класс!) и определяешь картинку в css.

BM>А. Осознал =) Спасибо!

BM>И всё же, почему <input type="image" src="image.gif"> не работает? Вроде бы такая простая удобная штука, ею даже я пользоваться умею =)

Напиши так в своем CSS:

img.button 
 { 
      behavior:button; 
      margin:4px;
 }
img.button:hover 
 { 
      foreground-image-transformation: contrast-brightness-gamma(0.5,0.5,1.2); 
 }
img.button:focus 
 { 
      outline: outline:1px dotted invert; 
 }

И в html используй как:

<img class="button" src="image.gif" />
или
<img.button src="image.gif" />

Если хочеш чтобы такой img еще и рисовался как кнопка то скажи так

img.button 
 { 
   style-set:"std-button";   
 }

См. http://www.terrainformatica.com/wiki/h-smile:built-in-behaviors:master_style_sheet

	От:	BlaineMono
	Дата:	27.06.07 14:11
	Оценка:

	От:	BlaineMono
	Дата:	27.06.07 14:34
	Оценка:

От:	ShaggyOwl	http://www.rsdn.org
Дата:	27.06.07 14:53
Оценка:

	От:	BlaineMono
	Дата:	27.06.07 15:13
	Оценка:

От:	ShaggyOwl	http://www.rsdn.org
Дата:	27.06.07 15:22
Оценка:

От:	c-smile	http://terrainformatica.com
Дата:	27.06.07 19:28
Оценка: