I cannot get this to work

[SiC]

Ok, I've been working on this for a day and its now working. I've tried everything that I could think of and its not working. Instead of posting all the code I'm just going to give a link if you guys wanna make an effort at looking at this.

http://www.drewhopkins.com/testing.html

There is actually 2 pictures there, a black and while one is under a color one and they are layered. The color one fades in when the mouse is on the picture therefore hiding the black and white one and when the mouse leaves the picture the color one fades away and shows the black and white picture again.

Hopefull someone can solve this for me.

/me bashes head into wall

[bisqui]

so what's the problem? looks like it's working to me

[SiC]

the images are not inside the table even though the img tags are inside the td tags. that is the problem i am having.

[SiC]

Now I got the pictures on top of each other and in the table. Theres still 1 problem though. If you look at the page there is still that empty spot where the picture had been moved up 350 pixels and you can select it like a image is there but there isnt one there. How would I get rid of that and bring up the bottom of the table?

[Stefan]

Your fade in fade out is not working at all on my browser. In fact it's not changing the images at all.
This I assume depends on many things.

Firstly you are using browser sprcific code in your JS that won't work in all browsers.

Secondly, you are using functions on your page BEFORE you have declared those functions (I havn't checked if it is incorrect according to the specs, but the programer in me tells me it's a bad idea).

[SiC]

I just wanted to get it working correctly in my browser for the moment. Now I will go and try to get it working in other browsers. I'm assuming your using Netscape?

By saying that im using the functions before declaring them are you meaning that I put the code at the bottom of the page instead of putting it in the head of the document?

***** Its Finished *******

An idea poped into my head (after a nights sleep, it was 3am when I was working on this before) and it was to get rid of the z-index layers and just make the b&w picture the background of a td cell and then put the color one in the cell, therefore having the same effect of the pictures being layered but then I dont have to mess with the containers and positioning and things. It finally works!!!

The new one is here:
http://www.drewhopkins.com/testing2.html

[bisqui]

the filter effects only work in IE so you probably won't find an easy cross browser solution. Maybe an animated gif, but that would be huge. Also, it's really slow and choppy in IE5. I assume you're using IE6 cause it looks fine there. I have to say though, it's a really cool effect. May have to borrow it :)

[Stefan]

Originally posted by SiC
I'm assuming your using Netscape?


I'm using a "Gecko-family" browser (specifically Phoenix, but it works the same as NS7, Mozilla etc).


By saying that im using the functions before declaring them are you meaning that I put the code at the bottom of the page instead of putting it in the head of the document?


Yes that's what I meant. :)


It finally works!!!
http://www.drewhopkins.com/testing2.html

I think you forgot to upload the images, becuse they don't show up in neither IE 6 or Gecko.


BTW, if you want to mess with transparancy in a Geckobrowser you will find the info you need here
http://home.earthlink.net/~joefefifo/cawm/table4-4.html
Opacity btw is a CSS 3 function, but since CSS 3 isn't a finished spec (and things might thus change) and thus the implementation in Gecko is prefixed -moz-

[SiC]

So would I add


if ((document.color.-moz-opacity < 100) && (fade_state == 1) && (static_state == 0)) {
document.color.-moz-opacity += 5;
setTimeout("go_color()", 15);
}



along with



if ((document.color.filters.alpha.opacity < 100) && (fade_state == 1) && (static_state == 0)) {
document.color.filters.alpha.opacity += 5;
setTimeout("go_color()", 15);
}