Javascript e firefox

04-04-2007, 11.45.10

ero interessato a tale javascript

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style>
input,select{font-family:verdana;font-size:8pt}
</style>
<script language=javascript>
!--
var img = new Image()		
var tinggi = 50			
var lebar = 50			
var zoom = 1			
var flag=false		
var lebarX = screen.width	
var tinggiY = screen.height	
img.src = "prova.gif"		
document.write("<span id=span1 onmousemove=show() style=\"position:relative;height:" + img.height + ";width:" + img.width + ";\">")
document.write("<div id=id2 style=\"position:absolute;height:" + img.height + ";width:" + img.width + ";left:0;top:0;\">")
document.write("<img src=" + img.src + " style=\"filter:alpha(opacity=30)\">")
document.write("</div>")
document.write("<div id=id1 style=\"overflow:hidden;position:absolute;height:" + img.height + ";width:" + img.width + ";left:0;top:0;clip:rect(0 " + lebar + " " + tinggi + " 0)\">")

document.write("<img src=" + img.src + " height=" + img.height*zoom + " width=" + img.width*zoom + ">")

document.write("</div>")

document.write("</span>")
function ganti(what){
var angka = new Array();
angka[1] = 1
angka[2] = 1.5
angka[3] = 2
angka[4] = 3

if(what=='luas'){
  if (form1.lkotak.selectedIndex) tinggi = lebar = form1.lkotak.selectedIndex * 50
}  

if(what=='zoom'){

  if (form1.bzoom.selectedIndex) zoom = angka[form1.bzoom.selectedIndex]

  document.images(1).height = img.height*zoom

  document.images(1).width = img.width*zoom  

}  

}



function show(){

var x = window.event.clientX + document.body.scrollLeft 

var y = window.event.clientY + document.body.scrollTop

if(!flag){

  document.all.span1.style.visibility = "visible"

  document.all.id1.style.left=-x*(zoom-1)

  document.all.id1.style.top=-y*(zoom-1)

  document.all.id1.style.clip="rect(" + eval(y*zoom-tinggi/2) + " " + eval(x*zoom+lebar/2) + " " + eval(y*zoom+tinggi/2) + " " + eval(x*zoom-lebar/2) + ")" 

  document.all.id1.style.height = img.height - parseInt(document.all.id1.style.top)

  document.all.id1.style.width = img.width - parseInt(document.all.id1.style.left)

}

}



-->

</script>



<!-- and put this on the BODY section -->



<body topmargin=0 leftmargin=0>

<p align=center>

<font face=verdana size=1>

<form name=form1>



<select name=lkotak onchange=ganti('luas')>

<option>--Luas Kotak--</option>

<option>50x50</option>

<option>100x100</option>

<option>150x150</option>

<option>200x200</option>

</select>&nbsp;



<select name=bzoom onchange=ganti('zoom')>

<option>--Zoom--</option>

<option>1x</option>

<option>1.5x</option>

<option>2x</option>

<option>3x</option>

</select>

</form>

</font>

</body>

http://www.allwebfree.it/listascript/34.html

