Форум

Taurus1195 · #1 (**permalink**) 17.05.2011, 01:43

проблема такая: в фотошопе сделал "живые" кнопки на JavaScript (меняется рисунок "курсор над кнопкой", "кнопка нажата", "кнопка отпущена") с использованием карты ссылок из 5 элементов. Как сделать чтобы она меняла масштаб в зависимости от разрешения экрана? Масштабирование картинок настроить получилось поместив в блок <div>, а сама карта при этом не меняется. Получается при смене расширения экрана кнопки срабатывают когда водишь курсором где-то в стороне от рисунка. Подскажите пожалуйста что надо изменить в скрипте чтобы нормально все работало?

poorking · #2 (**permalink**) 17.05.2011, 01:57

Сообщение от Taurus1195

меняется рисунок "курсор над кнопкой", "кнопка нажата", "кнопка отпущена"

Это же и без js сделать можно с помощью псевдоклассов

Сообщение от Taurus1195

Как сделать чтобы она меняла масштаб в зависимости от разрешения экрана?

Задайте стилевые свойства в процентах?

<style type = "text/css">
.button{
 width: 20%;
 height: 20%;
 background-color: gray;
 text-align: center;
}
.button:hover{
 background-color: green;
}
.button:active{
 background-color: yellow;
}
</style>

<div class = "button">button</div>

Taurus1195 · #3 (**permalink**) 17.05.2011, 02:15

это работает если кнопка одна. а у меня их 5. на одном рисунке. и у каждой по 10 строчек координат, т.к. они неправильной формы. Я на этот форум и пришел чтобы узнать какой тег JAVASCRIPTa в какое место вставить чтоб работало как мне надо

Taurus1195 · #4 (**permalink**) 17.05.2011, 02:25

упрощенная схема, чтоб было понятно чего я хочу: есть цветок с 5 лепестками, каждый лепесток это кнопка с отдельной ссылкой. Все эти кнопки неправильной геометрической формы. Каждая из этих кнопок имеет свой цветовой эффект позиций "курсор над кнопкой", "кнопка нажата", "кнопка отпущена". Такой рисунок-кнопка некорректно отображается при изменении разрешения экрана. Вопрос: какой тег JavaScript куда подставить чтоб размер кнопки менялся пропорционально изменению разрешения экрана?

poorking · #5 (**permalink**) 17.05.2011, 02:28

Сообщение от Taurus1195

это работает если кнопка одна. а у меня их 5.

Можно класс, задающий картинку, повесить на несколько кнопок сразу, а каждой кнопке дать класс, задающий background-position.
Если вы хотите чтобы кнопки меняли размер от рарешения экрана, это сделать можно, задав размеры в процентах (весь сайт ведь тогда в процентах?), но background в этом случае масштабироваться не будет, тогда нужно помещать внутрь кнопки картинку, но это тоже не катит, как я понял.
Есть вариант использовать transform: scale
Приводите тестовые примеры

Taurus1195 · #6 (**permalink**) 17.05.2011, 03:43

Пример: картинка размером 500х500px http://img580.imageshack.us/i/cvetokprimer.gif/
положение "курсор над" http://img834.imageshack.us/i/navel.gif/
положение "кнопка нажата" http://img6.imageshack.us/i/nadavil.gif/

Taurus1195 · #7 (**permalink**) 17.05.2011, 03:57

<head>
<title>cvetok_primer</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script type="text/javascript">

</script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">

