input type=image + changing image

[John]

Hi

Pasrt of HTML -

<div class='button'><input type='image'
src='/images/check1.jpg'></input></div>

Part of CSS -

..button {background-image: url(/images/check1.jpg); background-repeat:
no-repeat;}
..button:hover {background-image: url(/images/check2.jpg); background-repeat:
no-repeat;}

Is there something I'm missing? Image should change on mouseover. Image
doesn't change. Using IE7 and FF.

Regards
John

[Jonathan N. Little]

John wrote:

Hi

Pasrt of HTML -

<div class='button'><input type='image'
src='/images/check1.jpg'></input></div>

Part of CSS -

.button {background-image: url(/images/check1.jpg); background-repeat:
no-repeat;}
.button:hover {background-image: url(/images/check2.jpg); background-repeat:
no-repeat;}

Is there something I'm missing?

Very much so

Image should change on mouseover. Image
doesn't change. Using IE7 and FF.

No it shouldn't. The CSS styles the *background* of the DIV but your
have a input of type image that is in the *foreground* that covers up
your DIV's background image....

BTW MSIE will only support :hover pseudo class on A elements with an
HREF attribute.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Good Man]

"John" <jo******@yahoo.comwrote in
news:tq******************************@eclipse.net. uk:

Is there something I'm missing? Image should change on mouseover.
Image doesn't change. Using IE7 and FF.

you're changing the DIV, not the INPUT element.

[Jim Moe]

John wrote:

>
<div class='button'><input type='image'
src='/images/check1.jpg'></input></div>

Invalid HTML markup. <inputdoes not get </inputto close it. It is
forbidden.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Good Man]

Jim Moe <jm***************@sohnen-moe.comwrote in news:RN-dnUtKL-
61********************@giganews.com:

John wrote:

>>
<div class='button'><input type='image'
src='/images/check1.jpg'></input></div>

Invalid HTML markup. <inputdoes not get </inputto close it. It is
forbidden.

It's invalid HTML, but it's valid XHTML though its generally self-closing,
a-la

<input type="image" src="/images/check1.jpg" />

instead of using </input>

[Jim Moe]

Good Man wrote:

>>>
<div class='button'><input type='image'
src='/images/check1.jpg'></input></div>

Invalid HTML markup. <inputdoes not get </inputto close it. It is
forbidden.

It's invalid HTML, but it's valid XHTML though its generally self-closing,
a-la
<input type="image" src="/images/check1.jpg" />
instead of using </input>

The OP explicitly said "HTML".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Harlan Messinger]

John wrote:

Hi

Pasrt of HTML -

<div class='button'><input type='image'
src='/images/check1.jpg'></input></div>

Part of CSS -

.button {background-image: url(/images/check1.jpg); background-repeat:
no-repeat;}
.button:hover {background-image: url(/images/check2.jpg); background-repeat:
no-repeat;}

Is there something I'm missing? Image should change on mouseover.

No it shouldn't. The background image of the div containing the input
element should. But the input element is sitting on top of the
background and blocking your view of the background image.

By the way, there is no </inputtag in HTML.

[Jukka K. Korpela]

Scripsit John:

<div class='button'><input type='image'
src='/images/check1.jpg'></input></div>

That's pointless and inaccessible. Turn image display off in your browser
(if you don't know how to do that, it's time to learn) and test the page to
see this.

Is there something I'm missing? Image should change on mouseover.

Yes. You're missing
<input type="submit" value="..." class="submit">
which is a great improvement over all expensive plastic imitations. The
class attribute is here just to help in styling, due to lack of support to
attribute selectors in IE 6 and older.

(And you're missing the information that jpeg format should normally be used
for photos only, and photos aren't usually suitable for use as button images
or as backgrounds.)

To style it so that it changes on mouseover, you would write

..submit:hover { ... }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[John]

"John" <jo******@yahoo.comwrote in message
news:tq******************************@eclipse.net. uk...

>
Hi

Pasrt of HTML -

<div class='button'><input type='image'
src='/images/check1.jpg'></input></div>

Part of CSS -

.button {background-image: url(/images/check1.jpg); background-repeat:
no-repeat;}
.button:hover {background-image: url(/images/check2.jpg);
background-repeat: no-repeat;}

Is there something I'm missing? Image should change on mouseover. Image
doesn't change. Using IE7 and FF.

Regards
John

Many thanks for the replies. All is now well.
My mistake - I said HTML when I meant XHTML.

Regards
John