PDA

View Full Version : change filters to an image in an array ?? maybe

chris_angell
10-03-2002, 09:13 PM
Hello, good day.. hope things are going well for you, for me they are looking ok apart from guess what ?? yep I have got stuck again.. I thank the forum ever so much, it has helped me no end..

my problem today is, I have an image:

<img id="imageID" src="images/robot_1.gif" style="filter: >

what I would like to do is change the filter to different ones in a sequence.. for example to change the style.filter of the image to

style="filter: flipv"
to
style="filter: blur(add=1, direction=20, strength=7)"
to
style="filter: blur(add=1, direction=45, strength=3)"

etc, etc can I set up an array.. but the thing is they have different paths ??

anyideas how I would code this... :eek:
mordred
10-03-2002, 09:39 PM
var filters = new Array(
"blur(add=1, direction=20, strength=12)",
"blur(add=1, direction=45, strength=3)"
);

var filterIndex = 0;

function filterIt() {
if (typeof ActiveXObject != "undefined") {
if (++filterIndex == filters.length) {
filterIndex = 0;
}
alert("yo");
document.all["imageID"].style.filter = filters[filterIndex];
}
}


Though I'm not sure about what you you meant with "paths"...
You also have to call the function filterIt() in a fashion that suits your purpose (setTimeout() and setInterval()), the snippet above will iterate through the filters array and on reaching the end, start with the first element again.
beetle
10-03-2002, 10:12 PM
Or maybe this...<HTML>
<HEAD>
<TITLE>Filter Test</TITLE>
<script language="javascript" type="text/javascript">
function setFilter(oID,i) {
var o = document.getElementById(oID);
var f = o.filters;
f[i].enabled = (!f[i].enabled);
}
function initFilters(oID) {
var o = document.getElementById(oID);
var f = o.filters;
for (var j=0; j<f.length; j++)
f[j].enabled = 0;
}
</script>
</HEAD>

<BODY onLoad="initFilters('tester')">
<img src="http://www.google.com/images/logo.gif" width="276" height="110" id="tester"
STYLE="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
progid:DXImageTransform.Microsoft.BasicImage(mirror=1)
progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=25)"><br>
<input type="button" value="Blur" onClick="setFilter('tester',0)"><br>
<input type="button" value="Mirror" onClick="setFilter('tester',1)"><br>
<input type="button" value="Alpha" onClick="setFilter('tester',2)"><br>
</BODY>
</HTML>
chris_angell
10-04-2002, 10:56 AM
thanks for the code, I have tried to put it into place... but I am comingh up with an error, what am I doing wrong ????

:eek:

<html>

<head>
<script language="javascript" type="text/javascript">

var filters = new Array(
"blur(add=1, direction=20, strength=12)",
"blur(add=1, direction=45, strength=3)",
"blur(add=1, direction=24, strength=1)",
"blur(add=1, direction=4, strength=40)"
);

var filterIndex = 0;

function filterIt() {
if (typeof ActiveXObject != "undefined") {
if (++filterIndex == filters.length) {
filterIndex = 0;
}
document.all["IMGFILTER"].style.filter = filters[filterIndex];
}
}
</script>

</head>

<BODY onLoad="FilterIt()">
<img src="http://www.google.com/images/logo.gif" ID="IMGFILTER" name="IMGFILTER"
STYLE="filter:blur(add=1, direction=2, strength=1)">
mordred
10-04-2002, 02:08 PM
FilterIt() != filterIt()

JavaScript is absolutely case-sensitive.
brothercake
10-04-2002, 02:46 PM
if (typeof ActiveXObject != "undefined")

is not an adequate test for filter support; you would get errors in the first build of ie5.5. A better test would be

if (obj.filters)
beetle
10-04-2002, 03:12 PM
You *may* run in to problems using filters as your variable name, since that is identical to the collection that references all of an object's filters.
mordred
10-04-2002, 03:25 PM
Originally posted by brothercake
if (typeof ActiveXObject != "undefined")

is not an adequate test for filter support; you would get errors in the first build of ie5.5. A better test would be

if (obj.filters)

Am I right in concluding that the first build of IE5.5 does not understand ActiveXObject? Though I never heard of it. Or do you mean filters were broken in ie5.5 (first build)?
mordred
10-04-2002, 03:32 PM
Originally posted by beetle
You *may* run in to problems using filters as your variable name, since that is identical to the collection that references all of an object's filters.

Does that really constitute a problem? The filters variable is tied to the window's namespace, and the other to the HTML element. From what I know they shouldn't interfer, but as you implied, one can never be too sure...
beetle
10-04-2002, 03:36 PM
Originally posted by mordred
Does that really constitute a problem?ya, I'm not sure, and didn't test it...but I've had some strange stuff happen before...in cases like these I usu apply Hungarian notation to the variable....
brothercake
10-04-2002, 05:42 PM
Originally posted by mordred


Am I right in concluding that the first build of IE5.5 does not understand ActiveXObject? Though I never heard of it. Or do you mean filters were broken in ie5.5 (first build)?


I mean the first build of IE5.5 has the same filter support as IE4/5 - so referencing it in that way will onyl work for opacity, otherwise it will err. Proper filters and transitions were introduced with IE5.5 SP2
chris_angell
10-08-2002, 02:56 PM
hello, so who won... the active x discussion :)

just a last thing from me.

when I run my function

filterit()

I want it to run the whole array but once, I have put it in..

setTimeout("filterit()",1000) this just keeps looping the array over and over..


what can I do so it runs the array just once ??????




