Metachecker.net
|
TrafficChecker.net
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Smart image resizer
Use this script and your visitors are able to resize your webimages as easy as a browser-window.
Insert into <HEAD>
<SCRIPT LANGUAGE="JavaScript"> // CREDITS: // Smart image resizer script by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.ch. // info@24fun.ch // 1/20/2000 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a link to http://www.24fun.ch on the webpage // where the smart image resizer script will be running. // CONFIGURATION: // Copy the two <DIV>-blocks just below the body-tag of this webpage. // Paste them below the body tag of your webpage. // Do not change them!!! // Put the image "grip201.gif" in the same directory as the script. // Configure the following variables: // URL of the image to resize (put the image in the same directory // as the script) var imgsrc="girl201.jpg" // the width and height of the image to resize (pixels) var resizeimg_width=480 var resizeimg_height=280 // the distance of the image to the left margin (pixels) var resizeimg_startx=10 // the distance of the image to the top margin (pixels) var resizeimg_starty=10 // At the beginning the image will be displayed smaller than the original size: // 2 means 2 times smaller, 3 means 3 times smaller, 4 means 4 times smaller and so on. var startsize=4 // No need to change the variables below var gripimg_startx=Math.ceil(resizeimg_width/startsize)+resizeimg_startx-15 var gripimg_starty=Math.ceil(resizeimg_height/startsize)+resizeimg_starty-15 var preloadimg=new Image() preloadimgsrc=imgsrc var isNav, isIE var offsetX, offsetY var selectedObj if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } function setZIndex(obj, zOrder) { obj.zIndex = zOrder } function shiftTo(obj, x, y) { if (isNav) { if (document.layers) { document.resizeimagediv.document.write("<img src="+imgsrc+" width="+(-resizeimg_startx+x+15)+" height="+(-resizeimg_starty+y+15)+">") document.resizeimagediv.document.close() } document.gripimagediv.left=x document.gripimagediv.top=y } else { resizeimagediv.innerHTML="<img src="+imgsrc+" width="+(-resizeimg_startx+x+15)+" height="+(-resizeimg_starty+y+15)+">" document.all.gripimagediv.style.posLeft=x document.all.gripimagediv.style.posTop=y } } function setSelectedElem(evt) { if (isNav) { var testObj var clickX = evt.pageX var clickY = evt.pageY for (var i = document.layers.length - 1; i >= 0; i--) { testObj = document.layers[i] if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height) && (testObj.name=="gripimagediv")) { selectedObj = testObj setZIndex(selectedObj, 100) return } } } else { var imgObj = window.event.srcElement if (imgObj.parentElement.id.indexOf("gripimage") != -1) { selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } } selectedObj = null return } function dragIt(evt) { if (selectedObj) { if (isNav) { shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) } else { shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) return false } } } function engage(evt) { setSelectedElem(evt) if (selectedObj) { if (isNav) { offsetX = evt.pageX - selectedObj.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } return false } function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null } } function setNavEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } } function init() { if (isNav) { setNavEventCapture() } document.onmousedown = engage document.onmousemove = dragIt document.onmouseup = release if (document.all) { resizeimagediv.innerHTML="<img src="+imgsrc+" width="+Math.ceil(resizeimg_width/startsize)+">" document.all.resizeimagediv.style.posLeft=resizeimg_startx document.all.resizeimagediv.style.posTop=resizeimg_starty document.all.gripimagediv.style.posLeft=gripimg_startx document.all.gripimagediv.style.posTop=gripimg_starty } if (document.layers) { document.resizeimagediv.document.write("<img src="+imgsrc+" width="+Math.ceil(resizeimg_width/startsize)+">") document.resizeimagediv.document.close() document.resizeimagediv.left=resizeimg_startx document.resizeimagediv.top=resizeimg_starty document.gripimagediv.left=gripimg_startx document.gripimagediv.top=gripimg_starty } } // - End of JavaScript - --> </SCRIPT> <style type="text/css"> A, A:Visited, A:Active { color:FFFFFF; } A:Hover { color:FF0000; } .baselinestyle { position: absolute; left:10px; top:180px; font-size:8pt; font-family:Verdana; color:FFFFFF; } </STYLE>
Insert into <BODY>
<BODY bgcolor=#000000 onLoad="init()"> <DIV ID="resizeimagediv" style="position:absolute;top:-3000px;"></DIV> <DIV ID="gripimagediv" style="position:absolute;top:-3000px;"><IMG NAME="gripimage" SRC="grip201.gif"></DIV>
Other Options