I am working on pictures inside ASP.net (VB)
and try to make this picture hide when the mouse over and show if it mouse out
How can I do this without using script or jQuery ?
help me please
You can do this in Javascript or CSS.
For example, to use CSS:
<img class="hideshowimage" ... />
and in your CSS
.hideshowimage:hover { visibility:hidden; }
Related
I am trying to embed this iTunes button that I am putting on a site, but it seems to automatically alight left. Where and how in this code would I make the button center itself? Please see the example code below. Thanks!
Here's a quick fix if you have access to the css you could easily do this with flex box.
Wrap your anchor tag:
<div class="itunes">
</div>
add this css:
.itunes {
display:flex;
justify-content:center;
}
jsFiddle
Although adding inline-styles is frowned upon..., if your in a pinch this will work as well. Please don't do this unless you must:
<div style="display:flex;justify-content:center;">
</div>
note: flex box works on most browsers.
On this link, instead of hovering the mouse over the image, I wanted to make the other images appear only when I click in the main image. I tried replacing the pseudo class for target, focus, but none of them worked. Is there a way to do this with css only? Because my CMS doesn't allow me to insert javascript.
Thanks,
Bruno
Stuff you can do with the “Checkbox Hack”
It is possible to do in combination with HTML, not just css. You will have to take use of the checked css event in combination with <label> element, you will also have to have some checkbox hidden somewhere in the document. It is quite hacky and its all described in the article.
It is possible to do this. There is one problem where links do not register :focus events, it will register them if you navigate to the link with TAB. But that would be a problem for the users. Anyway you can use that to overcome the problem. Just place tabindex on your link
<a href="#" tabindex="0">
<img src="1.png">
</a>
On your CSS:
a:focus img{
content:"xxx";
width:XXpx;
height:XXpx;
/*Whatever you need here*/
}
I want to display my contact form when the user hovers over my navigation menu "contact" list item using css.
So I want to have a solution that explains how I can use css to hover over "A" (menu item) to display the content corresponding to "A" (content) or if you hover over B it displays B and so on.
Here is great tutorial that i used for my website:
http://codeissue.com/articles/a04e0d17a60fad8/simple-html-drop-down-hover-menu-using-just-css-no-javascript
You can try the following simple solution based on pure CSS (no javascripting, so it will work even if javascript is disabled on client's computer):
HTML
<body>
<div class="itemHeader">A</div>
</body>
CSS3
div.itemHeader {cursor:pointer;}
div.itemHeader:after {
content: "Blah-Blah-Blah";
color: #909090;
display:block;
opacity:0;
}
div.itemHeader:hover:after{opacity:1;}
link to jsfiddle: http://jsfiddle.net/fLMSd/
I have three HTML buttons and when I click on them there is no outer glow and they don't do anything.
I have also tryed to style them but they stay with the default design. I have just used ordinary code I just don't have a clue what's wrong with them
<input type="button" value="Proceed">
<input type="button" value="Cancel">
Don't use , instead use with CSS to create your buttons so they react to touch. It'll require some javascript as even most mobile browsers don't properly map touch events to the CSS :active pseudoclass.
Your "button":
<a class="button" id="yourButton">Button</a>
Some very basic CSS to toggle the background and text color on touch:
a.button {
color:#fff;
border:0px;
padding:5px;
background:#000;
}
a.button-active {
background:#fff;
color:#000;
}
And here's the javascript you would call in your onload on deviceready handler. I'm using xuijs here (xuijs.com), but you can use jQuery or any other javascript to add and remove classes:
x$('.button').on('touchstart', function(e) {
x$(e.currentTarget).addClass('button-active');
} );
x$('.button').on('touchend', function(e) {
x$(e.currentTarget).removeClass('button-active');
} );
This is a very basic example. Once you have this all setup, you can make any changes you want to the CSS to determine how the button will look when it is active and inactive.
Hmmm.. Your question is not that clear. But if you only want a glow in your buttons, you can take a look at how Formalize does it.
Here's a page showing the button glow effect (when pressed).
Update:
Oooops, sorry, missed the "PhoneGap" part. The solution I gave above is only for normal html forms, I don't have experience with using phonegap yet. cheers. :)
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"/>