Search...
FAQs
Subscribe
Pie
FAQs
Recent topics
Flagged topics
Hot topics
Best topics
Search...
Search within HTML Pages with CSS and JavaScript
Search Coderanch
Advance search
Google search
Register / Login
Post Reply
Bookmark Topic
Watch Topic
New Topic
programming forums
Java
Mobile
Certification
Databases
Caching
Books
Engineering
Micro Controllers
OS
Languages
Paradigms
IDEs
Build Tools
Frameworks
Application Servers
Open Source
This Site
Careers
Other
Pie Elite
all forums
this forum made possible by our volunteer staff, including ...
Marshals:
Campbell Ritchie
Jeanne Boyarsky
Ron McLeod
Paul Clapham
Liutauras Vilda
Sheriffs:
paul wheaton
Rob Spoor
Devaka Cooray
Saloon Keepers:
Stephan van Hulst
Tim Holloway
Carey Brown
Frits Walraven
Tim Moores
Bartenders:
Mikalai Zaikin
Forum:
HTML Pages with CSS and JavaScript
Zooming Image Problem
Ajay Soni
Greenhorn
Posts: 8
posted 17 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
Hi,
I have a script that zooms a button but I want to zoom an image. I tried zooming the image but its not working.Ranchers please help, its very urgent for me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>Drag and resize an element using javascript.</TITLE> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="description" content="Drag and resize an element using javascript ( js ) and HTML ( DHTML )."> </HEAD> <BODY> <center><h1>Drag and resize an element using javascript ( js ) and HTML ( DHTML ).</h1> <h2>Click the button to either move / resize an element.</h2> <br><br><br><input type=button value="You can now MOVE the elements, Click to RESIZE." onclk="toggleMoveResize(this); return false"> </center> <!--<div id="div1" moveable=true style="font-weight:bold;z-index:2;position:absolute;top:350px;left:150px;width:170px;height:100px;background-color:gray;color:black;border :-o utset 5px white;padding-top:20%;text-align:center;"><IMG SRC="graph.png" ALT="image"> </div>--> <div id ="div1" moveable=true style="position:absolute;top:350px;width:99;height:100px;background-color:gray;"> <img name="myimage" src="graph.png"> </div> <script type="text/javascript"> var activeElements = new Array(); var activeElementCount = 0; var lTop, lLeft; var doMove = true; var doResize = false; function toggleMoveResize(e) { if (doMove) { doMove = false; doResize = true; e.value = "You can now RESIZE the elements, Click to MOVE."; //div1.innerText = "Click and resize me !!!" } else { doMove = true; doResize = false; e.value = "You can now MOVE the elements, Click to RESIZE."; //div1.innerText = "Click and move me !!!" } } function mousedown() { var mp; mp = findMoveable(window.event.srcElement); if (!window.event.altKey) { for (i=0; i<activeElementCount; i++) { if (activeElements[i] != mp) { activeElements[i].style.borderWidth = "2px"; } } if (mp) { activeElements[0] = mp; activeElementCount = 1; mp.style.borderWidth = "20px"; } else { activeElementCount = 0; } } else { if (mp) { if (mp.style.borderWidth != "4px") { activeElements[activeElementCount] = mp; activeElementCount++; mp.style.borderWidth = "4px"; } } } lLeft = window.event.x; lTop = window.event.y; } document.onmousedown = mousedown; function mousemove() { var i, dLeft, dTop; if (window.event.button == 1) { sx = window.event.x; sy = window.event.y; dLeft = sx - lLeft; dTop = sy - lTop; for (i=0; i<activeElementCount; i++) { if (doMove) moveElement(activeElements[i], dLeft, dTop); if (doResize) resizeElement(activeElements[i], dLeft, dTop); } lLeft = sx; lTop = sy; return false; } } function moveElement(mp, dLeft, dTop) { var e e = mp; e.style.posTop += dTop; e.style.posLeft += dLeft; } function resizeElement(mp, dLeft, dTop) { var e; e = mp; e.style.posHeight += dTop; e.style.posWidth += dLeft; } function findMoveable(e) { if (e.moveable == 'true') return e; if (e.tagName == "BODY") return null; return findMoveable(e.parentElement); } function findDefinedMoveable(e) { if ((e.moveable == 'true') || (e.moveable == 'false')) return e; if (e.tagName == "BODY") return null; return findDefinedMoveable(e.parentElement); } function rfalse() { return false; } document.onmousemove = mousemove; document.onselectstart = rfalse; </script> </body></html>
Ajay Soni
Greenhorn
Posts: 8
posted 17 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
Please change function OnClk to OnClick, System was not allowing me to post the message because off some security reason.
With a little knowledge, a
cast iron skillet
is non-stick and lasts a lifetime.
reply
reply
Bookmark Topic
Watch Topic
New Topic
Boost this thread!
Similar Threads
Game Script??
table cell cut paste
Resizable table columns
Creating CSS class at runtime
Expand / Collapse of div elements
More...