Con ie funziona ma ci sono problemi coi colori con firefox non funziona :(

ne ho trovato 1 altro ancora + interessante avete idea di come possa essere realizzato?? :

http://www.museotaranto.it/necropoli/necropoli.html

**dbpiante** · 04-04-2007, 12.02.59

Codice HTML:

<html>
<head>
  <title> </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<style type="text/css">
		body
	{
	margin: 0;
	padding: 0;
	background-color: #fff;
		}

		#info
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			text-align: center;
			padding: 10px;
			font-family: Arial, Helvetica, sans-serif, Arial Narrow;
			background-color: #eee;
			border-bottom: solid 1px #ccc;
		}

		#binding
		{
			position: absolute;
			top: 75px;
			left: 50%;
			padding: 0;
			margin-left: -475px;
		}

		#message
		{
			font-family: Arial, Helvetica, sans-serif, Arial Narrow;
		}
		
		.magnifier
		{
			position: absolute;
			border: solid 1px #000;
			background-repeat: no-repeat;
			background-color: #fff;
			
		}
		
		.magnifierShadow
		{
			position: absolute;
			background: transparent;
			padding: 0;
			margin: 0;
		}
		
		.magnifierController
		{
			color: #999;
			font-family: Arial, Helvetica, sans-serif, Arial Narrow;
			font-size: 10pt;
		}
		
		.magnifierControllerContainer
		{
			padding: 10px;
		}

		.magnifierControllerPrefix
		{
			color: #111;
		}
		
		.magnifierControllerButton
		{
			color: #666;
			background-color: #eee;
			border: solid 1px #ddd;
			padding: 0px 4px 0px 4px;
			/*text-shadow: dimgray 0px 0px 3px;*/
		}
		
		.magnifierControllerButtonSelected
		{
			background-color: #ccc;
			border: solid 1px #aaa;
			color: #333;
			font-weight: bold;
			padding: 0px 4px 0px 4px;
			/*text-shadow: dimgray 0px 0px 3px;*/
		}
	body,td,th {
	font-family: Arial, Helvetica, sans-serif, Arial Narrow;
	font-size: 14px;
	color: #000000;
}
a:link {
	color: #FF0000;
}
a:visited {
	color: #FF0000;
}
a:hover {
	color: #FF0000;
}
a:active {
	color: #FF0000;
}
</style>

	<script type="text/javascript">
		var kShadowPadding = 17;
		
		var kDefaultMagnifierSize = 2; // index into the arrays below
		
		var kMagnifierSizes = new Array(0, 100, 150, 300);
		var kMagnifierSizeNames = new Array('off', 'piccolo', 'medio', 'grande');
		
		var kControllerPrefix = 'lente:&nbsp;';
		

		function MagnifierPosition()
		{			
			this.style.left = Math.round(this.xPosition - 1 - this.size/2) + "px"; // -1 to account for the border
			this.style.top = Math.round(this.yPosition - 1 - this.size/2) + "px";
			
			this.shadow.style.left = Math.round(this.xPosition - this.size/2 - kShadowPadding) + "px";
			this.shadow.style.top = Math.round(this.yPosition - this.size/2 - kShadowPadding) + "px";
			
			var magnifierCenterX = Math.round(this.xPosition * this.xMultiplier - this.size/2);
			var	magnifierCenterY = Math.round(this.yPosition * this.yMultiplier - this.size/2);
				
			this.style.backgroundPosition = -magnifierCenterX + "px " +
											-magnifierCenterY + "px";
		}
		
		function ControllerSizeButtonClick(event)
		{
			if (!event) event = window.event;
			
			var button = event.currentTarget || event.srcElement;
			
			button.parentNode.magnifier.resize(button.magnifierSize);
		}
		
		function MagnifierResize(size)
		{
			this.size = kMagnifierSizes[size];
			
			for (var i=0; i < this.controller.sizeButtons.length; i++)
			{
				if (i == size)
					this.controller.sizeButtons[i].className = "magnifierControllerButtonSelected";
				else
					this.controller.sizeButtons[i].className = "magnifierControllerButton";
			}
			
			if (this.size == 0)
			{
				this.shadow.style.display = "none";
				this.style.display = "none";
			}
			else
			{
				var shadow = this.shadow;
				var shadowSize = this.size + 2 * kShadowPadding;
				
				// MSIE 5.x/6.x must be treated specially in order to make them use the PNG alpha channel
				var shadowImageSrc = "shadow" + size + ".png";
				if (shadow.runtimeStyle)
					shadow.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
											     shadowImageSrc +
												 "', sizingMethod='scale')";
				else
					shadow.style.backgroundImage = "url(" + shadowImageSrc + ")";
				shadow.style.width = shadowSize + "px";
				shadow.style.height = shadowSize + "px";
				shadow.style.display = "block";
				
				if (this.runtimeStyle) // msie counts the border as being part of the width
					this.size += 2; // must compensate
				
				this.style.width = this.size + "px";
				this.style.height = this.size + "px";
				this.style.display = "block";
				this.position();
			}
		}
		
		function MagnifierMouseDown(event)
		{
			if (!event) event = window.event;
			
			document.body.magnifier = this;
			this.inDrag = true;
			if (event.pageX)
			{
				this.startX = event.pageX;
				this.startY = event.pageY;
			}
			else if (event.clientX)
			{
				this.startX = event.clientX;
				this.startY = event.clientY;
			}
			else
			{
				alert("don't know how to get position out of event");
				return;
			}
			this.savedCursor = this.style.cursor;
			this.style.cursor = "crosshair";
		}
		
		function MagnifierMouseUp()
		{
			if (this.inDrag)
			{
				this.inDrag = false;
				this.style.cursor = this.savedCursor;
				document.body.magnifier = null;
			}
		}
		
		function MagnifierDrag(event)
		{
			if (!event) event = window.event;
			var magnifier = this.magnifier; // we're actually in the body's onmousemove handler
			
			if (magnifier && magnifier.inDrag)
			{
				var eventX;
				var eventY;
				
				if (event.pageX)
				{
					eventX = event.pageX;
					eventY = event.pageY;
				}
				else if (event.clientX)
				{
					eventX = event.clientX;
					eventY = event.clientY;
				}
				else
				{
					return;
				}
				
				magnifier.xPosition += eventX - magnifier.startX;
				magnifier.yPosition += eventY - magnifier.startY;
				
				magnifier.startX = eventX;
				magnifier.startY = eventY;
				
				magnifier.position();
			}
		}
		
		function loadMagnifier(baseID, zoomedURL, zoomedWidth, zoomedHeight)
		{
			// get the zoomed image (load as early as possible)
			var zoomedImage = document.createElement("img");
			zoomedImage.src = zoomedURL;
			
			// get the div's
			var base = document.getElementById(baseID);
			var magnifier = document.createElement("div");
		
			// get the regular image
			var normalImage = null;
			for (var i=0; i < base.childNodes.length; i++)
			{
				if (base.childNodes[i].tagName &&
					base.childNodes[i].tagName.toLowerCase() == "img")
				{
					normalImage = base.childNodes[i];
					break;
				}
			}
			
			if (normalImage == null)
			{
				alert("couldn't find normal image for magnifier " + baseID);
				return;
			}
			
			magnifier.xMultiplier = zoomedWidth/normalImage.width;
			magnifier.yMultiplier = zoomedHeight/normalImage.height;
			
			magnifier.size = kMagnifierSizes[kDefaultMagnifierSize];
			magnifier.xPosition = normalImage.width - magnifier.size/2 - 20;
			magnifier.yPosition = normalImage.height - magnifier.size/2 + 30;
			
			magnifier.id = baseID + "Magnifier";
			magnifier.className = "magnifier";
			
			// styles (only dynamic ones, rest are part of the class)
			magnifier.style.backgroundImage = "url(" + zoomedURL + ")";
			
			// functions
			magnifier.onmousedown = MagnifierMouseDown;
			magnifier.onmouseup = MagnifierMouseUp;
			document.body.onmousemove = MagnifierDrag; // we attach this handler to the body because if the user moves
													   // the mouse fast enough, it'll go outside the boundaries of the
													   // magnifier, and then the magnifier's mousemove handler won't fire

			magnifier.position = MagnifierPosition;
			magnifier.resize = MagnifierResize;
			
			// controller
			var controller = document.createElement("span");
			
			controller.id = baseID + "MagnifierController";
			controller.className = "magnifierController";
			
			var controllerPrefix = document.createElement("span");
			controllerPrefix.innerHTML = kControllerPrefix;

			controllerPrefix.className = "magnifierControllerPrefix";
			controller.appendChild(controllerPrefix);
			
			controller.sizeButtons = new Array(kMagnifierSizes.length);

			

			for (var i=0; i < kMagnifierSizes.length; i++)
			{
				var button = document.createElement("span");
				button.innerHTML = kMagnifierSizeNames[i];
				button.className = "magnifierControllerButton";
				button.onclick = ControllerSizeButtonClick;
				button.magnifierSize = i;
				
				controller.sizeButtons[i] = button;
				controller.appendChild(button);
			}
			
			// shadow
			var shadow = document.createElement("div");
			
			shadow.id = baseID + "MagnifierShadow";
			shadow.className = "magnifierShadow";
			
			// point objects at each other
			magnifier.controller = controller;
			controller.magnifier = magnifier;
			magnifier.shadow = shadow;
			
			// add to document and lay out

			var controllerContainer = document.createElement("div");

			controllerContainer.className = "magnifierControllerContainer";

			controllerContainer.appendChild(controller);

			base.insertBefore(controllerContainer, document.getElementById("message"));
			base.appendChild(shadow);
			base.appendChild(magnifier);
			magnifier.resize(kDefaultMagnifierSize); // also positions
		}
	</script>
</head>

<body>
<center>

<div id="binding"> <img src="flegrei750.jpg" alt="Flegrei" width="750" height="529" id="baseImage">
</div>

<p>
  <script type="text/javascript">
	loadMagnifier("binding", "flegrei1600.jpg", 1600, 1129);
</script>
</p>

<br>
<p><b>Usa la lente in basso a destra (clicca e trascina il quadrato bianco)<br><br>

</center>
</body>
</html>

tasto destro e visualizza sorgente pagina :)

Ciao

Discussione: Javascript e firefox

LinkBack

Strumenti discussione

Display

Effetto lente di ingrandimento

Regole di scrittura