What happens is before the button image loads, there is a button behind it and it's quite strange... How do I get rid of it?
<button id="cambtn" onclick="camera()"><img id="camicon" src="camera.png" alt="Camera" width="120" style="position:absolute; left:50px; top:50px;"></button>
If you put this snippet in your style sheet it should take care of the button formatting.
#cambtn {
background: transparent;
border: 0 none;
padding: 0;
}
Inline example (although not recommended):
<button style="background: transparent;border: 0 none;padding: 0;" id="cambtn" onclick="camera()"><img id="camicon" src="camera.png" alt="Camera" width="120" style="position:absolute; left:50px; top:50px;"></button>
If you don’t want a button, just don’t use the button element. Assuming that the element is not inside a form, just assign the click functionality to the image directly:
<img id="camicon" onclick="camera()" src="camera.png" ...>
Related
I'm not a programmer by trade, but I'm trying to turn a PNG file into a button in html but im having trouble getting the button to be flush with the png in a way that doesn't look bad. I've googled many solutions so far but either i don't have the understanding to implement the fixes or my problems isn't what i think it is.
<a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html">
<button type="submit" style="height:80px; width:360px "><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center"
alt="Submit">
</button>
</a>
This is what the current code produces.
You could add the following CSS to the code:
button {
padding: 0;
}
img {
width: 100%;
height: 100%
}
This fits the png within the button and removes the button padding (buttons have padding unless you remove it). You could also add this to your inline html:
<a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html">
<button type="submit" style="height:80px; width:360px; padding: 0"><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center; width: 100%; height: 100%"
alt="Submit">
</button>
</a>
Side note.. you shouldn't wrap buttons in a tags. this is bad for seo, accessibility, and many other things.. Just wrapping your image in an a tag and styling accordingly will do what you're looking for whilst being compliant. A button isn't needed unless you're trying to submit a form of some sort -- and even in that case, don't wrap the button in an a tag
Use a class on your button and style it from within the style sheet using background.
<input type="button" class="button" ...>
then in your style sheet
.button
{
background: url(path/to/img.png) no-repeat ...;
cursor: pointer;
....
}
It is just always a good idea to separate your markup from your styles. I would also suggest that whatever the button actually does (unless it is just a link to something else), use javascript for that.
Well I wanna make an image as a button .
this is my code :
<input type="image" name"lvl1_1" style="border:1px dotted #000000;" class="main" width="50" src="images/main/lvl1/1.png">
This code doesn't work probaply , if I change the type from 'image' to 'submit' it works but the image and the effects disappear .
I don't really see a problem in the code :/
There are three ways of doing so:
Add an OnClick="whatever the image button is supposed to do" attribute to the input type image.
Take the input type to be button instead of image and use the background="image source" attribute on it.
You can use the type image-set and give coordinates of the area you want to make clickable.
If you are trying to submit a form, you can create a submit button, then set the image for the button as a background image using CSS.
HTML:
<input type="submit" name"lvl1_1" style="border:1px dotted #000000;" class="main" width="50" >
CSS:
.main {
background-image: url("images/main/lvl1/1.png");
background-position: 0px 0px;
background-repeat: no-repeat;
}
I have a table inside which lot of td's. Inside one of the td i have "input type=file". I need to decrease the size of this input type, but the problem is it is not minimizing lower than 70px (i guess the minimum is 70px). because of this it is overlapping with the other td.
<td class="AttachOnMouseOutText"
id="fileid"
nowrap="nowrap"
style="padding-right:15px;
padding-left: 10px;"
valign="top"
onClick="fad_open();"
onMouseOver="highlightBG('fileid',0,'add','add_over.gif');
this.style.cursor='hand';
return true;"
onMouseOut="highlightBG('fileid',1,'add','add.gif');
return true;">
<p class="Margin"
style="position:relative;">
<input type="file"
name="AttachLink"
style="position: absolute;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0);
opacity:0;
width:70px;
height:50px;
cursor: hand;
left:-25px;"
title="Add File Attachment"
onChange="getWeblink();">
<img src="#ContactsImagePath#add.gif"
alt="Add File Attachment"
border="0"
align="middle"
name="add"
id="add"
onClick="fad_open();">
</p>
<span>Add File</span>
create a class and close the input. try this one
.myfile::-webkit-file-upload-button {
visibility: hidden;
}
.myfile {
position: absolute;
width:70px; background:(255,255,255,0); height:50px; cursor: hand; left:-25px; display: inline-block;
}
http://jsfiddle.net/nY8L9/1/
First option
You can resize the input lower than 70px, the sizing issue looks like its something to do with the image underneath or the td.
If you look on the input you will see that it has an inline style of opacity that is set to 0, so your not going to see the input no matter how much you resize it in your stylesheet.
Check the dimensions of the image underneath and resize that.
Second option
Add a width attribute on the td itself, for example
<td width="20">20px td</td>
This is a little hard because we don't know what's your .margin class, nor the size of your image You can try this fix. But it might not wor if other css declarations cause conflit.
<p class="Margin" style="position:relative; width:YOUR_WIDTH;">
<input style="etc.etc.etc. width:100%;etc.>
...
<img style="max-width:100%;">
Note: not sure why your input has left:-25px. If you add a background color and set it to full opacity, you'll see the negative left position creates a weird clicking zone. Personally, I'd change it to left:0
I have a form submit button, using that has a background image containing a 'pretty' styled version of the 'value' text.
I was hiding the html value text using:
text-indent: -9000px;
font-size: 0;
However, with image turned off (for accessibility testing) there is obviously no button text displayed.
Removing the above brings the value text back, but it overlays on top of the image.
How can I have the background image on top of the value text?
By first guess is some combination of <button><span></span></button> ?
What about using an img tag inside the button, and giving that an alt attribute:
HTML:
<button class="button">
<img src="http://www.google.nl/logos/2010/stnicday10-infstant.jpg" alt="google"/>
</button>
CSS:
.button {
background: transparent;
border: 1px solid Black;
}
You could do something like this: <button>Your BTN Text<span class="img"> </span></button>
and in CSS:
button { position: relative;}
button span {
position: absolute;
text-indent: -9000px;
top:0;
left: 0;
right:0;
bottom:0;
background: url(yourimage.whatever);
}
so if us disable the images the text is still visible under the absolute element.
Make as value="" (empty):
<input type='submit' name="csubmit" value="" />
If you have multiple submit buttons and validating based on button clicked leave value with empty space:
<input type-"submit" name="csubmit1" value=" " />
<input type-"submit" name="csubmit2" value=" " />
<input type-"submit" name="csubmit3" value=" " />
Set the button's value to empty:
<input type="submit" value="" />
and you can remove the text-indent from your CSS.
This will obviously display no text whatsoever, but when you disable the CSS background, the button will still be visible.
I have a submit button and am styling it using the following css:
.subm
{
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;}
.subm:hover
{
background-color:Transparent;
background-image:url(Images/Button_Send_Over.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
}
Here is the html:
<input type="submit" class="subm" value="" />
Nothing surprising. However, what annoys me is that when the submit button is clicked in IE it moves the image up a couple of pixels cutting them off which makes it look, hmm, good word, 'naff.' How can I compensate or stop this?
I have tried expanding the image and leaving a couple of blank pixels at the top but it still does the same thing!
Thanks R.
I had an issue with my buttons moving around when they were clicked in IE after I styled them too. The solution I found was:
1.) Give your button(s) an equal margin
2.) Place the button(s) in a wrapper division that you can position to your liking
.subm {
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
margin:10px; //maybe more maybe less
}
<div style="position:...;float:...;">
<input type="submit" class="subm" name="myButton" id="myButton" />
</div>
Although I have to mention that in my particular case I'm styling my buttons by ID and not applying a class so you might have issues with multiple buttons using the .subm class. THIS WORKED FOR ME IN IE THOUGH.
Try replacing the input with the button tag.
<button type="submit"><img src="..." alt="..." /></button>
and see if this doesn't accomplish it. You would need to adjust your hover effects though which might prove to require either just putting text inside the button and using a negative text-indent, or a javascript hover event to change the referenced image.
Another option is using javascript to call the form submit on a normal link, as buttons typically have a click animation.
Just a note, you could probably get more consistent results by adding a background position, and all of this you can shorthand as well
.subm:hover
{
background: transparent url("Images/Button_Send_Over.png") top center no-repeat;
}
Yet another maybe more ideal option, use the input type image instead of submit.
<input type="image" src="..." Value="Submit" />
I am pretty sure this describes the bug and has some solutions for you:
Fixing the IE8 Form Button with Background Image On Click CSS Bug