5 replies to this topic

[amirali7089]

Hello friends.
I am new here in this site but it looks greate.
I am creating a site and using a <div> with 900px width and 400px height. now i want to put 3 image in this div and I have 3 menu. I want a code on this menu which work with OnMousOver.
I wrote this code on my HTML
<img src="somthing.png" onmousemove="remove_pic()" id="main_pic">

and in the javascript code i have this one

function remove_pic(){
var i=1;
var opacity=0.9;
for(i=1;i<=10;i++){
element=document.getElementByid('main_pic');
setTimeout(element.style.opacity=$opacity,500);
$opacity=$opacity - 0.1;
}
}

i dont know why this does not work i know opacity just work on firefox but it does not work on fire fox too.
I appriciate any help.
}

[BlaineSch]

Different browsers handle it all differently. Your code looks fine but it's setting a style not all browsers support.

I'd recommend using a framework. They have functions like "fadeIn()" and "fadeOut" that are cross browser supported.

jQuery: The Write Less, Do More, JavaScript Library

MooTools - a compact javascript framework

[RhetoricalRuvim]

Would this CSS Image Opacity / Transparency page help? That's what I used, when I wanted to make my own opacity-handling code.

[gokuajmes]

just to explain how easy it is to fadein the images, element here is a code snippet. Please add the jquery library as script source in the head of your document.
ex:

//time period of fading, 1000 msec = 1 sec
var time = 1000;
$(#'main_pic').fadeIn(time,callback);

//function executed when fading is done
function callback(){
alert('Image has been faded in');
}

Edited by gokuajmes, 02 January 2011 - 08:16 PM.
added a id indicator

[amrosama]

gokuajmes said:

just to explain how easy it is to fadein the images, element here is a code snippet. Please add the jquery library as script source in the head of your document.
ex:

//time period of fading, 1000 msec = 1 sec

var time = 1000;

$(#'main_pic').fadeIn(time,callback);


//function executed when fading is done

function callback(){

alert('Image has been faded in');

}

this:

$(#'main_pic').fadeIn(time,callback);

should be

$('#main_pic').fadeIn(time,callback);

:amr:

[gokuajmes]

haha u got me there amro.. thanks for the correction