<img name="cvetok_primer_01" src="images/cvetok_primer_01.gif" width="500" height="500" border="0" alt="" usemap="#cvetok_primer_01_Map">
<map name="cvetok_primer_01_Map">
<area shape="poly" alt="" coords="230,236, 231,236, 232,236, 233,236, 234,236, 235,236, 236,236, 237,237, 238,237, 239,238, 240,238, 241,239, 242,239, 243,240, 244,241, 245,242, 246,243, 247,244, 247,245, 247,246, 248,247, 248,248, 248,249, 248,250, 248,251, 248,252, 248,253, 248,254, 248,255, 248,256, 248,257, 247,258,
248,259, 248,260, 248,261, 247,262, 247,263, 247,264, 246,265, 246,266, 246,267, 245,268, 245,269, 244,270, 244,271, 244,272, 243,273, 243,274, 243,275, 243,276, 243,277, 242,278, 241,279, 241,280, 240,281, 240,282, 239,283, 238,284, 238,285, 237,286, 237,287, 236,288, 236,289, 235,290, 235,291, 234,292, 234,293, 233,294,
233,295, 232,296, 231,297, 230,298, 230,299, 229,300, 228,301, 227,302, 227,303, 226,304, 225,305, 225,306, 224,307, 223,308, 223,309, 222,310, 221,311, 221,312, 220,313, 219,314, 218,315, 218,316, 217,317, 216,318, 215,319, 214,320, 213,321, 212,322, 211,323, 210,324, 209,325, 209,326, 208,327, 207,328, 206,329, 205,330,
204,331, 204,332, 203,333, 202,334, 201,335, 200,336, 199,336, 198,337, 198,338, 197,339, 196,340, 195,340, 194,341, 193,342, 192,343, 191,344, 190,345, 189,346, 188,347, 187,348, 186,349, 185,350, 184,351, 183,351, 182,352, 181,353, 180,354, 179,354, 178,355, 177,356, 176,357, 175,358, 174,359, 173,360, 172,361, 171,361,
170,362, 169,362, 168,363, 167,363, 166,364, 165,365, 164,365, 163,366, 162,367, 161,367, 160,368, 159,369, 158,370, 157,370, 156,370, 155,371, 154,371, 153,372, 152,372, 151,373, 150,373, 149,374, 148,374, 147,374, 146,375, 145,375, 144,376, 143,376, 142,376, 141,376, 140,377, 139,377, 138,377, 137,377, 136,377, 135,377,
134,377, 133,377, 132,377, 131,377, 130,377, 129,377, 128,377, 127,377, 126,376, 125,375, 124,375, 123,374, 122,373, 121,372, 120,371, 120,370, 119,369, 119,368, 119,367, 118,366, 118,365, 118,364, 118,363, 118,362, 118,361, 118,360, 118,359, 119,358, 119,357, 118,356, 118,355, 118,354, 118,353, 119,352, 119,351, 119,350,
120,349, 120,348, 121,347, 121,346, 121,345, 121,344, 121,343, 121,342, 122,341, 123,340, 123,339, 123,338, 124,337, 125,336, 125,335, 126,334, 126,333, 126,332, 127,331, 127,330, 128,329, 128,328, 128,327, 129,326, 130,325, 131,324, 131,323, 132,322, 133,321, 133,320, 134,319, 134,318, 135,317, 136,316, 136,315, 137,314,
138,313, 139,312, 139,311, 140,310, 140,309, 140,308, 141,307, 142,306, 143,305, 144,304, 145,303, 146,302, 146,301, 147,300, 148,299, 149,298, 150,297, 151,296, 151,295, 152,294, 153,293, 154,292, 154,291, 155,290, 156,289, 157,288, 158,287, 159,286, 160,285, 161,284, 162,283, 163,282, 164,281, 165,280, 166,279, 166,278,
167,277, 168,276, 169,275, 170,274, 171,273, 172,272, 173,271, 174,270, 175,269, 176,269, 177,268, 178,267, 179,266, 180,265, 181,264, 182,264, 183,263, 183,262, 184,261, 185,260, 186,259, 187,259, 188,258, 189,257, 190,257, 191,256, 192,255, 193,255, 194,254, 195,253, 196,253, 197,252, 198,251, 199,250, 200,249, 201,248,
202,248, 203,247, 204,247, 205,246, 206,246, 207,245, 208,245, 209,244, 210,244, 211,243, 212,243, 213,242, 214,242, 215,241, 216,240, 217,240, 218,239, 219,239, 220,239, 221,239, 222,238, 223,238, 224,238, 225,238, 226,238, 227,237, 228,237, 229,237" href="#"
onmouseover="changeImages('cvetok_primer_01', 'images/cvetok_primer_01-КартаИз-14.gif'); return true;"
onmouseout="changeImages('cvetok_primer_01', 'images/cvetok_primer_01.gif'); return true;"
onmousedown="changeImages('cvetok_primer_01', 'images/cvetok_primer_01-КартаИз-15.gif'); return true;"
onmouseup="changeImages('cvetok_primer_01', 'images/cvetok_primer_01-КартаИз-16.gif'); return true;">
<area shape="poly" alt="" coords="254,239, 255,239, 256,239, 257,239, 258,239, 259,239, 260,239, 261,239, 262,239, 263,239, 264,239, 265,239, 266,239, 267,239, 268,239, 269,240, 270,240, 271,240, 272,240, 273,240, 274,240, 275,241, 276,241, 277,241, 278,242, 279,242, 280,243,.............

Taurus1195 · #8 (**permalink**) 17.05.2011, 04:00

а это первая треть скрипта на этот цветок. Функционирует он хоть с разрешением 1366х768рх, хоть с 800х600рх одинаково оставаясь размером 500х500рх

Taurus1195 · #9 (**permalink**) 17.05.2011, 04:03

Вопрос: как изменить скрипт чтоб при изменении расширения экрана картинка так же менялась в пропорциях? Т.е. занимала, например, половину ширины экрана при любом расширении?

poorking · #10 (**permalink**) 17.05.2011, 04:39

Сообщение от Taurus1195

alt="" coords="230,236, 231,236, 232,2........

Вы понимаете, что если вы хотите менять масштаб цветка, то нужно все эти сотни координат тоже менять?(если только не воспользоваться css transform: scale - что не кроссбраузерно)
Составьте матрицу координат, определяйте размер экрана в скрипте, опишите математически зависимости все эти и потом создавайте area с координатами, зависящими от разрешения ИМХО легче подготовить несколько "пачек" координат для разных разрешений, хотя если у вас супер с математикой, то труда не составит, хотя все довольно просто, отделить горизонтальные координаты от вертикальных и масштабировать отдельно, чем каждую точку высчитывать.

А еще лучше, оставить все как есть.

Форум

Справочник

Discord чат

Курсы javascript