webmaster - skrypty - GRAFICZNE

SKRYPTY GRAFIKA

Skrypt wprowadza animację załadowanych plików graficznych, które automatycznie są przeładowywane.

<html>

<head>
<title>Draggable Slide Show</title>

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this header

// =======================================
// Place this script in the head of your
// page and set the following variables.
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'gify/SS1.jpg'
Pic[1] = 'gify/SS2.jpg'
Pic[2] = 'gify/SS3.jpg'
Pic[3] = 'gify/SS4.jpg'
Pic[4] = 'gify/SS5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function dd(e){
  if (!ddEnabled) return;
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false;  
}

function hideMe(){
  if (isIE||isNN) whichDog.style.visibility="hidden";
  else if (isN4) document.theLayer.visibility="hide";
}

function showMe(){
  if (isIE||isNN) whichDog.style.visibility="visible";
  else if (isN4) document.theLayer.visibility="show";
}

document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

</script>

</head>

<div id="theLayer" style="position:absolute;left:100;top:100;visibility:visible">

<table border="0" bgcolor="#CCCCFF" cellspacing="0" cellpadding="2">
<tr>
<td>

<table border="0" bgcolor="#8080FF" cellspacing="0" cellpadding="5">
<tr>
<td>
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td id="titleBar" style="cursor:move">
  <ilayer onSelectStart="return false">
  <layer onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
  <font face="Arial" color="#FFFFFF">Draggable Slide Show</font>
  </layer>
  </ilayer>
  </td>
  <td style="cursor:hand" align="right">
  <a style="text-decoration:none" href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial>X </font></a>
  </td>
  </tr>
  <tr>
  <td bgcolor="#FFFFFF" style="padding:0px" colspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU">

<img src="gify/SS1.jpg" name='SlideShow' width=200 height=300></td>
</tr>
</table>
  </td>
  </tr>
  </table> 
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<p>Click <a href="javascript:showMe();">Here</a> to Show</p>
<p>Click <a href="javascript:hideMe();">Here</a> to Hide</p>
</body>
</html>

Przeglądarka obrazków w charakterze slajdów, które automatycznie są przeładowywane.

var zoomfactor=0.05 //Enter factor (0.05=5%)

function zoomhelper(){
if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
}
}

function zoom(originalW, originalH, what, state){
if (!document.all&&!document.getElementById)
return
whatcache=eval("document.images."+what)
prefix=(state=="in")? 1 : -1
if (whatcache.style.width==""||state=="restore"){
whatcache.style.width=originalW
whatcache.style.height=originalH
if (state=="restore")
return
}
else{
zoomhelper()
}
beginzoom=setInterval("zoomhelper()",100)
}

function clearzoom(){
if (window.beginzoom)
clearInterval(beginzoom)
}

</script>
</head>
<body>

<a href="#" onmouseover="zoom(99,100,'myimage','in')" onmouseout="clearzoom()">Zoom In</a> | <a href="#" onmouseover="zoom(99,100,'myimage','restore')">Normal</a> | <a href="#" onmouseover="zoom(120,60,'myimage','out')" onmouseout="clearzoom()">Zoom Out</a>
<div style="position:relative;width:99;height:100"><div style="position:absolute">
<img name="myimage" src="gify/me1.gif">
</div></div>

<a href="#" onmouseover="zoom(99,100,'myimage2','in')" onmouseout="clearzoom()">Zoom In</a> | <a href="#" onmouseover="zoom(99,100,'myimage2','restore')">Normal</a> | <a href="#" onmouseover="zoom(99,100,'myimage2','out')" onmouseout="clearzoom()">Zoom Out</a>
<div style="position:relative;width:120;height:60"><div style="position:absolute">
<img name="myimage2" src="gify/me.gif">
</div></div>

Skrypt zmienia rozmiary obrazków, zoom-ing w trybie ciągłym: zwiększanie/zmniejszanie pliku graficznego.

Skrypt pozwala wyświetlać na żądanie konkretne grafiki, znajdujące się na rozwijanej liście.

Wstaw w ramach HEAD

// =======================================
// set the following variables
// =======================================

// Set speed (milliseconds)
var speed = 3000

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '../grafika/ami.gif'
Pic[1] = '../grafika/pcq.gif'
Pic[2] = '../grafika/enter.gif'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   document.images.SlideShow.src = preLoad[j].src
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', speed)
}

</script>

Definicja BODY

Wstaw w ramach BODY

Skrypt pozwala samoczynnie wyświetlać sekwencję grafik. Można regulować częstotliwość wyświetlania w milisekundach.

//Generic Drag Script- � Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com

