CODEWITHSUNDEEP
htmlcss
Zared H
Zared H

Reputation: 566

Hide title text on input where type="image"

I’d like to use an input of type image that also has title text to be displayed when hovered over. However, this text is always displayed “behind” the image.

I define my image like this:

.left {
  background-image: url("http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-left-arrow-64-000000.png");
}
<input type="image" class="left" id="mToggle" width="64" height="64" value=" " title="new toggle button"/>

The reason for the CSS class is because I’m toggling the image on click. Here is a JSFiddle.

Side note: I’ve realized that the problem only occurs in Chrome. It doesn’t appear behind in IE or Firefox.

Upvotes: 0

Views: 1106

Answers (3)

Sebastian Simon
Sebastian Simon

Reputation: 19485

<input/>:

type="image": A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.

(Emphasis mine)

Your HTML, therefore, is invalid. You need your button to look like in the snippet below.

If you already toggle the class onclick with JavaScript, I’d suggest you drop the CSS rules and instead change the image src directly. Whether you make your toggle dependent on the class, the alt or the src attribute, is your choice.

document.getElementById('mToggle').addEventListener('click',function(){
  if(this.className=='left'){
    this.src='http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-right-arrow-64-000000.png';
    this.alt='→';
    this.className='right';
  }
  else{
    this.src='http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-left-arrow-64-000000.png';
    this.alt='←';
    this.className='left';
  }
});
<input id="mToggle" class="left" type="image" width="64" height="64"
  src="http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-left-arrow-64-000000.png"
  alt="←" value=" " title="new toggle button"/>

(Use the JS code above or whatever the jQuery equivalent is.)

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

If the image src is not present, browser will display the alt or the title image. As you have classes having background image, you do not need the img element. Hence, you can update your html to

<div class="left" id="mToggle" style="height:64px;width:64px" title="new toggle button" />

For reference - https://jsfiddle.net/os7svkw1/5/

Upvotes: 1

Lucian
Lucian

Reputation: 644

It's because your image doesn't have the src attribute set, in which case it displays the alt or the title attribute instead of the image. The image you put in is a css background-image which is not the same as using an input type="image" tag with the src set.

If you still want to keep your css then use something else, like a div:

<div class="left" id="mToggle" title="new toggle button"></div>

https://jsfiddle.net/lucianmoldovan/os7svkw1/6/

Otherwise set the src attribute of the input type="image" tag.

Upvotes: 1

Related Questions