|
|
|
|
Zoom.
1/2
Dzia│a pod Navigatorem oraz Explorerem
Zoom to skrypt powoduj╣cy umieszczenie obrazka na stronie i powiΩkszenie go na ┐yczenie u┐ytkownika.Przyk│ad znajdziesz poni┐ej:
Kliknij na obrazek.
Fajny efekt prawda :)
Teraz przejµmy do setna sprawy:
Tworzymy plik o nazwie zoom.htm i umieszczamy w nim poni┐szy kod pomiΩdzy znacznikami <head> </head>:
<STYLE TYPE="text/css">
#elZoom {
position: absolute;
visibility: hidden;
}
#elMessage {
position: absolute;
left: 0; top: 0;
width: 200;
visibility: hidden;
text-align: center;
color: yellow;
font-size: 10pt;
font-weight: bold;
font-family: Arial;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
var bV=parseInt(navigator.appVersion);
NS4=(document.layers) ? true : false;
IE4=((document.all)&&(bV>=4))?true:false;
ver4 = (NS4 || IE4) ? true : false;
zoomed = false;
scale = 4;
if (ver4) {
if (NS4) { document.captureEvents(Event.CLICK) }
firstZoom = true;
document.onclick = findIt;
} //endif (ver4)
function findIt(e) {
gotit = false;
if (IE4) {
whichIm = event.srcElement;
if (whichIm.name && whichIm.name.indexOf("imZ") != -1) {
window.event.returnValue = false;
gotit = true
}
else {
window.event.returnValue = true;
}
}
else {
l = e.pageX; t = e.pageY;
for (i=0; i<document.images.length; i++) {
if (document.images[i].name.indexOf("imZ") != -1) {
imX1 = document.images[i].x;
imX2 = imX1 + document.images[i].width;
imY1 = document.images[i].y;
imY2 = imY1 + document.images[i].height;
if ((l >= imX1 && l <= imX2) && (t >= imY1 && t<= imY2)) {
whichIm = document.images[i];
gotit = true; break;
}
}
}
}
if (gotit) { zoomOut(whichIm); return false }
else { if (zoomed) {zoomIn()}; return true }
} //end findIt
function zoomIn() {
if (firstZoom) {
document.elMessage.visibility = "hidden";
firstZoom = false;
}
document.elZoom.visibility='hidden';
zoomed=false;
} //end ZoomIn
function showMess() {
if (firstZoom) {
document.elMessage.left = parseInt(document.elZoom.left) + 10;
document.elMessage.top = parseInt(document.elZoom.top) + 10;
document.elMessage.visibility = "visible" }
}
function zoomOut(whichIm){
if (zoomed) {zoomIn(); return}
newWidth = parseInt(whichIm.width * scale);
newHeight = parseInt(whichIm.height * scale);
bigImStr = "<A HREF='javascript:zoomIn()'>";
bigImStr += "<IMG NAME='imBig' SRC=\"" + whichIm.src + "\" WIDTH=" + newWidth + " HEIGHT=" + newHeight + " BORDER=0>";
bigImStr += "</A>";
if (NS4) {
with (document.elZoom.document) {
open();
write(bigImStr);
close();
}
}
else { elZoom.innerHTML = bigImStr }
if (IE4) {
document.elZoom.left = whichIm.offsetLeft + whichIm.hspace;
document.elZoom.top = whichIm.offsetTop;
winWidth = document.body.clientWidth;
winHeight = document.body.clientHeight;
winPosEl = elZoom.offsetTop - document.body.scrollTop;
}
else {
document.elZoom.left = whichIm.x;
document.elZoom.top = whichIm.y;
winWidth = innerWidth;
winHeight = innerHeight;
winPosEl = document.elZoom.top - pageYOffset;
}
if (parseInt(document.elZoom.left) + newWidth > winWidth)
{ document.elZoom.left = (winWidth - newWidth - 30) }
if (winPosEl + newHeight > winHeight) {
newPos = (winHeight - (winPosEl + newHeight) - 10)
document.elZoom.top = parseInt(document.elZoom.top) + newPos
}
document.elZoom.visibility = "visible";
showMess();
zoomed = true;
} //end zoomOut
//-->
</SCRIPT>Pierwsza czΩ£µ tego skryptu objΩta jest w znacznikach <style> </style>.Jest to element Cascading Style Sheets.Ta czΩ£µ jest do£µ wa┐na gd┐ dziΩki nim mo┐ecie manipulowaµ skryptem.Ja nie bΩdΩ wyja£nia│ tajnik≤w styli,je£li nie macie o nich pojΩcia to zapraszam na stronΩ http://www.x86.info.pl/mfcclub/dhtml/default.htm gdzie poznacie podstawy CSS.
Dalsza czΩsµ na stronie 2.
Je£li masz jakie£ uwagi to: |
 |
Dane techniczne: |
|
|
Opracowanie graficzne i merytoryczne - Cruger dnia 29 lipiec, 1998.Strona zosta│a opracowana dla przegl╣darek Netscape'a4.x i Explorera4.x w rozdzielczo£ci 800x600 lub wy┐szej. |
