как изменить масштаб кнопки
проблема такая: в фотошопе сделал "живые" кнопки на JavaScript (меняется рисунок "курсор над кнопкой", "кнопка нажата", "кнопка отпущена") с использованием карты ссылок из 5 элементов. Как сделать чтобы она меняла масштаб в зависимости от разрешения экрана? Масштабирование картинок настроить получилось поместив в блок <div>, а сама карта при этом не меняется. Получается при смене расширения экрана кнопки срабатывают когда водишь курсором где-то в стороне от рисунка. Подскажите пожалуйста что надо изменить в скрипте чтобы нормально все работало?
|
Цитата:
Цитата:
<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>
|
это работает если кнопка одна. а у меня их 5. на одном рисунке. и у каждой по 10 строчек координат, т.к. они неправильной формы. Я на этот форум и пришел чтобы узнать какой тег JAVASCRIPTa в какое место вставить чтоб работало как мне надо
|
упрощенная схема, чтоб было понятно чего я хочу: есть цветок с 5 лепестками, каждый лепесток это кнопка с отдельной ссылкой. Все эти кнопки неправильной геометрической формы. Каждая из этих кнопок имеет свой цветовой эффект позиций "курсор над кнопкой", "кнопка нажата", "кнопка отпущена". Такой рисунок-кнопка некорректно отображается при изменении разрешения экрана. Вопрос: какой тег JavaScript куда подставить чтоб размер кнопки менялся пропорционально изменению разрешения экрана?
|
Цитата:
Если вы хотите чтобы кнопки меняли размер от рарешения экрана, это сделать можно, задав размеры в процентах (весь сайт ведь тогда в процентах?), но background в этом случае масштабироваться не будет, тогда нужно помещать внутрь кнопки картинку, но это тоже не катит, как я понял. Есть вариант использовать transform: scale Приводите тестовые примеры |
Пример: картинка размером 500х500px http://img580.imageshack.us/i/cvetokprimer.gif/
положение "курсор над" http://img834.imageshack.us/i/navel.gif/ положение "кнопка нажата" http://img6.imageshack.us/i/nadavil.gif/ |
<head>
<title>cvetok_primer</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <!-- ImageReady Preload Script (cvetok_primer) --> <script type="text/javascript"> <!-- function newImage(arg) { if (document.images) { rslt = new Image(); rslt.src = arg; return rslt; } } function changeImages() { if (document.images && (preloadFlag == true)) { for (var i=0; i<changeImages.arguments.length; i+=2) { document[changeImages.arguments[i]].src = changeImages.arguments[i+1]; } } } var preloadFlag = false; function preloadImages() { if (document.images) { cvetok_primer_01____________01_over = newImage("images/cvetok_primer_01-КартаИзобр.gif"); cvetok_primer_01____________01_down = newImage("images/cvetok_primer_01-КартаИз-03.gif"); cvetok_primer_01____________01_up = newImage("images/cvetok_primer_01-КартаИз-04.gif"); cvetok_primer_01____________02_over = newImage("images/cvetok_primer_01-КартаИз-05.gif"); cvetok_primer_01____________02_down = newImage("images/cvetok_primer_01-КартаИз-06.gif"); cvetok_primer_01____________02_up = newImage("images/cvetok_primer_01-КартаИз-07.gif"); cvetok_primer_01____________03_over = newImage("images/cvetok_primer_01-КартаИз-08.gif"); cvetok_primer_01____________03_down = newImage("images/cvetok_primer_01-КартаИз-09.gif"); cvetok_primer_01____________03_up = newImage("images/cvetok_primer_01-КартаИз-10.gif"); cvetok_primer_01____________04_over = newImage("images/cvetok_primer_01-КартаИз-11.gif"); cvetok_primer_01____________04_down = newImage("images/cvetok_primer_01-КартаИз-12.gif"); cvetok_primer_01____________04_up = newImage("images/cvetok_primer_01-КартаИз-13.gif"); cvetok_primer_01____________05_over = newImage("images/cvetok_primer_01-КартаИз-14.gif"); cvetok_primer_01____________05_down = newImage("images/cvetok_primer_01-КартаИз-15.gif"); cvetok_primer_01____________05_up = newImage("images/cvetok_primer_01-КартаИз-16.gif"); preloadFlag = true; } } // --> </script> <!-- End Preload Script --> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();"> <!-- ImageReady Slices (cvetok_primer) --> <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,............. |
а это первая треть скрипта на этот цветок. Функционирует он хоть с разрешением 1366х768рх, хоть с 800х600рх одинаково оставаясь размером 500х500рх
|
Вопрос: как изменить скрипт чтоб при изменении расширения экрана картинка так же менялась в пропорциях? Т.е. занимала, например, половину ширины экрана при любом расширении?
|
Цитата:
Составьте матрицу координат, определяйте размер экрана в скрипте, опишите математически зависимости все эти и потом создавайте area с координатами, зависящими от разрешения ИМХО легче подготовить несколько "пачек" координат для разных разрешений, хотя если у вас супер с математикой, то труда не составит, хотя все довольно просто, отделить горизонтальные координаты от вертикальных и масштабировать отдельно, чем каждую точку высчитывать. А еще лучше, оставить все как есть. |
Цитата:
Составьте матрицу координат, определяйте размер экрана в скрипте, опишите математически зависимости все эти и потом создавайте area с координатами, зависящими от разрешения ИМХО легче подготовить несколько "пачек" координат для разных разрешений, хотя если у вас супер с математикой, то труда не составит, хотя все довольно просто, отделить горизонтальные координаты от вертикальных и масштабировать отдельно, чем каждую точку высчитывать. А еще лучше, оставить все как есть. UPD вот даже пример масштабирования таких координат без использования scale, он конечно требует доработки, а именно, координаты нужно еще смещать по оси, но однакож(на canvas для наглядности)
<!DOCTYPE html>
<html><head>
<meta charset = "utf-8" />
<script type = "text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var cnx = $("#canvas").getContext("2d");
function each(arr, cb){
for(var i = 0, il = arr.length; i < il; i ++){
if(i in arr){
arr[i] = cb.call(arr[i], i);
}
}
return arr;
}
var coords = [
150, 200,
140, 180,
130, 155,
120, 110,
130, 90,
140, 80,
150, 75,
160, 80,
170, 90,
180, 110,
170, 155,
160, 180,
150, 200
];
function drawLeap(c, crds){
c.clearRect(0, 0, c.canvas.width, c.canvas.height);
c.beginPath();
c.moveTo(crds[0],crds[1]);
for(var i = 2; i < crds.length; i+= 2){
c.lineTo(crds[i], crds[i+1]);
}
c.stroke();
c.closePath();
}
drawLeap(cnx, coords);
$("#plus").onclick = function(){
drawLeap(cnx, each(coords, function(){
return this * 1.1;
}));
}
$("#minus").onclick = function(){
drawLeap(cnx, each(coords, function(){
return this * 0.9;
}));
}
}
</script>
</head><body>
<div>
<h1>Масштабирование без scale</h1>
<canvas id = "#canvas" width = "300" height = "300"></canvas>
<button id = "#minus">-</button>
<button id = "#plus">+</button>
</div>
</body></html>
Если вы пришли не за готовым кодом в ответ на Цитата:
|
спасибо, буду пробовать.
п.с. так и есть, пришел за готовым, но не кодом, а тегом. с javascript я столкнулся в первый раз именно потому что для дизайна моего сайта очень подошел именно такой метод создания кнопок. надеялся что в JS проблему можно решить также просто как и в css - подставлением одного тега в нужное место. но, видимо нужно копать глубже. спасибо за советы. |
ура, ура, ура!!! проблема решена )))
кому интересно смотрите тут http://verygoodforum.listbb.ru/viewtopic.php?p=977 |
| Часовой пояс GMT +3, время: 00:58. |