I use asp .net image button to show a static jpeg file,
How to make image button has pressed effect
This is what I have so far:
<asp:ImageButton ID="Login_Button" runat="server" onclick="Login_Button_Click" ImageUrl="~/Image/Login.jpg" />
How to remove red cross when ImageUrl not set?
.Login
{
height:50px;
width:100px;
margin: 5px;
background: url(Image/Login.jpg) no-repeat 0 0;
}
.Login:hover
{
background: url(Image/Login_Pressed.jpg) no-repeat 0 0;
}
This might help with rollovers.
Or, this one would work if you only want it to change when you press the button, instead of when you mouseover it.
I'm not totally sure what you're asking...
Only Link button can do this without a invalid icon
<asp:LinkButton ID="Login_Button" runat="server" style="float:left;"
onclick="Login_Button_Click" CssClass="Login" />
To remove the "red x," you could reference a placeholder transparent gif. They're usually named something like "spacer.gif" or "pixel.gif" and they're just a single transparent pixel. They provide the valid reference when an image file is required but are very small and, of course, transparent. What you're seeing with the "red x" is the image button not being able to find the image file. When no file is referenced or when it can't be found, some browsers (IE) will show the red x.
<asp:ImageButton ID="Login_Button" runat="server" onclick="Login_Button_Click"
ImageUrl="~/Image/pixel.gif" />
Or, as you've answered your own question, you can switch to a LinkButton and go from there.
CSS is definitely the way to go if you want the button to react to mouse actions, and the CSS you provided appears to be valid. You might find, however, that some browsers don't interpret the :hover pseudo class unless it's attached to an anchor (link) tag. If you've had trouble getting the mouse actions to work correctly in some browsers when you use the ImageButton, this is probably why.
Related
I have a CSS style at the top of my page that styles my buttons.
But when I change the color (or any propert) it doesn't update my button.
To fix this, I have to Change the name of my style and every where in my project where it's referenced, then only does it update the change of the style.
Why does this happen?
My style (for example - Basic style I know)
.CSSButtonStyle {
background: #FFFFFF;
}
My button
<asp:Button ID="btnSubmit" CssClass="CSSButtonStyle" runat="server" Text="Update/Submit" Width="150" Height="30" OnClick="btnSubmit_Click" />
In my design view, the button is white, but on the website its still blue or whatever previous color I had in my style
What I've tried
Add !important to the css. This makes sure it wont get overuled by any other css
Be sure to press Ctrl + F5 to reload the page instead of just F5. It forces a cache refresh.
Try this :
input[type="submit"].CSSButtonStyle
{
border:none;
background-color:#FFFFFF;
}
I'm trying to create a modal popup using the Ajaxtoolkit's modalpopupextender, which works like a charm.
while the popup is showing i want to gray out the page, and did that by assigning the popuppanel teh modalPopup css class:
<style type="text/css">
.modalPopup {
background-color: gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.modalDiv {
background-color:white;
height:200px;
width:400px;
margin-left:auto;
margin-right:auto;
margin-top:200px;
}
</style>
the backgroudn is grayed out, but now i can't make the controls inside my popup solid again. I tried putting them in a div, and assigning the div another css class where I set the opacity to 0 and 100, but this makes no difference.
my popup panel is this:
<asp:Panel ID="ModalPanel" runat="server" Width="100%" Height="100%" CssClass="modalPopup">
<div class="modalDiv">
writesomething:
<asp:TextBox runat="server" ID="txtModalBox" /><br />
<asp:Button Text="Ok" ID="btnModalOK" OnClick="btnModalOK_Click" runat="server" />
<asp:Button Text="Annuller" ID="btnModalAnnuller" OnClick="btnModalAnnuller_Click" runat="server" /><br />
</div>
</asp:Panel>
So my question is, how do i have a not transparant div inside a panel with a transparant background ?
You can't have a child thats more opaque than its parent when using opacity you should instead use the alpha transparency value in rgba(0,0,0,0) so that the transparency isn't "inherited"
The only downside is that rgba() isn't supported below IE 9
I'll offer an alternative if you want to use rgba with IE versions earlier than 9, but, personally, I don't like to overuse this.
http://css3pie.com/documentation/supported-css3-features/
The link above will take you to the CSS3 PIE project. The instructions for its use in your site are pretty straight forward, but in short, it allows non-CSS3 compatible browsers to render certain CSS3 features (rgba being one of those features, not to mention border-radius, which is another nice one).
In my experience: It does take a fraction of a second (most of the time) to render the features once the user has pulled up the page, but for me, this hasn't really been a problem when I've used it because it just ends up looking like their browser was simply still loading the page, since the user is used to using an older browser anyway.
Hope this helps someone who finds themselves in need of rgba but must remain fully compatible with IE8 (or others), as I know that is exactly what happened to me, and, to my knowledge, this was the only available solution.
I have a row of 12 flags on an asp.net (vb) website at the top of my home page to allow the user to choose their language. Various speed tests like YSlow and Google Speed, are telling me to sprite these images to minimize the http requests. How would I go about doing so, if they're asp:image's, AND, there's a hover image?
For now, I have 12 linkbuttons; they look like this (note, when you hover over a flag, that creates the hover image above it):
Here is what my code for the images look like:
<asp:LinkButton ID="btnSelectEnglish" runat="server"
CommandArgument="en" OnClick="RequestLanguageChange_Click"
class="flagbutton">
<asp:Image ID="Image8" runat="server" ImageUrl="~/images/flagen.png" height="15"
width="26"
tooltip="View this website in English" title="View this website in English"/>
<img class="map" src="images/flaghoveren.png" height="40" width="120" alt="View this
website in English"/>
</asp:LinkButton>
<asp:LinkButton ID="btnSelectGerman" runat="server"
CommandArgument="de" OnClick="RequestLanguageChange_Click"
class="flagbutton">
<asp:Image ID="Image7" runat="server" ImageUrl="~/images/flagde.png" height="15"
width="26"
tooltip="View this website in Deutsch" title="View this website in Deutsch"/>
<img class="map" src="images/flaghoverde.png" height="40" width="120" alt="View this
website in Deutsch"/>
</asp:LinkButton>
And so on ... 12 link buttons. Is this as simple as just putting a CssClass in the asp:Image tags and if so, how would I do that? Or is this something more complex?
Each flag is 26 x 15 and there are 12 of them. Is it possible to create a sprite image of these and retain the hover effects? I'm thinking the sprite image will have to be 334 pixels (24 x 12 + 11 x 2 for the padding in between) wide x (I don't know what the height would be). Or should I just forget about spriting this and leave it as is? Thanks for any guidance anybody can offer; I know this might be a tough one!
In order to display them via a css sprite sheet, you'll want to get rid of the actual image tags within the link buttons as css sprite sheets are applied via the background-image property.
Since it looks like each has a class of "flagbutton", you can specify that every element with class flag button has a background image (your sprite sheet). That would look something like this:
.flagbutton {
background-image:url(images/myspritesheet.png);
width:26px;
height:15px;
margin-right:2px;
display:block;
float:left;
}
Then, since each has a unique ID, you can specify in your css file a unique background position for each link button, which will allow you to basically slide the sprite sheet around within each flag's window to position it to show the correct flag. That would something like this:
#btnSelectEnglish {
background-position: 0 0;
}
#btnSelectGerman {
background-position: 0 -26px;
}
This would display the first 26px x 15px portion of the sprite sheet in the english box, and the second 26px x 15px portion of the sprite sheet in the german box.
You won't need to add spacing between the flags in your sprite sheet -- as that will be covered by the margin-right in the .flagbutton definition above. Without rollovers, I think your final sprite sheet will be height 312px (26 x 12) by 15px tall.
If you want to add rollovers into the mix, simply place the rollover version of each image below its counterpart in the sprite sheet. This would double the height of your sprite sheet. Then, add a hover class for each of your IDs to cover hovering like so:
#btnSelectEnglish:hover {
background-position: -15px 0;
}
#btnSelectGerman:hover {
background-position: -15px -26px;
}
This will shift your sprites up to reveal the hover image.
This is my css for a paypal sprite I have made..
Image below shows what we get in Internet Explorer and what we get in Firefox ..
The code to display the sprite is:
.ppsprite {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px 0px transparent;
width:200px;
height:100px;
position:absolute;
left:54px;
}
.ppsprite:hover {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px -100px transparent;
}
The code to display the sprite ( html )
<input class="ppsprite" type="image" name="submit" alt="">
The screenpic ( internet explorer and firefox )
The sprite works perfectly in all browsers, but you can see a shitty border in IE and a kind of missing image icon top left.
In chrome and safari, pretty much same ( but shows alt text on top of sprite )
Add a src attribute to your input tag:
<input class="ppsprite" type="image" name="submit" alt="" src="images/blank.gif">
Just create a file called blank.gif
You don't need to do anything with it, just make sure it's in the right directory.
don't use an image-input for your sprite - obviously this should show a broken-link-icon as it must contain an image (set via the src-attrtibute) but you dont set one. maybe you can replace the input with an a (a link) or a button (type="button" or type="submit"). the later should work without changing anything else as a type="submit" would still submit the form, just like type="image" does (and i don't think you'll need to know the klicked x/y-coordinates in this case).
the border simply appears because an input-image has a border by default in some browsers - simply set border:0; for .ppsprite (but, as said, you shouldn't use an input-image at all in this case).
I want to add an image, instead of the default button.
I already have a CSS class for the image, will this work?
<asp:Button ID="..." CssClass=""/>
I am trying it now, and the image is all scrunched up. Maybe it's a CSS issue?
Why not use an ImageButton control?
Although you can "replace" a button with an image using the following CSS...
.className {
background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
border: 0;
height: 61px;
width: 250px
}
...the best thing to do here is use an ImageButton control because it will allow you to use alternate text (for accessibility).
I actually prefer to use the html button form element and make it runat=server. The button element can hold other elements inside it. You can even add formatting inside it with span's or strong's. Here is an example:
<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
I dont know if I quite get what the issue is. You can add an image into the ASP button but it depends how its set up as to whether it fits in properly. putting in a background images to asp buttons regularly gives you a dodgy shaped button or a background image with a text overlay because its missing an image tag. such as the image with "SUBMIT QUERY" over the top of it.
As an easy way of doing it I use a "blankspace.gif" file across my website. its a 1x1 pixel blank gif file and I resize it to replace an image on the website.
as I dont use CSS to replace an image I use CSS Sprites to reduce queries. My website was originally 150kb for the homepage and had about 140-150 requests to load the home page. By creating a sprite I killed off the requests compressed the image size to a fraction of the size and it works perfect and any of the areas you need an image file to size it up properly just use the same blankspace.gif image.
<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /
If you see the above the class loads the background image in the css but this leaves the button with the "submit Query" text over it as it needs an image so replacing it with a preloaded image means you got rid of the request and still have the image in the css.
Done.
Assuming a Css class of "image" :
input.image {
background: url(/i/bg.png) no-repeat top left;
width: /* img-width */;
height: /* img-height */
}
If you don't know what the image width and height are, you can set this dynamically with javascript.
.my_btn{
font-family:Arial;
font-size:10pt;
font-weight:normal;
height:30px;
line-height:30px;
width:98px;
border:0px;
background-image:url('../Images/menu_image.png');
cursor:pointer;
}
<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />
You can add image to asp.net button. you dont need to use only image button or link button. When displaying button on browser, it is converting to html button as default. So you can use its "Style" properties for adding image. My example is below. I hope it works for you.
Style="background-image:url('Image/1.png');"
You can change image location with using
background-repeat
properties. So you can write a button like below:
<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>