Here I would like to share about “How could we display images randomly with the use of simple JavaScript“. I assume that you have basic knowledge of Jscript and know about the Arrays and Mathematical functions.

Here is the code of randomImage.js file,

function ev_random_img()

{

var myimages=new Array()

myimages[1]=”adv1.gif”
myimages[2]=”adv2.gif”
myimages[3]=”adv3.gif”
myimages[4]=”adv4.gif”
myimages[5]=”adv5.gif”

var ry=Math.floor(Math.random()*myimages.length)

if(ry==0){ry=1;}

var imgpath =  “images/” + myimages[ry];
document.getElementById(’imgadv’).src = imgpath;

}

In the Above code I have defined an Array myimages and put the image name there, in second step I used Math.random to generate random numeric value and Math.floor fuction to round the value.

In Variable ‘imgpath’ I stored the complete path, as my images will be placed under ‘images’ folder that is why I made this string.

Finally by using getElementById method, I get the reference of the ‘image’ object with the specified ID. I have used ‘.src ‘ property to change the source path of image with the randomly generated path.

On the HTML page, just place

<script src=”script/ randomImage.js ” ></script>

At the head and put an image holder with ID ‘imgadv’.

<img src=”../” alt=”#” width=”348″ height=”203″ hspace=”10″ />

similarly If you want to change background style then follow all that same just a small change at the last

var bgpath =  “url(images/adv/splats/” + bgimages[ry] + “)”;
document.getElementById(’splats’).style.backgroundImage = bgpath;

where ’splats’ is the ID given to the table or DIV at the HTML page. Variable ‘bgpath’ will have the complete string of path.

In Addition to above, add the lines below for random background image:

var bgimages = new Array()
bgimages[1] = “yellow-splats.gif”;
bgimages[2] = “aqua-splats.gif”;
bgimages[3] = “green-splats.gif”;
bgimages[4] = “blue-splats.gif”;
bgimages[5] = “purple-splats.gif”;
bgimages[6] = “pink-splats.gif”;

var bgpath =  “url(images/adv/splats/” + bgimages[ry] + “)”;

//document.getElementById(’splats’).style.backgroundImage = ‘url(images/adv/adv2.gif)’;
document.getElementById(’splats’).style.backgroundImage = bgpath;

Few minutes before I tried something new with Dreamweaver CS3, and I  found it little interesting. As for the same thing I have to do lot of  coding in JavaScript but now same things has been done in a single  click. I am talking about the “Slider” or some says “DropInBox”.  Practically I will try to slide anything like image, text, table, DIV  etc on the page. It will work similar to the marquee tag but will be  done in different way and with the help of Dreamweaver’s Behavior.

First of all create a DIV element give it an ID “myslide”. This DIV  will work as in container for the other HTML elements placed inside,  it’s on you what else you need to put. I have inserted a table inside  the DIV container  “myslide”. Code will look like this:

<div id=”myslide” style=”width:400px;” >
<table width=”354″ border=”1″>
<tr>
<td><p>Content for New Div Tag Goes Here</p></td>
</tr>
</table>
</div>

Ummm….We’re done with coding now. Let’s work with “Behavior” You will find “behavior” under “Window” menu or press Shift + F4.  Click on (+) for drop down, select effects>Slide.

On Clicking you will find another popup window, like below

Give value to the “target element–> div ’slide’”. Others option like

• “effect duration” is for the time that box will take from one position  to other;
• “effect” is to tell slide whether object slide upside or downside;
• “slide up” is for upper-y position of page;
• “slide down” is for down-y position of page;

Press OK to finalize it.

Now you will see, it has added code similar to below one on the header

<script src=”SpryAssets/SpryEffects.js” type=”text/javascript”></script>
<script type=”text/javascript”>
<!–
function MM_effectSlide(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from,  to: to, toggle: toggle});
}
//–>

</script>

“SpryEffects.js” is JavaScript file which has the real coding.

In your code you will find some modifications done by the software:

<div id=”slide” style=”width:400px;” onClick=”MM_effectSlide(’slide’,  1000, ‘0′, ‘200px’, false)”>

Just move the “MM_effectSlide(’slide’, 1000, ‘0′, ‘200px’, false)”  from DIV element to Body?s onload, like given below:

