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]

Re: input type=image + changing image

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]

Re: input type=image + changing image

"John" <john1949@yahoo .comwrote in
news:tqydnUFoNO LG8XTbnZ2dnUVZ8 sKlnZ2d@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]

Re: input type=image + changing image

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]

Re: input type=image + changing image

Jim Moe <jmm-list.AXSPAMGN@s ohnen-moe.comwrote in news:RN-dnUtKL-
61C3TbnZ2dnUVZ_ qrinZ2d@giganew s.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]

Re: input type=image + changing image

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]

Re: input type=image + changing image

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]

Re: input type=image + changing image

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]

Re: input type=image + changing image


"John" <john1949@yahoo .comwrote in message
news:tqydnUFoNO LG8XTbnZ2dnUVZ8 sKlnZ2d@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