PDA

View Full Version : rollover problem with opera



tmdown
03-10-2008, 07:52 PM
I'm having a strange problem in opera 9 with an image rollover (or perhaps positioning?).

I'm trying to make a library for simulating the wii interface (right now I only have buttons.. and buggy ones at that), and for the most part it's working. However, the rollover doesn't quite work well in opera on the wii nor a desktop. There's a ghost image of two of the initial rollover images to the right of the button div, and I can't seem to get rid of it. I'm using div backgrounds for the three pieces of the whole button to allow for dynamic size adjustment, and the rollover images on each side are 3 pixels larger than the initial images (which I think is part of the problem?). It works perfectly fine in firefox and IE.

Here's the test page:

http://tmdowner.awardspace.com/test.html

and here's the wiiButton object:



// *************************************************
// Wii Default Button Object
// *************************************************



// ******************************************************
// USAGE:
// 1. b = new wiiButton(id, text, URL, x, y, z, type)
// Defines all properties; if type is less
// than one, the width is auto-adjusted.
// Otherwise, type is used as button width

// 2. b = new wiiButton(id, text, URL, x, y, z)
// Automatically adjust width of button

// 3. b = new wiiButton(id)
// A single parameter is used for id, text,
// URL. Auto-adjusted.
//
// ******************************************************
function wiiButton (id, text, URL, x, y, z, type) {

// DEFINE BUTTON IMAGES
this.leftImage = "./images/button_left.gif";
this.rightImage = "./images/button_right.gif";
this.midImage = "./images/button_mid.gif";
this.leftImageRoll = "./images/button_left_roll.gif";
this.rightImageRoll = "./images/button_right_roll.gif";
this.midImageRoll = "./images/button_mid_roll.gif";

//DEFINE METHODS
this.showButton = showButton;
this.hideButton = hideButton;
this.activate = activate;
this.deactivate = deactivate;
this.goURL = goURL;
this.getType = getType;
this.getId = getId;
this.getText = getText;
this.getURL = getURL;
this.getX = getX;
this.getY = getY;
this.getZ = getZ;
this.setText = setText;
this.setURL = setURL;
this.setCoords = setCoords;

// ALLOW FOR METHOD PSEUDO-OVERLOAD
if (arguments.length < 6) {
this.type = -1;
this.id = arguments[0];
this.text = arguments[0];
this.URL = arguments[0];
this.x = 0;
this.y = 0;
this.z = 10;

} else if (arguments.length == 6) {
this.type = -1;
this.id = id;
this.text = text;
this.URL = URL;
this.x = x;
this.y = y;
this.z = z;

} else if (arguments.length == 7) {
this.type = type;
this.id = id;
this.text = text;
this.URL = URL;
this.x = x;
this.y = y;
this.z = z;
}


// ******************************
// CREATE BUTTON
// ******************************
document.write("<div id=\""+ this.id + "\" style=\"position: absolute;");
document.write(" top: " + this.y + "px; left: " + this.x);
document.write("px; display: none; z-index: " + z + "; height: 55px; border: 0px;\" ");
document.write("onMouseOver=\"" + this.id + ".activate();\" onMouseOut=\"" + this.id + ".deactivate()\" ");
document.write("onClick=\"" + this.id + ".goURL();\">");


// *** CREATE LEFT BACKGROUND ***
document.write("<div id=\"" + id + "Left\" style=\"position: absolute; left: 0px; top: 0px;");
document.write("width: 5px; height: 55px;");
document.write("background-image: url(" + this.leftImage + "); background-repeat: no-repeat; border: 0px;\"></div>");


// *** CREATE MIDDLE BACKGROUND ***

if (this.type < 1) {
// IF TYPE IS < 1, AUTO-ADJUST BUTTON WIDTH
midWidth = (10 * this.text.length)*2;
} else {
// OTHERWISE, TYPE IS USED AS BUTTON WIDTH
midWidth = this.type;
}
document.write("<div id=\"" + id + "Mid\" style=\"position: absolute; left: 5px; top: 0px;");
document.write("width: " + midWidth + "px; height: 55px; ");
document.write("background-image: url(" + this.midImage + "); background-repeat: repeat-x; border: 0px;\"></div>");


// *** CREATE RIGHT BACKGROUND ***
document.write("<div id=\"" + id + "Right\" style=\"position: absolute; left: ");
document.write((midWidth + 5) + "px; top: 0px;");
document.write("width: 8px; height: 55px;");
document.write("background-image: url(" + this.rightImage + "); background-repeat: no-repeat; ");
document.write("border: 0px; background-position: left;\"></div>");


// *** CREATE TEXT LAYER ***
document.write("<div id=\"" + id + "Text\" style=\"position: relative; left: 6px; top: 13px;");
document.write("width: " + midWidth + "; height: 55px; font-size: 18pt;");
document.write("font-family: arial; font-weight: bold;");
document.write("text-align: center; vertical-align: middle; background: transparent;\">");
document.write("<center>" + this.text + "</center></div>");
document.write("</div>");


}

// *********************************
// *** return id ******************
// *********************************
function getId() {
return this.id;
}

// *********************************
// *** return type *****************
// *********************************
function getType() {
return this.type;
}

// *********************************
// *** return text *****************
// *********************************
function getText() {
return this.text;

}

// *********************************
// *** return URL ******************
// *********************************
function getURL() {
return this.URL;
}

// *********************************
// *** return X coord **************
// *********************************
function getX() {
return this.x;
}

// *********************************
// *** return Y coord **************
// *********************************
function getY() {
return this.y;
}

// *********************************
// *** return Z coord **************
// *********************************
function getZ() {
return this.z;
}

// *********************************
// *** set text ********************
// *********************************
function setText(t) {
this.text = t;
}

// *********************************
// *** set URL *********************
// *********************************
function setURL(url) {
this.URL = url;
}

// *********************************
// *** set coordinates *************
// *********************************
function setCoords(ax, ay, az) {
this.x = ax;
this.y = ay;
this.z = az;
}


// *********************************
// *** DISPLAY BUTTON **************
// *********************************
function showButton() {
document.getElementById(this.id).style.display = "block";

}

// *********************************
// *** HIDE BUTTON *****************
// *********************************
function hideButton() {
document.getElementById(this.id).style.display = "none";
}

// *********************************
// *** MOUSEOVER EFFECTS ON
// *********************************
function activate() {
document.getElementById(this.id + "Right").style.backgroundImage = "url("+this.rightImageRoll+")";
document.getElementById(this.id + "Left").style.backgroundImage = "url("+this.leftImageRoll+")";
document.getElementById(this.id + "Mid").style.backgroundImage = "url("+this.midImageRoll+")";
document.body.style.cursor = "pointer";
}

// *********************************
// *** MOUSEOVER EFFECTS OFF
// *********************************
function deactivate() {
document.getElementById(this.id + "Right").style.backgroundImage = "url("+this.rightImage+")";
document.getElementById(this.id + "Left").style.backgroundImage = "url("+this.leftImage+")";
document.getElementById(this.id + "Mid").style.backgroundImage = "url("+this.midImage+")";
document.body.style.cursor = "default";
}

// *********************************
// *** FAUX-ANCHOR METHOD
// *********************************
function goURL() {
window.location = this.URL;
}





I haven't used javascript in years, so I'm still refreshing myself on the ins-and-outs of it. So please forgive any ridiculous coding.

Does anyone know what's happening here?