Image Effects

Main >> Content >> HTML >> Image Effects

Transparent:

Faded edges:

Faded edges 2:

Resized image:

Upside-down image:

Mirror:

Picture frame:

Picture frame 2:

Tumbnail picture (click):

Black and white:

Blurred:

Fading on one side:

Fading right:

Fading left:

Invert colors:

Embossed:

Image button (push):

<!--[if gte IE 5.5000]>

.shadowcss{
position: relative;
top: -5px;
left: -5px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true');
}

</style>

<![endif]-->

/***********************************************
* Pop-it Image script- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

function updownshadow(){
if (event.srcElement.effect=="popshadow"){
shadowobj=event.srcElement
if (event.type=="mousedown"){
shadowobj.filters[0].color=shadowobj.mousedowncolor
shadowobj.style.left=shadowobj.style.top=0
}
else if (event.type=="mouseout" && event.fromElement.effect=="popshadow" || event.type=="mouseup"){
shadowobj.filters[0].color=shadowobj.mouseupcolor
shadowobj.style.left=shadowobj.style.top=shadowobj.filters[0].OffX*(-1)
}
}
}

if (document.attachEvent){
document.attachEvent("onmousedown", updownshadow)
document.attachEvent("onmouseup", updownshadow)
document.attachEvent("onmouseout", updownshadow)
}

</script>

Mouse-over effects

From one pic to another:

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
    pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
    {
    rollOverArr[pageImageName].outImg = new Image;
    rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
    }
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</script>

From faded to colored:

.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
}

</style>

/***********************************************
* Gradual Highlight image script- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

From gray to colored:

Spotlight:

<style>
<!--

#myimage{
filter:light
}

-->
</style>

//Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
//Code enhancements by Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script

s = 50; // the size of the spotlight
vp = 10; // the visibility percent of the picture
startx = 0; // the top position of your sportlight into the image (on start)
starty = 0; // the left position of your spotlight into the image (on start)

//////////////////////////////////////////////////////////////////
//		No need to edit below this line			//
//////////////////////////////////////////////////////////////////

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>

Pixel:

Drag picture around:

Marquee effects

Moving pictures (with spaces):

Moving pictures (without spaces):

Moving pictures with frame:

Blinking, moving pictures:

Vertical moving picture:

Vertical moving picture 2:

Image Effects

Main >> Content >> HTML >> Image Effects

Mouse-over effects

Marquee effects

Welcome

Follow me

Affiliates

Categories

Archives