467,895 Members | 1,464 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,895 developers. It's quick & easy.

input type=image + changing image


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

Sep 13 '07 #1
  • viewed: 13883
Share:
8 Replies
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
Sep 13 '07 #2
"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.
Sep 13 '07 #3
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)
Sep 13 '07 #4
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>
Sep 13 '07 #5
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)
Sep 14 '07 #6
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.
Sep 14 '07 #7
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/

Sep 14 '07 #8

"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

Sep 15 '07 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Mark | last post: by
1 post views Thread by Brian Genisio | last post: by
7 posts views Thread by b2b2u | last post: by
1 post views Thread by champ.supernova | last post: by
3 posts views Thread by jackiepatti | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.