var ie=document.all
var ns6=document.getElementById&&!document.all

var dragapproved=false
var z,x,y

function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}

function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"

while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="drag"){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

</head>
<img src="adres gifa" class="drag">
<img src="adres gifa" class="drag">
<img src="adres gifa" class="drag">
<img src="adres gifa" class="drag">
</html>

Fajny skrypt do przesuwania obrazków.

Lustrzane odbicie obrazka (lub w wodzie).

Podświetlana ramka obrazka. Efekt migającej ramki po najechaniu kursorem na obrazek.

Wstaw w ramach HEAD

Wstaw w ramach BODY

//script by Erik F - die_schlampe@hotmail.com

s = 50; // rozmiar swiatelka
vp = 50; // widoczna czesc obrazka w procentach
startx = 0; // pozycja od gory swiatelka po zaladowaniu skryptu
starty = 0; // pozycja od lewej strony swiatelka po zaladowaniu skryptu

//////////////////////////////////////////////////////////////////
//  Nie edytowac  //
//////////////////////////////////////////////////////////////////

var IE = document.all?true:false

function moveL()
{
xv = tempX;
yv = tempY;
myimage.filters.light.MoveLight(1,xv,yv,s,true);
}

if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0

function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY

if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}
  if (t)
  {  
   moveL();
  }

return true
}

var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}

</script>

Podświetlany obrazek. Efekt oświetlania obrazka latarką czy też reflektorem.

Wstaw w ramach HEAD

var ie=document.all
var ns=document.layers
var ns6=document.getElementById&&!document.all

function enlarge(which,e){
//Render image code for IE 4+ and NS6
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (crossobj.style.visibility=="hidden"){
crossobj.style.left=ns6? pageXOffset+e.clientX : document.body.scrollLeft+event.clientX
crossobj.style.top=ns6? pageYOffset+e.clientY : document.body.scrollTop+event.clientY
crossobj.innerHTML='<div align=right id=drag><b onClick=closepreview()>X</b></div><img src="'+which+'">'
crossobj.style.visibility="visible"
}
else
crossobj.style.visibility="hidden"
return false
}
//Render image code for NS 4
else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}
//if NOT IE 4+ or NS 4, simply display image in full browser window
else
return true
}

function closepreview(){
crossobj.style.visibility="hidden"
}

</script>

//By Dynamicdrive.com

//drag drop function for NS 4////
/////////////////////////////////

var nsx,nsy,nstemp

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for IE 4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script>

Wstaw w ramach BODY

<a href="../design/des9.jpg" onClick="return enlarge('../design/des9.jpg',event)">Klikając na niego zobaczysz plik graficzny w pełnym rozmiarze</a>

Galeria z miniaturami. Przedstawia rzeczywistą wielkości grafiki po kliknięciu na miniaturkę lub link.

//Specify the slider's width (in pixels)
var sliderwidth=330
//Specify the slider's height (in pixels, pertains only to NS)
var sliderheight=100
//Specify the slider's scroll speed (larger is faster)
var slidespeed=4

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="../design/miniatury/des7.jpg" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="../design/miniatury/des8.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="../design/miniatury/des9.jpg" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="../design/miniatury/des10.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="../design/miniatury/des11.jpg" border=1></a>'

///////do NOT edit pass this line////////////////////////////////////

var copyspeed=slidespeed
//copy contents of leftrightslide into one variable
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide[i]+"  "

if (document.all){
//dynamically write out the marquee tag
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
//stop marquee when mouse is over it
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
//re-enable marquee when mouse is out
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",450)
intializeleftrightslide()
}
if (document.all)
ieslider.scrollAmount=slidespeed
}

//NS specific function for initializing slider upon page load
function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
document. ns_slider01.document.ns_slider02.document.close()
thelength=document.ns_slider01.document.ns_slider02.document.width
scrollslide()
}

//NS specific function for sliding slideshow
function scrollslide(){
if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
document.ns_slider01.document.ns_slider02.left-=slidespeed
setTimeout("scrollslide()",100)
}
else{
document.ns_slider01.document.ns_slider02.left=sliderwidth
scrollslide()
}
}
window.onload=regenerate2

//-->
</script>

Poziomy pokaz slajdów, kolejny sposób pokazywania grafiki.

Wstaw w ramy HEAD

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
        
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

</script>

Wstaw w ramach BODY

Bardzo fajny efekt pół przezroczystego obrazka, po najechaniu kursorem wraca do oryginału.

Pixelowanie grafiki po najechaniu myszką.

pozycjonowanie | gry | tworzenie stron www | Darmowe programy | strony www