:thumbsup:
mordred
10-08-2002, 03:34 PM
Don't know where you actually put the setTimeout now... but basically, upon reaching the last element of the array, you stop exectuing the function (or thinking vice versa, you call it only then again if the condition stated above is not true).

like


function filterIt() {
if (typeof ActiveXObject != "undefined") {
if (++filterIndex < filters.length) {
document.all["imageID"].style.filter = filters[filterIndex];
setTimeout('filterIt()', 1000);
}
}
}
chris_angell
10-08-2002, 03:56 PM
this is what I have tried. but the only problem I have is, it loops the array over and over and over and over ????


I am trying to get it to run once through the array (1 to 10) .... when activated..


function filterIt() {
if (typeof ActiveXObject != "undefined") {
if (++filterIndex == filters.length) {
filterIndex = 5;
}
document.all["imgrobot"].style.filter = filters[filterIndex];
setTimeout('filterIt()', 1000);
}
}

this is the code here, what have I done :eek:
beetle
10-08-2002, 04:06 PM
I haven't scrutinized the function completely, but something like this...

function filterIt() {
if (typeof ActiveXObject != "undefined") {
if (++filterIndex == filters.length) {
filterIndex = 5;
}
document.all["imgrobot"].style.filter = filters[filterIndex];
var t = setTimeout('filterIt()', 1000);
if (filterIndex > filters.length) clearTimeout(t);
}
}
chris_angell
10-08-2002, 04:17 PM
is this wrong, what have I done

}:confused:

var filterIndex = 0;
var t = 3000;

function filterIt() {
if (typeof ActiveXObject != "undefined") {
if (++filterIndex == filters.length) {
filterIndex = 5;
}
document.all["imgrobot"].style.filter = filters[filterIndex];
var t = setTimeout('filterIt()', 0);
if (filterIndex > filters.length) clearTimeout(t);
}
beetle
10-08-2002, 04:24 PM
How come you have hard-coded this sucker to loop down to 5 here? I didn't you say your array was 10 elements? Even if that is true, there is no reason to reset the filterIndex to 5 once it reaches the end....is there?

var filterIndex = 0;
var t = 3000;

function filterIt() {
if (typeof ActiveXObject != "undefined") {
if (++filterIndex == filters.length) {
filterIndex = 5; <-- Why?
}
document.all["imgrobot"].style.filter = filters[filterIndex];
var t = setTimeout('filterIt()', 0);
if (filterIndex > filters.length) clearTimeout(t);
}
chris_angell
10-08-2002, 04:34 PM
god, I did that ages ago and forgot about it :) good eyes.


I copied the code from an old version and didn't notice..
that is why you are a great coder and I am a beginner in the world...


I try my end before I post, but this normally end up with me failing..


beetle... next time I will check and then double check.. but sadly even with this at 0.. my quest lives on


# #
#=ooO=========Ooo=#
# \\ (o o) // #
\\_/(_)\_//
) (



:confused:
mordred
10-08-2002, 05:03 PM
Originally posted by chris_angell
beetle... next time I will check and then double check.. but sadly even with this at 0.. my quest lives on


Ehrm.... don't take it personally... but for me it looks like you're programming on coincidence. :)
Seriously, you have to know what you are doing when you change things to suit your purpose. If you now have this code


if (++filterIndex == filters.length) {
filterIndex = 0;
}
document.all["imgrobot"].style.filter = filters[filterIndex];
var t = setTimeout('filterIt()', 0);
if (filterIndex > filters.length) clearTimeout(t);


look what comes when you alert filters.length, maybe then your mistake becomes obvious. The last line tells JS to call this function again if (hence the if keyword) the variable filterIndex is smaller than the length of the array filters. So if you set filterIndex to 0, it's always smaller than the filters array, so you run this function infinitely.

I wrote a different solution some posts ago though. ;)
chris_angell
10-08-2002, 06:57 PM
true, I do programme using coincidence. :) I LIKE TO THINK YOU LEARN FROM YOUR MISTAKES .... but i make many opps


I put myself down as a designer, but I am trying to learn JS as fast as I can, It gets hard....


I ALWAYS GET IDEAS, MOST OF THESE IDEAS ARE BEYOND MY JS KNOWLEDGE,

it would be fine if I wanted to change the BG of my site :) but one day I will be there.. with the big boys of coding.. :)

thanks I did work out the script after you spelt out how to do it, but the only problem i have now is:

I want to run the script from onClick, which is fine, but once it has got to clearTimeout(t); you can't click on the button again and repeat the array :(


oh the pain..


ps. WHAT IS A GOOD JS AND DOM TUTORIAL WEB SITE....
mordred
10-08-2002, 08:13 PM
Not sure about the code you're running now, especially the clearTimeout() thing intrigues me, but since access to the array is controlled by a global variable called filterIndex, it *could* suffice if you just set it back before calling the function itself in the onclick eventhandler.

Hmh, while writing this, that made ponder over a possible source or erroneous behaviour. You trigger the setTimeout() manually, and adding the functionality I described in the previous paragraph, you would intefer with the timeouts concurrently running (i.e. the index would be set back for them as well). Better wrap this functionality in a function that only resets filterIndex if it is as large as the array (for then the loop *should* have ended).


function resetIndex() {
if (filterIndex >= filters.length) {
filterIndex = 0;
}
}


as to the tutorial site, there is still http://www.javascriptkit.com .... ;)
chris_angell
10-09-2002, 11:13 AM
:: a big thank you to ::


mordred,
beetle,
and who ever else helped...

I managed to get it done, and it looks lovely...


you guys are great people....


:thumbsup: