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

Sep 13 '07 #1

Subscribe Reply

14250

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

Sep 13 '07 #2

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.

Sep 13 '07 #3

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)

Sep 13 '07 #4

Good Man

Jim Moe <jm************ ***@sohnen-moe.comwrote in news:RN-dnUtKL-
61************* *******@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>

Sep 13 '07 #5

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)

Sep 14 '07 #6

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.

Sep 14 '07 #7

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/

Sep 14 '07 #8

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

Sep 15 '07 #9

Similar topics

4468

input type image

by: Mark | last post by:

Hi, I create a button in the form in the asp page like is: <input type="image" src="button.gif" name="detail" border=0 value="100234"> How can I get this value from another page? I try sdetail = Trim(Request.Form("detail")) response.write(sdetail) But doesn't work Thanks.

ASP / Active Server Pages

17255

Programatically click <INPUT type=image ...> element

by: Csaba2000 | last post by:

I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE 5.5+). This should work regardless of whether IE has focus. Normally you would do myDomElement.click and the mouse doesn't matter, but in the case of an input image element, what happens is the submitted url has something like "?x=12&y=7" appended to it (the numbers vary per mouse position on the clicked element). If you hit...

Javascript

21027

onclick does not work with Input type=image

by: Wayne | last post by:

Please help... For some odd reason onclick is not working with and <input type="image"> but works fine on an <input type="button">.... This does not work: <input TYPE="image" src="go.gif" onclick="thisthis(form.text1.value,form.select1.value)"> But this works fine: <input TYPE="button" width="20" VALUE="SEARCH" onclick="thisthis(form.text1.value,form.select1.value)">

Javascript

5788

Form submission prevention with <input type=image onclick=..>

by: Kimmo R. M. Hovi | last post by:

Currently I have defined: -- clip clip -- <form method="post" action="xx" enctype="application/x-www-form-urlencoded"> <input type="image" name="Function 1" src="image1.gif" border="0" title="1">

Javascript

4131

INPUT type=image in IE

by: Brian Genisio | last post by:

Hi all, I noticed that the image input type does not show up in the elements array (IE 6.0). <FORM name=myForm> <INPUT name=rads id=check1 type=radio value=val1> <INPUT name=rads id=check2 type=radio value=val2 checked> <INPUT name=rads id=check3 type=radio value=val3> <INPUT name=rads id=check4 type=radio value=val4>

Javascript

4953

input type=image, problems with

by: b2b2u | last post by:

I can't seem to get a form to submit using an image !? <input type="image" src="submit.gif"> Any body have this problem? Is it choking on the x/y coordinates? If so, what can be done about it? code below works (truncated) <form name="loginForm" action="/index.cfm" method="post"

HTML / CSS

1709

Simulating a form INPUT - type IMAGE

by: champ.supernova | last post by:

Hi, I have a form which has a few different submit links, all of type image. This is critcal to the operation of the form, as it relies on the image co-ords being passed to another page, the processing of which is handled by someone else. What I need to do though, is to have a text link which simulates one of these image inputs being clicked, as some kind on onclick event. However, I've hit a brick wall looking for example code of how...

Javascript

6602

HTML input type=image in ASP.NET 1.1 causing current page to reload

by: jon | last post by:

Hi This might be an easy one to answer but I have a web form in an ASP.NET 1.1 application with a hand-rolled HTML image button as follows which opens a help guide in a new window: <input type= "image " id= " imgHelp " onclick="javascript:void(window.open('<% Response.Write(ConfigurationSettings.AppSettings); %>')) ">

ASP.NET

21268

x,y coordinates from an <input type='image'>

by: jackiepatti | last post by:

QUESTION: I have a web page containing a form that contains an image instead of a submit button, e.g. <form name='myform' action='get' method='otherpage.asp'> <input type='image' src='picture.gif' name='myimage' id='myimage'> </form> When forms with image types are submitted, the value is not returned; instead, when the form is submitted, the XY coordinates of the where the user clicked on the image are sent. For example, if the user

Javascript

8889

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9401

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9257

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9179

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

6702

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6011

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4519

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4784

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2157

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General