Javascript изображение - JavaScript, Ajax

Ast · 19.12.2011, 07:56

сам код:

Код HTML:

 <html>
<head>
<title>alex</title>
<script language="javascript" type="text/javascript">
 
 
// увелечение или уменьшение размера картинки
function zoom(ops) {
    var step = 30;  // еденица скаляра(шаг)
    var img  = document.getElementById("imageX");
    var px   = parseInt(img.style.width);
    var py   = parseInt(img.style.height);
    if(ops == 0) {
         px = Math.max(px - step, 5);
         py = Math.max(py - step, 5);
    } else {
        px += step;
        py += step;
   }
    img.style.width  = px + "px";
    img.style.height = py + "px";
}
</script>
</head>
<body>
<img src="C:\Documents and Settings\All Users\Документы\Мои рисунки\Образцы рисунков\голубые холмы.jpg" id="imageX" style="position:absolute;left:10px;top:40px;width:300px;height:300px;" />
<input type="button" value="Увеличить +" style="position:absolute;left:10px;top:15px;" onclick="zoom(1)"/>
<input type="button" value="Уменьшить -" style="position:absolute;left:110px;top:15px;" onclick="zoom(0)"/>
</body>
</html>

как сделать не кнопки увеличить уменьшить а делать это с клавиатуры нажатием на кнопки + и -

вот ещё один вариант но не могу понять почему сам рисунок не загружается(

Код HTML:

<html>
<head>
<script type="text/javascript"><!--

var speed=4;

function showImage(src)
{
	var div=document.createElement ("div");
	with (div.style)
	{
	width ="300px";
	heigth ="300px";
	border="2px solid black";
	textAlign = "center";
	overflow ="hidden";
	}
	document.body.appendChild(div);
	img = document.createElement("img");
	img.src = src;
	img.width = 300;
	img.height = 300;
	div.appendChild (img);
}
function keyDown (key);
{

	var k=0;
	if (key ==107 ) k=speed;
	if (key == 109 ) k = -speed;
	if (k !=0 )
	{
	img.width = img.width +k;
	img.height=img.height +k;
	img.style.margin = ((300 - img.height) / 2).toString()+ "px";
	}
}



//--></script>
</head>
<body onkeydown="keyDown (event.keyCode)" onload="showImage ('Рисунок18.jpg')">
<h1>изменение масштаба: кнопки [+] и [-] </h1>

</body>
</html>

irt · 19.12.2011, 13:54

Код:

<html>
<head>
<title>alex</title>
<script language="javascript" type="text/javascript">
 
 
// увелечение или уменьшение размера картинки
function keyDown(event){
	if (event.keyCode == 107)
		zoom(1);
	else 
	if (event.keyCode == 109)
		zoom(0);
}
function zoom(ops) {
    var step = 30;  // еденица скаляра(шаг)
    var img  = document.getElementById("imageX");
    var px   = parseInt(img.style.width);
    var py   = parseInt(img.style.height);
    if(ops == 0) {
         px = Math.max(px - step, 5);
         py = Math.max(py - step, 5);
    } else {
        px += step;
        py += step;
   }
    img.style.width  = px + "px";
    img.style.height = py + "px";
}
</script>
</head>
<body onKeyDown="keyDown(event)">
<img src="http://united-metal.ru/uploads/posts/2011-10/thumbs/1319844903_some-girls-wander-by-mistake-1992.jpg" id="imageX" style="position:absolute;left:10px;top:40px;width:300px;height:300px;" />
<input type="button" value="Увеличить +" style="position:absolute;left:10px;top:15px;" onclick="zoom(1)"/>
<input type="button" value="Уменьшить -" style="position:absolute;left:110px;top:15px;" onclick="zoom(0)"/>
</body>
</html>

Цитата:

вот ещё один вариант но не могу понять почему сам рисунок не загружается(

Проверь есть ли он в той же папке, где лежит файл

Ast · 19.12.2011, 14:19

все там же. я про другое уже задание)))
с этим разобрался
все работает

окончательный мой вариант

Ast · 19.12.2011, 14:19

Код HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>aleks.ast</title>
<script type='text/javascript'>
  // Увеличение/Уменьшение изображения
  Handler = false;
  function resize(ev)
  {
     var event = event || ev;
     var key = event.keyCode || event.charCode
         
     if (Handler)
     {
        switch (key) {
             case 61 : {                                                
                        img = document.getElementById('picture');
                        img.style.width = parseInt(img.style.width) + 10 +'px';
                        img.style.height = parseInt(img.style.height) + 10 +'px';
                        break;
             }
             case 45 : {
                        img = document.getElementById('picture');
                        img.style.width = parseInt(img.style.width) - 10 +'px';
                        img.style.height = parseInt(img.style.height) - 10 +'px';
                        break;
             }
        }
     }
  }
</script>
</head>
<body onkeypress='resize(event); return false'>
        <img src='зима.jpg' onmouseover='Handler = true' onmouseout='Handler = false' id='picture' style="width: 300px; height: 300px;">
</body>
</html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Javascript и изображение	Ast	JavaScript, Ajax	11	18.12.2011 14:24
Изображение	whitebrain	Общие вопросы .NET	1	09.03.2011 19:37
Javascript - классы, они есть или их нету в Javascript?	Kasper1	JavaScript, Ajax	3	05.03.2011 09:42
Изображение	_-Re@l-_	Общие вопросы Delphi	7	09.06.2010 09:23
Изображение	Terran	Работа с сетью в Delphi	2	08.02.2008 22:28

19.12.2011, 14:19	#3
Ast Форумчанин Регистрация: 06.12.2010 Сообщений: 117	все там же. я про другое уже задание))) с этим разобрался все работает окончательный мой вариант