И вместо ссылки я сделал кнопку.
Вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="icon" href="../favicon.png" type="image/x-icon">
<link rel="shortcut icon" href="../favicon.png" type="image/x-icon">
</head>
<body>
<style>
a.Button3 {
display: block;
width: 156px;
height: 20px;
background: #75bcf2 url(but.png);
}
a.Button3:link {
text-decoration: none;
color: #FFF;
}
a.Button3:visited {
text-decoration: none;
color: #FFF;
}
a.Button3:hover {
text-decoration: none;
color: #FFF;
background-color: #a0d1f6;
background-position: 0px -20px;
}
a.Button3:active {
text-decoration:none;
color:#FFF;
}
</style>
<a href="#" class="Button3">Button</a>
</body>
</html>
Как вы поняли у меня одна картинка(но в ней несколько кнопок)
И вот мой вопрос как сделать точно такуюжу кнопку но вместо <input type="submit">.???
Видел варианты но там при навидении мышки подключаеться, подключаеться новая картинка.
Заранне всем спасибо!
Спустя 23 минуты, 46 секунд (19.01.2011 - 20:09) alex12060 написал(а):
.but {
width: 115px;
height: 45px;
border: 0px;
color: #000;
background: #aaa url(img.png) no-repeat;
}
<input type="submit" value="Отправить" class="but" />
Спустя 6 минут, 27 секунд (19.01.2011 - 20:16) PiratXXX написал(а):
alex12060
спасибо! но не то.
файл but.png это картинка на которой нарисовано ДВЕ кнопки(одно темнее, вторая светлее).
надо чтоб при наведении кнопка светлела
(т.е. изображение должно съезжать вниз)
спасибо! но не то.
файл but.png это картинка на которой нарисовано ДВЕ кнопки(одно темнее, вторая светлее).
надо чтоб при наведении кнопка светлела
(т.е. изображение должно съезжать вниз)
| Цитата |
a.Button3:hover { text-decoration: none; color: #FFF; background-color: #a0d1f6; background-position: 0px -20px; } |
Спустя 9 минут, 39 секунд (19.01.2011 - 20:25) alex12060 написал(а):
Так сделай так-же, как с ссылкой в твоем примере)
Спустя 11 минут, 13 секунд (19.01.2011 - 20:37) PiratXXX написал(а):
alex12060
так вот не получаеться)))
так вот не получаеться)))
Спустя 1 час, 7 минут, 39 секунд (19.01.2011 - 21:44) inpost написал(а):
PiratXXX
Задай высоту и ширину. А лучше переделай так, как писал алекс
Задай высоту и ширину. А лучше переделай так, как писал алекс
Спустя 5 часов, 2 минуты (20.01.2011 - 02:46) ИНСИ написал(а):
PiratXXX делается это так, примерно:
Через css:
1. Создаешь класс:
2. Ставишь ссылку:
Также с помощью js, извращение:
1. Создаешь css класс:
2. Делаешь js функцию примерно такую:
3. И ссылка с нужными параметрами:
1.png - Фотка по умолчанию, 2.png - Фотка, которая меняется при наведении
Через css:
1. Создаешь класс:
.button { width: 156px; height: 20px; background: #75bcf2 url(1.gif); } .button:hover { background: #75bcf2 url(2.png); }
2. Ставишь ссылку:
<a href="#" class="button" onclick="submit();">Button</a>
Также с помощью js, извращение:
1. Создаешь css класс:
.button { width: 156px; height: 20px; background: #75bcf2 url(1.gif); }
2. Делаешь js функцию примерно такую:
function changeBg(img) {
document.getElementById('button').style.background = 'url(' + img + ')';
}
3. И ссылка с нужными параметрами:
<a href="#" class="button" id="button" onmouseover="changeBg('2.png')" onmouseout="changeBg('1.png')" onclick="submit();">Button</a>
1.png - Фотка по умолчанию, 2.png - Фотка, которая меняется при наведении
Спустя 7 часов, 34 минуты, 37 секунд (20.01.2011 - 10:21) omn написал(а):
Ход работы:
1. В папке с сохраненными изображениями button_OFF.png и button_ON.png создать html-документ и css-файл.
2. В html-файле написать следующий код:
3. В css-файле:
Наша лабраторка с учёбы :)
Думаю понятно что , куда и сколько раз )
1. В папке с сохраненными изображениями button_OFF.png и button_ON.png создать html-документ и css-файл.
2. В html-файле написать следующий код:
<html>
<head>
<title>Example</title>
</head>
<div="btn_act" >
<script language="JavaScript" type="text/javascript">
<!--
RollOver1 = new Image();
RollOver1.src = "активная кнопка";
//-->
</script>
<img id="btn_img" src=" неактивная кнопка " onMouseOver="this.src=' активная кнопка ' " onMouseOut="this.src=' неактивная кнопка ' " alt=" "/>
</div>
</html>
3. В css-файле:
. btn_act {width: ширина вашей кнопки;
height: высота вашей кнопки;
position: absolute;
z-index: 0;}
. btn_img {width: ширина вашей кнопки;
height: высота вашей кнопки;
border-style: none;}
Наша лабраторка с учёбы :)
Думаю понятно что , куда и сколько раз )
Спустя 2 часа, 45 минут, 47 секунд (20.01.2011 - 13:07) ИНСИ написал(а):
omn оформляй текст нужными тегами пожалуйста. Ведь будет красивее, если сделать все правильно 
А по коду, тоже извращение Ведь все делается просто в css
А по коду, тоже извращение
Ведь все делается просто в css Спустя 4 минуты, 50 секунд (20.01.2011 - 13:11) Hoodzon написал(а):
| Цитата (welbox2 @ 20.01.2011 - 10:07) |
| А по коду, тоже извращение Ведь все делается просто в css |
Средствами CSS будет не кроссбраузерно, т.к. hover поддерживают не все браузеры.
Спустя 4 минуты, 57 секунд (20.01.2011 - 13:16) ИНСИ написал(а):
| Цитата |
| Средствами CSS будет не кроссбраузерно |
Согласен, что не все браузеры поддерживают. Но я думаю что ниже: IE 6 и Opera 5 мало кто пользуется
Спустя 6 минут, 8 секунд (20.01.2011 - 13:22) Hoodzon написал(а):
welbox2
Internet Explorer 7.0, 8.0 (в версиях 6.0 и ниже поддерживается частично)
Opera 7.0, 8.0, 9.2, 9.5, 10.0
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0
Internet Explorer 7.0, 8.0 (в версиях 6.0 и ниже поддерживается частично)
Opera 7.0, 8.0, 9.2, 9.5, 10.0
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0
_____________
http://flibro.com/