Stylesheets - How do you change button image?

Author

How do you change button image?

2006-05-17, 7:06 pm

I have CSS for button like

input[type="button"] {
background-image: url(imageFile.gif);
background-repeat: no-repeat;
background-position: right center;
border-width: 0;
border-spacing: 0; padding: 0;
border-collapse: separate;
width: 15;
background-color: cyan;
}

and HTML

<form>
<input type="button" onClick="changeImage(this)">
</form>

and JavaScript

var newImage = new Image();
newImage.src = "newimageFile.gif";

function changeImage(thisbutton) {
thisbutton.style.xxxx = arrow_down.src;
}

My question is what will be for xxxx?

I try
..style.background-image for xxxx, but Netscape/Firefox and IE dosen't
like that.

..style.background is for the background-color, not for background-image.

matt.macchia@gmail.com

2006-05-17, 7:07 pm

Try:
thisbutton.style.backgroundImage = arrow_down.src;

Lasse Reichstein Nielsen

2006-05-18, 4:02 am

matt.macchia@XXXXXXXXXX writes:

> Try:
> thisbutton.style.backgroundImage = arrow_down.src;

I'm not sure what you are replying to (please quote enough of the
previous message to give your answer a context), but I'm guessing
that the arrow_down variable points to an Image element, and then
the answer is slightly incorrect.

A pure URL is not a valid value for the CSS background-image property.
Instead, it should be wrapped in "url(...)" and probably quoted too.
So, at least:
thisbutton.style.backgroundImage = 'url("' + arrow_down.src + '")';

Good luck
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'