I have added images dynamically using javascript.
I want to resize that images dynamically.
I have done it using javascript
code to drag and drop image on div:
var whiteBoardImageLeftPos = 0;
var whiteBoardImageTopPos = 0;
var whiteBoardImageColCount = 0;
var whiteBoardImageRowCount = 0;
var whiteBoardImageIndex = 800;
var copyStartId = 0;
function dropToWhiteBoard(objSrc,product) {
var imgObj = document.createElement('img');
copyStartId = copyStartId + 1;
imgObj.setAttribute('name', 'imgObj');
imgObj.setAttribute('id', 'img' + copyStartId);
imgObj.setAttribute('src', objSrc);
imgObj.setAttribute('onclick', 'storeObject(this);');
imgObj.setAttribute('class', 'movable');
whiteBoardImageIndex = whiteBoardImageIndex + 1;
imgObj.setAttribute('style', 'z-index:' + whiteBoardImageIndex + ';position:absolute;top:' + whiteBoardImageTopPos + 'px;left:' + whiteBoardImageLeftPos + 'px;border:solid 1px transparent;');
imgObj.setAttribute('oncontextmenu', 'return false');
whiteBoardImageLeftPos = whiteBoardImageLeftPos + 70;
whiteBoardImageColCount = whiteBoardImageColCount + 1;
var height = document.getElementById("hdnforpageheight");
var whitepageHeight = parseInt(height.value);
var width = document.getElementById("hdnforpagewidth");
var whitepagewidth = parseInt(width.value);
if (whitepageHeight == 1056 && whitepagewidth == 816) {
if (whiteBoardImageColCount > 10) {
whiteBoardImageRowCount = whiteBoardImageRowCount + 1;
whiteBoardImageTopPos = whiteBoardImageRowCount * 70;
whiteBoardImageLeftPos = 0;
whiteBoardImageColCount = 0;
}
if (whiteBoardImageRowCount > 13) {
whiteBoardImageRowCount = -0.8;
}
}
else if (whitepageHeight == 816 && whitepagewidth == 1056) {
if (whiteBoardImageColCount > 14) {
whiteBoardImageRowCount = whiteBoardImageRowCount + 1;
whiteBoardImageTopPos = whiteBoardImageRowCount * 70;
whiteBoardImageLeftPos = 0;
whiteBoardImageColCount = 0;
}
if (whiteBoardImageRowCount > 10) {
whiteBoardImageRowCount = -0.8;
}
}
else if (whitepageHeight == 1122 && whitepagewidth == 793) {
if (whiteBoardImageColCount > 10) {
whiteBoardImageRowCount = whiteBoardImageRowCount + 1;
whiteBoardImageTopPos = whiteBoardImageRowCount * 70;
whiteBoardImageLeftPos = 0;
whiteBoardImageColCount = 0;
}
if (whiteBoardImageRowCount > 14) {
whiteBoardImageRowCount = -0.8;
}
}
else if (whitepageHeight == 793 && whitepagewidth == 1122) {
if (whiteBoardImageColCount > 15) {
whiteBoardImageRowCount = whiteBoardImageRowCount + 1;
whiteBoardImageTopPos = whiteBoardImageRowCount * 70;
whiteBoardImageLeftPos = 0;
whiteBoardImageColCount = 0;
}
if (whiteBoardImageRowCount > 9) {
whiteBoardImageRowCount = -0.8;
}
}
else if (whitepageHeight == 1632 && whitepagewidth == 1056) {
if (whiteBoardImageColCount > 14) {
whiteBoardImageRowCount = whiteBoardImageRowCount + 1;
whiteBoardImageTopPos = whiteBoardImageRowCount * 70;
whiteBoardImageLeftPos = 0;
whiteBoardImageColCount = 0;
}
if (whiteBoardImageRowCount > 21) {
whiteBoardImageRowCount = -0.8;
}
}
else {
if (whiteBoardImageColCount > 22) {
whiteBoardImageRowCount = whiteBoardImageRowCount + 1;
whiteBoardImageTopPos = whiteBoardImageRowCount * 70;
whiteBoardImageLeftPos = 0;
whiteBoardImageColCount = 0;
}
if (whiteBoardImageRowCount > 13) {
whiteBoardImageRowCount = -0.8;
}
}
var hdnModifyDivider = document.getElementById('hdnModifyDivider');
var title = hdnModifyDivider.value;
if(product=="product")
{
if (title == "W") {
var currentDivId = document.getElementById('hdnCurrentDivId').value;
var getTargetDiv = document.getElementById(currentDivId);
getTargetDiv.appendChild(imgObj);
}
else
{
alert("Product can be dropped to Only WhiteBoard");
}
}
else {
var currentDivId = document.getElementById('hdnCurrentDivId').value;
var getTargetDiv = document.getElementById(currentDivId);
getTargetDiv.appendChild(imgObj);
}
$(init);
imgObj.setAttribute('onclick', 'storeObject(this);');
}
function init() {
$('.movable').draggable({
cursor: 'move',
containment: '#whitePage',
cursor: 'move',
snap: '#whitePage'
});
}
code for resizing:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageResize.aspx.cs" Inherits="ImageResize.ImageResize" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%-- <script type="text/javascript" src="../Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>--%>
<script type="text/javascript" language="javascript">
var copySrc = "";
var copyAlt = "";
function storeObject(obj) {
copySrc = obj.src;
copyAlt = obj.alt;
}
function change1() {
var imgObj = document.getElementById('MainImg');
// alert(imgObj);
imgObj.setAttribute('name', 'imgObj');
imgObj.setAttribute('src', copySrc);
imgObj.setAttribute('alt', copyAlt);
imgObj.setAttribute('onclick', 'storeObject(this);');
imgObj.setAttribute('style', 'position:absolute;height:30px;width:30px ');
}
function change2() {
// debugger;
var imgObj = document.getElementById('MainImg');
imgObj.setAttribute('name', 'imgObj');
imgObj.setAttribute('src', copySrc);
imgObj.setAttribute('alt', copyAlt);
imgObj.setAttribute('onclick', 'storeObject(this);');
imgObj.setAttribute('style', 'position:absolute;height:50px;width:50px');
}
function change3() {
var imgObj = document.getElementById('MainImg');
imgObj.setAttribute('name', 'imgObj');
imgObj.setAttribute('src', copySrc);
imgObj.setAttribute('alt', copyAlt);
imgObj.setAttribute('id', 'img1');
imgObj.setAttribute('onclick', 'storeObject(this);');
imgObj.setAttribute('style', 'position:absolute;height:70px;width:70px');
}
</script>
</head>
<body >
<form id="form1" runat="server">
<div id="butn" runat="server" style="display:none" >
<img src="Images/zoom1_Icon.png" id="first" alt="z1" style="padding-left:10px" onclick="change1(this);" />
<img src="Images/zoom2_Icon.png" id="sec" alt="z2" style="padding-left:14px" onclick="change2(this);"/>
<img src="Images/zoom3_Icon.png" id="third" alt="z3" style="padding-left:20px" onclick="change3(this);"/>
</div>
<div id="main" runat="server" >
<img id="MainImg" src="Images/1.png" alt="imge" style="position:absolute" onload="storeObject(this);" onmouseover="document.getElementById('butn').style.display = 'block';"/>
</div>
</form>
</body>
</html>
tell me the solution how should i get resizing image on the mouseover(on the product which i m gng to drop to div);
Resizing image is nothing but three images 1.small 2.medium 3.large.
click on these images i want to resize my product image.
