Two-state button problem.
Hi all!
I'm trying to make two-state buttons. For that purpous I've used this code:
window.onload = rolloverInit;
function rolloverInit() {
for(var i = 0; i < document.images.length; i++){
if(document.images[i].parentNode.tagName == "A"){
setupRollover(document.image[i]);
}
}
}
function setupRollover(thisImage){
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut;
thisImage.overImage = newImage();
thisImage.overImage.src = "gfx/psd/images/" + thisImage.id + "_active.jpg";
thisImage.onmouseover = rollOver;
}
function rollOver(){
this.src = this.overImage.src;
}
function rollOut(){
this.src = this.outImage.src;
}
but it doesn't seem to work and I don't know why :/. I know there's much code but please help. Oh yeah! I would forgotten. I also in IE get this error message:
'document.image' is empty or not an object
Thanks.
[1083 byte] By [
sakurazuka] at [2007-11-20 11:16:44]
# 1 Re: Two-state button problem.
Change singular...
setupRollover(document.image[i]);
to plural...
setupRollover(document.images[i]);
# 2 Re: Two-state button problem.
Ok. One error down :D. Now I get:
Object expected
in IE.
Oh. And btw thanks for that one PeejAvery - I though I've checked everything...
# 3 Re: Two-state button problem.
Btw (again), is this equation semantically correct:
thisImage.overImage.src = "gfx/psd/images/" + thisImage.id + "_active.jpg";
??
# 4 Re: Two-state button problem.
The object is expected because you aren't passing the object to the rollOver and rollOut functions.
function setupRollover(thisImage){
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut(thisImage);
thisImage.overImage = newImage();
thisImage.overImage.src = "gfx/psd/images/" + thisImage.id + "_active.jpg";
thisImage.onmouseover = rollOver(thisImage);
}
# 5 Re: Two-state button problem.
Right. Moving along... Changes made:
(...) thisImage.onmouseover = rollOver(thisImage);
}
function rollOver(thisImage){
thisImage.src = thisImage.overImage.src;
}
function rollOut(thisImage){
thisImage.src = thisImage.outImage.src;
}
Result:
Not implemented
I'm so noob :(...
# 6 Re: Two-state button problem.
May I suggest an alternative? I can't be completely sure that this will work exactly for you, because I don't see all your code. Maybe you could modify it though.
window.onload = rolloverInit;
function rolloverInit() {
var preloadImage = [];
var curImage;
var theImages = document.images;
for(var i = 0; i < theImages.length; i++){
if(theImages[i].parentNode.tagName == "A"){
curImage = theImages[i];
curImage.onmouseover = function(){
this.src = this.src.replace('_active', '');
}
curImage.onmouseout = function(){
this.src = this.src.replace('.jpg', '_active.jpg');
}
preloadImage[i] = new Image();
preloadImage[i].src = "gfx/psd/images/" + curImage.id + "_active.jpg";
}
}
}
# 7 Re: Two-state button problem.
Ok. Found the little brat:
thisImage.overImage = newImage();
Changed to:
thisImage.overImage = new Image();
Results {
Firefox: buttons are allways in rollover position;
IE: 'Not implemented'
}
# 8 Re: Two-state button problem.
Thanks alot for the suggestion. If we change it to:
curImage.onmouseover = function(){
this.src = this.src.replace('.jpg', '_active.jpg');
}
curImage.onmouseout = function(){
this.src = this.src.replace('_active', '');
than it's fine. Otherwise - funny effect :D. Thanks again for the huge patience! :D Thank you, thank you.
# 9 Re: Two-state button problem.
You are most welcome. Good luck with the rest!
