Есть html страничка с изображением и его id="pic".
<html>
<head>
<title>Engine</title>
<script type="text/javascript" language="javascript" src="engine.js"></script>
</head>
<body onLoad="first()">
<img src="box.gif" id="pic" style="position: absolute; left:100; top:100"></img>
</body>
</html>
С помощью этого js нужно поменять style изображения на html страничке. А именно его left и top (увеличить их на 100 и 200).
Полученые данные в var top и var left выглядят так: 100px
цифра с приставкой 'px', тоесть с ней я не могу добавить к top или left другое число...
function first(){
// Получаем нынешнее значение top изображения
var top = document.getElementById("pic").style.top;
// Получаем нынешнее значение left изображения
var left = document.getElementById("pic").style.left;
// Меняем src изображения
document.getElementById("pic").src="circle.gif";
// Меняем style изображения, нужно добавить к left 100 и к top 200
document.getElementById("pic").style="position: absolute; left:" + (left+100) + "; top:" + (top+200) + "";
}
сейчас выходит так:
var top = 100px;
document.getElementById("pic").style="position: absolute; top:" + (100px+200) + "";
Выходит что код картинки будет таков:
<img src="box.gif" id="pic" style="position: absolute; left:100; top:100px100"></img>
Как это решить?
И как эти два действия слить в один?
document.getElementById("pic").src="circle.gif";
document.getElementById("pic").style="position: absolute; left:" + (left+100) + "; top:" + (top+200) + "";
Как-то так...но так не работает:
document.getElementById("pic").src="circle.gif".style="position: absolute; left:" + (left+100) + "; top:" + (top+200) + "";