Html Images Using Opacity Javascript

Let us see how's our website now? Are they looks nice and having a lot of visitor seeing our beautiful content and images? Yes, supposed to be they see our hardworking sharing tutorial for them, well , I guess you are still thinking and waiting for our new tutorial in html but before that take some coffee first and relax our self while the other still reading our previous tutorial. For the previous Slide show images Javascript Html tutorial CLICK HERE =>: Html Images SlideShow Javascript

Now Do you like to be learn more in our images that to looks good and attractive for their eyes? Yes!  that's why I'm here to share with you again and this is about Opacity images in our html.

What is Opacity in our Html or website? 

Opacity in our html is a kind of command or program that we need to make our images become transparent, to make blur, shadowing or adjusting their color or light in our images.

In our Dictionay:

The quality or state of being opaque.
Something opaque.
Obscurity; impenetrability.
Dullness of mind.


We have now a little information about Opacity.


Let start in our tutorial about Opacity.

This tutorial support of javascript in html, if we use script attribute in our html it must be beginning with <SCRIPT> and closing </SCRIPT>.


We are going to use our images above if how we blur it and light the images or making it into transparent and glow the images.

So Check our code: 

This code is a javascript language, you can use this code for the future if you like blurring images, just only copy my code below and paste to your website.

In our code for our images we are going to use the link tag attribute, and sizes into our images by using width and height and putting the opacity integer.

========================================================================

This is our code in javascript: 

Package code:

<script language=JavaScript>

<!--
var itv = 50;
var step = 10;
var start = 0;
var end = 0;
var currentOpac;

//This is changing the opacity for different browsers
function changeOpac(obj, opacity) {
var object = obj.style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function BeginOpacity(obj, s, e)
{
start = s;
end = e;
currentOpac = s;
theobject=obj;
changing=setInterval("opacityit(theobject)",itv);
}

function EndOpacity(obj, end){
clearInterval(changing);
changeOpac(obj, end);
}

function opacityit(obj){
if(start > end) {
if (currentOpac>end){
currentOpac = currentOpac - step;
changeOpac(obj,currentOpac);
}
else if (window.highlighting)
clearInterval(highlighting);
} else if(start < end) {
if (currentOpac<end){
currentOpac = currentOpac + step;
changeOpac(obj,currentOpac);
}
else if (window.changing)
clearInterval(changing);
}
}
//-->
</script>

========================================================================

Our code that to be call our images by the javascript languange. 

<a href="OUR LINK HERE IF YOU LIKE TO PUT"><img src="OUR IMAGES LINK FROM LOCAL OR SERVER LINK" width="INTEGER" height="INTEGER" border="0" style="FILTER: alpha(opacity=0);-moz-opacity: 0.4; opacity: 0.4;" onmouseover=BeginOpacity(this,0,0) onmouseout=EndOpacity(this,0)></a> // check the opacity code here, the 0,0 is our integer

// This code that we need to be use and we can edit it the opacity in our images,

========================================================================

Example no. 1

From Blurring to Light images:

For our Images using from blur to light, ( blurring if arrows not pointed in our images and light the images if we point the arrows in our images)

I will change the opacity by 40, 100. and check our code above and our example we use right now if what is the changes between of them.



<script language=JavaScript>

<!--
var itv = 50;
var step = 10;
var start = 0;
var end = 0;
var currentOpac;

//This is changing the opacity for different browsers
function changeOpac(obj, opacity) {
var object = obj.style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function BeginOpacity(obj, s, e)
{
start = s;
end = e;
currentOpac = s;
theobject=obj;
changing=setInterval("opacityit(theobject)",itv);
}

function EndOpacity(obj, end){
clearInterval(changing);
changeOpac(obj, end);
}

function opacityit(obj){
if(start > end) {
if (currentOpac>end){
currentOpac = currentOpac - step;
changeOpac(obj,currentOpac);
}
else if (window.highlighting)
clearInterval(highlighting);
} else if(start < end) {
if (currentOpac<end){
currentOpac = currentOpac + step;
changeOpac(obj,currentOpac);
}
else if (window.changing)
clearInterval(changing);
}
}
//-->
</script>


<a href=" http://guideinfoyou.blogspot.com/search/label/Javascript "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSNoRHhpKCOyTPvSIWnobFfma6DNKlam6qoVhfSPOd7hbTAUr4pqsWjPdiQxsg22YeznmdU_gbHuLUy6guqXvuTdIlZ5qLZcRA5RIkW7LZ_S2fbGfUOOXKTc95l5LuxqSbDfuPV7i5F4/s320/Images++Opacity.jpg" width="200" height="200" border="0" style="FILTER: alpha(opacity=40);-moz-opacity: 0.4; opacity: 0.4;" onmouseover=BeginOpacity(this,40,100) onmouseout=EndOpacity(this,40)></a>
// check the opacity code here.


In our browser looks like this.




========================================================================


Example no. 2

From Light images to Blurring :

For our Images using from light to blur, ( Light images if arrows not pointed in our images and blurring the images if we point the arrows in our images)

Here's our code to be.

<script language=JavaScript>
<!--
var itv = 50;
var step = 10;
var start = 0;
var end = 0;
var currentOpac;

//This is changing the opacity for different browsers
function changeOpac(obj, opacity) {
var object = obj.style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function BeginOpacity(obj, s, e)
{
start = s;
end = e;
currentOpac = s;
theobject=obj;
changing=setInterval("opacityit(theobject)",itv);
}

function EndOpacity(obj, end){
clearInterval(changing);
changeOpac(obj, end);
}

function opacityit(obj){
if(start > end) {
if (currentOpac>end){
currentOpac = currentOpac - step;
changeOpac(obj,currentOpac);
}
else if (window.highlighting)
clearInterval(highlighting);
} else if(start < end) {
if (currentOpac<end){
currentOpac = currentOpac + step;
changeOpac(obj,currentOpac);
}
else if (window.changing)
clearInterval(changing);
}
}
//-->
</script>

<a href=" http://guideinfoyou.blogspot.com/search/label/Javascript "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSNoRHhpKCOyTPvSIWnobFfma6DNKlam6qoVhfSPOd7hbTAUr4pqsWjPdiQxsg22YeznmdU_gbHuLUy6guqXvuTdIlZ5qLZcRA5RIkW7LZ_S2fbGfUOOXKTc95l5LuxqSbDfuPV7i5F4/s320/Images++Opacity.jpg " width="200" height="200" border="0" style="FILTER: alpha(opacity=100);-moz-opacity: 1.0; opacity: 1.0;" onmouseover=BeginOpacity(this,100,40) onmouseout=EndOpacity(this,100)></a>
// check the opacity code here.


In our browser looks like this.




========================================================================

So we are done in our images blurring and light in images, Try it now and design your website that to be cool in our visitors eyes.  Good luck.

Next to Html Marquee Scroll Stop And Play Hover

Return to:

Html Tutorial Introduction

Html Structure And Method

Basic Tags and Formatting

Adding links in Html Hyperlinks

Html Instruction Formatting Text

Html Working With Fonts

Html Creating Lists

Html Adding Images To Our Pages Or Website

Html Creating Image Maps
HTML Table Border

HTML Marquee Tag Direction
HTML Marquee Image Attribute

Html Marquee Behavior
Html Marquee Scroll Delay
Html Marquee Scroll Amount
Html Marquee Using Loop Attribute
Html Marquee Background Color
Html Images SlideShow Javascript
Html Blinking Text Or Images
Html Basic Using CSS
Html Form
Html Form Text Area
Html Form Select Tag list

If you like to see our Flash template Design/Template Page goes here:

Template Design

See all: Our Template