Image over javascript

January 11th, 2009

Hello!

I am using quite often this script, it’s a very simple on but helpful becouse I designed it to be standard.

Well the images used should be in the folowing format: <name>.<extension> and <name>_over.<extension>

And the script is the folowing:

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

<script type="text/javascript">
function over(obj)
{
	var length=obj.src.length;
	var index_ext=0;
	while (obj.src.indexOf('.',index_ext+1)!=-1)
	 {
		index_ext=obj.src.indexOf('.',index_ext+1)
	 }
	var extension=obj.src.substring( index_ext , length);
	obj.src=(obj.src.substring(0,index_ext)+"_over"+extension);
}
function out(obj)
{
	var length=obj.src.length;
	var index_ext=0;
	while (obj.src.indexOf('.',index_ext+1)!=-1)
	 {
	 index_ext=obj.src.indexOf('.',index_ext+1)
	 }
	var extension=obj.src.substring( index_ext , length);
	var idx_ov=0;
	obj.src=(obj.src.substring(0,index_ext-5)+extension);
}
</script>

And the usage is as folows:

<img onmouseover="over(this)" onmouseout="out(this)" src="buton.jpg" alt="" />

And here is an example:

Tags: ,
Posted in Design, Web development | No Comments »