<body onload=”MM_effectSlide(’slide’, 1000, ‘0′, ‘200px’, false)”>

Enjoy the Dreamweaver’s DropInBox or slider in my language ;o)

Dreamweaver is a HTML editor which is used to develop and edit website  pages i.e. HTML, XHTML, CSS, PHP, ASP etc. In this software you need  to define a site first. It will help Dreamweaver to organize the files  used in the website.

Step 1 : Create a folder on your hard disk and name it. You can copy  in a few images or files if you want.
Step 2 : Open File Panel from the Window>File menu, or press F8. It  will open in the right side of software.

Step 3 : Click on Site>Manage Sites>New. You will see a window like  below  where you can enter the site details under the category Local  Info.

Step 4: After Step 3, a small window will appear which will have two  sections, on the left side you could see the list of your website(only  if you have added any earlier), and on the right side you will find  options ?New>Site?

Step 5 : Finally you will see ?Site Definition Window?, put site name  title, the local root folder of the same website(where you have placed  these website?s HTML files). Press Ok

You?re done now!

You will find lot of pages under File panel on the right side. Enjoy working in this environment.

Cheers!!!!

Let us Discuss about the current topic Adobe Flash player 10. The current Adobe Flash Player version released is 10.0.22.87 with  some of the known bugs fixed.

Featured Elements

• 3D object transformations

It has a support for the 3D objects with the help of Actionscript 3.0, There are many new class and method libraries of 3D.  With the help of these classes and libraries, Cool 3D effects can be created.

• Custom filters via Pixel Bender

This technology was originally meant for the image processing and creating filter and effects. This feature not only improves the quality and but as well as is meant to act as multi-Core and multiprocessing system. The Pixel Bender graph language is an XML-based language for combining individual pixel-processing operations (kernels) into more complex Pixel Bender filters. Pixel Bender development offers many advantages like Low learning curve, Parallel processing, Supports all bit-depths and Support by multiple Adobe applications

• Advanced text supportThis is the feature we always think of when we are using dynamic text or using custom fonts and re-size, so using of the text class we can achieve this. Text Object Class is taken from Mitsubishi Electric Research Labs (MERL) which is known as Saffron its some where similar to the concept of Microsoft’s ClearType,  which both works to improve anti-aliasing.

• Speex audio codec

Speex is an Open Source patent-free audio compression format designed for speech. The Speex Project aims to lower the barrier of entry for voice applications by providing a free alternative to expensive proprietary speech codecs. Moreover, Speex is well-adapted to Internet applications and it truely provides useful features that are not available in most other codecs. Finally, Speex is a part of the GNU Project and is available under the revised BSD license.  Speex is based on CELP and is designed to compress voice at bitrates ranging from 2 to 44 kbps. Some of Speex’s features include: Narrowband (8 kHz), wideband (16 kHz), and ultra-wideband (32 kHz) compression in the same bitstream, Fixed-point port, Intensity stereo encoding, Packet loss concealment, Variable bitrate operation (VBR),  Discontinuous Transmission (DTX),  Voice Activity Detection (VAD), Acoustic echo canceller, Noise suppression.

• Real Time Media Flow Protocol (RTMFP)

Real time media flow protocol or RTMFP  is the new communication protocol from Adobe which enables the main user to end user or to multiple users running multiple flash players as peer to peer connection or communication. Generally meant for rich application development using Adobe AIR framework.

• Dynamic sound generation

Dynamic sound generation will extend the existing sound class and create audio content over the existing audio in library, a sampleCallback event handler to extract the raw sound data from existing library. Which will make your application eassier to mix n tune your audio files ex- loading an external mp3 file mixing audio voice from mic and finally create your own.

• Vector data type

Vector data type is meant for creating a simplicity of data collection for improving performance. The advance vector data type is an introduction of a new Class called Vector, which is a Typed Array, as after having lot of POC its clear, that Vector data type has a significant performance improvements over using an Array, goodthing about Vector Class – it has mostly the methods of an Array.

Enhanced Features

1. Larger bitmap support
2. Graphics drawing API
3. Context menu
4. Hardware acceleration
5. Anti-aliasing engine (Saffron 3.1)
6. Read/write clipboard access
7. WMODE