I haven' t found a way in doing this. What I want to do is to create my own button images (actually 2 images for each button for rollover effects) and also add caption on top of the image. The first part is very easy but I cannot find a way for the caption part. My project includes many buttons each one with a different value displayed on top (100 form buttons - one for each number 0-99). So it is not good idea to create 200 images and then edit them to put the numbers on top.
What I would really like to know is if I could use an image instead of the default button and add a value on top like in the form buttons:
then I could put this line inside a loop and populate my page dynamically. So I would only have to create 2 images for my buttons.
Any ideas?
Thanks anyway.
You can create a CSS which takes that image as a background image and use that css with some component may be for example <a> tag to display text on it.
CSS:
.myClass{
background: url(/iamges/img.png);
//-- some other css values
}
.myClass:hover{
background: url(/iamges/img_hover.png);
//-- some other css values
}
HTML:
<a onClick="func()" class="myClass">1</a>
I just actually did this for a project a few days ago. Here is the CSS, sample image and html of what I did.
<style>
.rollover,
.rollover:visited {
background: #FFF url(http://i.stack.imgur.com/yWGMJ.gif) no-repeat scroll left 0px;
border: none;
cursor: pointer;
width: 64px;
height: 27px;
}
.rollover:hover {
background: #FFF url(http://i.stack.imgur.com/yWGMJ.gif) no-repeat scroll left -27px;
}
</style>
<input type="button" class="rollover" name="btn_1" value="1" /><br />
<input type="button" class="rollover" name="btn_2" value="2" /><br />
<input type="button" class="rollover" name="btn_3" value="3" /><br />
<input type="button" class="rollover" name="btn_4" value="4" /><br />
Related
In my HTML file example.html I have:
<a onclick="document.getElementById('D').innerHTML='some text'">
clickme
</a>
where D is the id of some <div>.
So by clicking on 'clickme', some text is inserted in div D.
Is there a way to do this without using Javascript, and without using href to an external html file?
That is 'some text', the text to be inserted in div 'D', should be defined completely within my example.html.
As some comments have said, yes, HTML is static by nature, but you can still accomplish this using css, because css has its own events an almost state management
I present two options:
1. You can have your content hidden and then show it when click
explanation: we use a checkbox to emulate the button, then in css we see if the checkbox is checked then we make the content visible
2. You can use pseudoelements to insert content using CSS
If you dont want this content in your HTML and you want to literaly insert it without JS, you can use a pseudoelement to "create" a new element and place it in your div (note the quotes there) so basically css will use a pseudoelement, but we use the same checkbox trick to let CSS handle the state and not need JS
As you can see it can be somewhat done, in the sense that you are adding content (to the users eyes) without javascript, but not without limitations:
Resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Working examples of both alternatives:
/*hide the inputs/checkmarks and the content*/
input, .visibleAfterClick {
display: none;
}
/*position the fake button*/
label {
position: relative;
display: block;
cursor: pointer;
border: 1px black solid;
text-align: center;
}
/*show the hidden content when element is clicked*/
input:checked~div .visibleAfterClick {
display: block;
}
/*'Insert' content when element is clicked*/
input:checked~div .InsertAfterClick::after {
display: block;
content: 'Content inserted after click';
}
<h1>Option 1</h1>
<input id="check01" type="checkbox" name="menu" />
<label for="check01">Fake button</label>
<div>
Content always visible <br />
<span class="visibleAfterClick">
Content visible after click
</span>
</div>
<br /><br /><hr /><br /><br />
<h1>Option 2</h1>
<input id="check02" type="checkbox" name="menu" />
<label for="check02">Fake button</label>
<div>
Content always visible <br />
<span class="InsertAfterClick">
</span>
</div>
I have just implemented search api module and it works. I replaced the core search block with the block for the search api module.
With firefox I saw that the code after the two elements, the search element and the textfield (where you can write the words to search) is the folowing:
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input id="edit-search-api-views-fulltext" class="form-text" type="text" maxlength="128" size="30" value="" name="search_api_views_fulltext">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input id="edit-submit-searchadvanced" class="form-submit" type="submit" value="Zoeken" name="">
</div>
In my global.css I managed to set the elements at the left site. Now that they are at the right site, I want them to stand side by side and not among each other. I can speak to the elements seperatly, but setting them side by side is to difficult. I have read about float, display; inline, clear, ...
Here is my code:
/*float right and textbox and searchbutton disapear at the right side, I gave also a width of 240 px */
#views-exposed-form-searchadvanced-page{
float:right;
width: 500px;
}
/*the element edit-search-api-views-fulltext, is the textfield and has a blue color */
#edit-search-api-views-fulltext{
background:blue;
}
/*the element edit-submit-searchadvanced, is the searchbutton and has a green color */
#edit-submit-searchadvanced{
background:green;
I hope someone can help me with this!
I'm not sure whether I understood your question correctly, however I think you want to display the searchbox and button next to each other.
To achieve that the wrapper div (#views-exposed-form-searchadvanced-page) should be floated to the right (which you already did) and the searchbox and the button to the left.
/*the element edit-search-api-views-fulltext, is the textfield and has a blue color */
#edit-search-api-views-fulltext {
background: blue;
float: left;
}
/*the element edit-submit-searchadvanced, is the searchbutton and has a green color */
#edit-submit-searchadvanced {
background: green;
float: left;
}
See this fiddle for the complete, working example.
This question already has answers here:
Clear icon inside input text
(18 answers)
Closed 6 years ago.
I am working on a webpage where I have a HTML Input Text element which is disabled onload.
I currently have a edit button next to the Input Container onclick of which I disable/enable the field.
<input type="text" name="TxtBx1" id="TxtBx1" value="This is the first Textbox" onblur="toggleState('TxtBx1')" disabled="true">
<img class="onInput" src="/Server_Status/images/edit.png" title="Edit" alt="Edit" height="15" width="15" onclick="toggleState('TxtBx1')">
Is there any other way in which I could place this icon in the input tab itself without overlapping the text.
img.onInput
{
position: relative;
left: -20px;
}
I tried using CSS with but the text gets underneath the icon which I do not want.
I am trying to get something like the "google search" add-on in firefox. Is that at all possible with simple input text and icon?
Thanks in advance :)
Update:
I want a button like in this image on text input. The icon is clickable and I want to trigger a JavaScript function onClick event.
Found the answer I was looking for: https://stackoverflow.com/a/6258628/2596762
You can create a CSS class with the background property and specify the location of your image, set it to no-repeat so it only displays the image once, then fiddle with the positioning by adding padding attributes and the like.
So for your CSS, something like:
.search {
background: url('image.jpg') no-repeat;
}
Then you just add it as the class attribute to your text box tag:
<input type="text" name="TxtBx1" id="TxtBx1" class="search">
background: url(user.gif) no-repeat scroll 7px 7px;
padding-left:30px;
try using this:
<div class="search-div">
<input class="search" type="text" placeholder="Search here" />
<img src="image-url" /></div>
here is css code:
.search-div{
border:1px;
border-style:solid;
border-color: lightgrey;
}
.search{
border:none;
}
This css will make div look like a text box and removes the outline of input text-box.
You can format the size of image link and also change the link address from "#" to the desired url.
I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.
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.