Attachment button problem - how to fix?

[apokphp]

I'm modifying a new skin. I haven't touched the newpost_attachment template.

What I have done however, is used the .css to create rollover effects for the buttons on the board. This one "attachment button" is the only one, that causes any troubles with it, and I'm not sure why. The button isn't even showing up.

My code for the rollover effects for the buttons is:


.button { background-image: url("picts/button.gif");
background-color:#FFFFFF;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #000066;
font-size: 8pt;
height: 20px;
cursor:hand;
font-weight: bold;
text-align: center;
BORDER: #000066 1px solid }

.buttonon { background-image: url("picts/buttonon.gif");
background-color:#F0F0F0;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #660000;
font-size: 8pt;
height: 20px;
cursor:hand;
font-weight: bold;
text-align: center;
BORDER: #660000 1px solid }

Now to call this up for each button, I used a replacement variable:

class="button" has been replaced with: class="button" onmouseover="this.className='buttonon'" onmouseout="this.className='button'"

The button IS there and reflects the .button .css just fine. But it does not respond to the .buttonon, in fact, it doesn't even show up...not even when it is "off".

Again, all other buttons work fine...it is just the "attachment" button that doesn't. The "newpost_attachment" template hasn't been touched, it's using the default.

The beta forum where I've been working on this is: www.myfamilycorner.net/forums/

You can login and see for yourself by trying to add an attachment, by using:

login: tester
pass: testpass

Any help on this would be greatly appreciated.

[Andreas]

document.write('<input type="button" class="button" onmouseover="this.className='buttonon'"


That's the problem - the single quotes arround buttonon. The first one terminates the whole string for document.write, which makes the script invalid -> not executable. You must escape them.

[apokphp]

Thank you. But how do I "escape" them properly?

I did this:
class="button" onmouseover="this.className=\'buttonon\'" onmouseout="this.className=\'button\'"

That makes the Attachment button work perfectly...but now the other buttons won't work. They appear at least...but "buttonon" won't appear for the rolllover effect.

[Andreas]

Use \'

[apokphp]

Well, now the attachment button is gone, and there are no "buttonon" images for the rolloevers.

The code is now:
class="button" onmouseover="this.className=\''buttonon\''" onmouseout="this.className=\''button\''"


The html output from "view source" is:

document.write('<input type="button" class="button" onmouseover="this.className=\''buttonon\''" onmouseout="this.className=\''button\''"

[Andreas]

class="button" onmouseover="this.className=\'buttonon\'" onmouseout="this.className=\'button\'"


This should be correct.

[apokphp]

Nope. :(

That results in: 1) no attachment button, and 2) no rollover effect for all the rest of the buttons.

The html is:
document.write('<input type="button"class="button" onmouseover="this.className=\'buttonon\'" onmouseout="this.className=\'button\'"

Is there another way to do this perhaps?

[Andreas]

Hmm ... the button is there for me?

[apokphp]

Sorry, I removed the code. You viewed it w/o the code. The button shows up fine when the code isn't there. ;)

I noticed that this was affecting the LOGIN button as well. So I was wrong about it not affecting any other button...I just had not noticed it before.

I don't think that this is possible (rollovers + vbulletin code). But I'm willing to put the code back up to anyone who wants to give it a try. hehe