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

Ast · 13.12.2011, 16:10

Вывести на экран изображение, ограниченное рамкой 300х300px. Добавить возможность приближать и отдалять это изображение внутри рамки нажатиями клавиш + и - на клавиатуре. спасибо за ранее

Виталий Желтяков · 13.12.2011, 17:18

Написать программный код на JavaScript решающий поставленную задачу. Заранее пожалуйста.

Arigato · 13.12.2011, 19:24

Решение задачи:

js_code2.jpg

Ast · 18.12.2011, 09:28

спасибо, вот ещё кое что нашел.

Код 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>

Ast · 18.12.2011, 09:48

как в последний код добавить чтоб не создавать кнопки для увеличения и уменьшения а с клавиатуры чтоб можно было рисунок приблизить и уменьшить?

Arigato · 18.12.2011, 13:35

Так в моем примере это же делается.

Ast · 18.12.2011, 13:50

ну в твоем, пишу путь до файла картинки и он не видит

Код 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>

Arigato · 18.12.2011, 13:57

Код:

<body onkeydown="keyDown (event.keyCode)" onload="showImage ('C:\Documents and 

Settings\Admin.SUPERCONTI\Рабочий стол\мусор javascript\Рисунок18.jpg')">

Это еще что такое?

Положи картинку в туже папку, где и скрипт, и будет тебе счастье...

Ast · 18.12.2011, 14:00

положить то положил и путь исправил, а толку рисунка нет

Код HTML:

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

Arigato · 18.12.2011, 14:11

Это не мои проблемы, что вы даже переписать нормально не можете.

13.12.2011, 16:10	#1
Ast Форумчанин Регистрация: 06.12.2010 Сообщений: 117	Javascript и изображение Вывести на экран изображение, ограниченное рамкой 300х300px. Добавить возможность приближать и отдалять это изображение внутри рамки нажатиями клавиш + и - на клавиатуре. спасибо за ранее

13.12.2011, 19:24	#3
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,549	Решение задачи: js_code2.jpg E-Mail: arigato.freelance@gmail.com

18.12.2011, 13:35	#6
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,549	Так в моем примере это же делается. E-Mail: arigato.freelance@gmail.com

18.12.2011, 13:57	#8
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,549	Код: `<body onkeydown="keyDown (event.keyCode)" onload="showImage ('C:\Documents and Settings\Admin.SUPERCONTI\Рабочий стол\мусор javascript\Рисунок18.jpg')">` Это еще что такое? Положи картинку в туже папку, где и скрипт, и будет тебе счастье... E-Mail: arigato.freelance@gmail.com

18.12.2011, 14:00	#9
Ast Форумчанин Регистрация: 06.12.2010 Сообщений: 117	положить то положил и путь исправил, а толку рисунка нет Код HTML: <body onkeydown="keyDown (event.keyCode)" onload="showImage ('Рисунок18.jpg')"> <h1>изменение масштаба: кнопки [+] и [-] </h1>

13.12.2011, 17:18	#2
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Написать программный код на JavaScript решающий поставленную задачу. Заранее пожалуйста.

18.12.2011, 09:48	#5
Ast Форумчанин Регистрация: 06.12.2010 Сообщений: 117	как в последний код добавить чтоб не создавать кнопки для увеличения и уменьшения а с клавиатуры чтоб можно было рисунок приблизить и уменьшить?

18.12.2011, 14:11	#10
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,549	Это не мои проблемы, что вы даже переписать нормально не можете. E-Mail: arigato.freelance@gmail.com

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Изображение на изображение	ара	Мультимедиа в Delphi	0	19.10.2011 11:43
Изображение	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
Изображение	Artem	Мультимедиа в Delphi	10	13.07.2007 13:27