RSS
people
Oct 05 2009

Color image on mouseover of a gray one

By Vikash | Filled under: Web Design, javascript

The idea of this approach is following

1. Take two identical images: one colored and one grayscale.

2. Position them on exact same position. Grayscale image on top using CSS positioning and z-index.

<img src="gray.png" id="gray" 
       style=" position: absolute; top: 20px; left: 20px; z-index: 100">
<img src="color.png" id="color" 
       style=" position: absolute; top: 20px; left: 20px; z-index: 1">

3. Onmouseover event of the gray image, reduce its opacity to zero. It can be done by including following in the head section of the HTML page.

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {				
		$(this).find("img#gray").hover( function() {
			$(this).animate({ opacity: 0 }, 300);
                }, function(){
			$(this).animate({ opacity: 1 }, 300);
		});	
	});

I am using jquery here to animate the opacity change. The number “300″ indicated time of animation.

That’s it. We are done. Look at the demo here. (In the demo, I have separated the CSS, instead of inline styles)

No Comments | Tags: , , ,
Oct 13 2008

Create Dynamic Charts in FLASH

By Vikash | Filled under: Action Script 3.0, Flash, Web Design

So many times creating dynamic flash charts is needed. Many nice application like google analytics and various tracking systems use it. Yahoo developer network provides ‘ASTRA Flash Components’, using which this kind of work becomes very easy.

You can download astra flash component here.

After you install astra flash, it adds various classes including audio playback, menu bar & various chart classes. And creating these things become very trivial. For example, lets create a line chart using it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

 
//importing the package 
import com.yahoo.astra.fl.charts.*;
import com.yahoo.astra.fl.charts.series.*;
 
// Creating a new line chart
var chart = new LineChart();
 
// Reading the Data to plot from FLASHVARS
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var data:Array = String(paramObj["data"]).split(",");
for (var i:Number=0; i<data.length; i++) {
    data[i] = parseInt(data[i]);
}
var category:Array = String(paramObj["names"]).split(",");
 
 
/* Use the data we read as dataprovider
 We can also use simple arrays like :
 chart.dataProvider = [ 12, 45, 34, 23, 45]
 chart.categoryNames = ["Source1", "Source2","Source3","Source4","Source5"]
 
We can also use XML file to provide data. 
*/
 
chart.dataProvider = data;
chart.categoryNames = category;
 
//style the line and points
chart.setStyle("seriesMarkerSizes", [10]);
chart.setStyle("seriesLineWeights", [1]);
chart.setStyle("seriesColors", [0xed561b]);
 
//style the axis colors
chart.setStyle("horizontalAxisColor", 0xff9999);
chart.setStyle("verticalAxisColor", 0xff9999);
chart.setStyle("verticalAxisGridLineColor",  0xffeeee);
 
// Add the chart to the stage
this.addChild( chart );

Now, we have a chart which we can embed in a HTML file. All the data for the chart can be passed via Flashvars as follows:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="lineChart" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="flashvars" value="data=22,34,21,11,9&names=Windows,Linux,Unix,Mac,Other" />
<param name="movie" value="lineChart.swf" /><param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />	
<embed src="lineChart.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="lineChart" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="data=22,34,21,11,9&names=Windows,Linux,Unix,Mac,Other"/>
</object>
No Comments | Tags: , , , , , , ,
Older Entries