Those of you who have seen google plus may know what Im taking about...
Essentially my problem is this. I would like to have a circle with radius for example of some number of pixels with text in the center. On mouseover, the outline of the circle expands by whatever it was plus 5. When I mouse out, the circle gradually shrinks back to its original size. If the text in the middle of the circle is clicked then an alert box of some sort pops up.
What is a good way to do this and how? Does it involve div tags?
Use CSS3 border-radius to create your circle and some JS to do the animations...or you could try to do them with CSS3 as well.
http://jsfiddle.net/DOSBeats/cE6Yb/
This version uses JS.
Here is the CSS code they use:
.eswd {
background: url("/images/experiments/nav_logo78.png") repeat scroll 0 -243px transparent;
}
.esw {
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
display: inline;
height: 15px;
margin-left: 5px;
overflow: hidden;
vertical-align: 6px;
width: 24px;
}
HTML:
<button g:pingback="/gen_204?atyp=i&ct=plusone&cad=S0" title="Recommend this page" g:undo="poS0" g:type="plusone" g:entity="http://anewyorkthing.com/" onmouseover="window.gbar&&gbar.pw&&gbar.pw.hvr(this,google.time())" onclick="window.gbar&&gbar.pw&&gbar.pw.clk(this)" class="esw eswd" style="" id="gbpwm_0"></button>
Related
I'd like to be able to detect possibly with CSS clicking / hovering on a shape (<img> tag with an SVG source file) but not on the box-model estate around it. In the image below, the area that would listen for a click / hovering is the one in light blue, while the 'extra' estate is in orange.
In my particular case, I have two circles one on top of the other - the one below listening for a click / hovering. Therefore, I'd like the light blue annulus only to listen for them. However, according to the box model, in order for the underlying circle to detect a click / hovering, the user would have to click or hover on that square orange stripe.
I think you would need to convert the image from an SVG and use an image map polygon to specify the area for an onclick event.
https://developer.mozilla.org/en/docs/Web/HTML/Element/map
You could also achieve this by using two divs (one wraped around the other) with cSS border-radius and background-image set to your image. With stopPropagation () and cancelBubble you can set the clicking behaviour to your favorite.
HTML
<div class="big_cycle" onclick="alert ('clicked');">
<div class="small_cycle" onclick="event.cancelBubble = true; event.stopPropagation ();"></div>
</div>
CSS
.big_cycle {
width: 50px;
height: 50px;
position: relative;
cursor: pointer;
background-color: #f00;
border: 1px solid #000;
border-radius: 25px;
}
.small_cycle {
width: 28px;
height: 28px;
position: absolute;
left: 10px;
top: 10px;
cursor: default;
background-color: #0f0;
border: 1px solid #000;
border-radius: 14px;
}
I made a simple Plunker to demonstrate that: Click me
I Had read somewhere on a webtutorial that we can use only a single Image for hover effects in css. For Eg. I Need to input only this image in CSS
So, When the Facebook Icon is not hover we see the dull grey icon, but when someone hovers over the icon, the blue icon is displayed and I need to use only one image file in the CSS for this purpose.
How Can we do that. Also, I would like to know what are these kind of images know as ?
They are called sprites
They allow you to use one image for multiple elements, that can look entirely different
Official Documentation
I made a quick example to do what you required here
<div></div>
div {
background: url('http://i45.tinypic.com/2jee9zo.png');
background-position: -10px -15px;
height: 70px;
width: 70px;
}
div:hover {
background-position: -10px 83px;
}
You can use a CSS sprite. This is a useful tool: http://es.spritegen.website-performance.org/
Further reading: http://www.w3schools.com/css/css_image_sprites.asp
edit: Its called a spirte (sorry added this, cause i forgot to awnser your first question how this was named)
You can do this by positioning your background image as in example from my work down below
This is CSS, btw
input#searchSubmit { height: 34px; width: 36px; background: url('../images/searchSubmit.png') no-repeat; margin: 8px 8px 0 4px; cursor: pointer; border: none; }
input#searchSubmit:hover { background-position: 0px -34px; }
As you see, as I hover over the searchSubmit , it will change the background position of the image, pasted on the button, showing instead of the black with red search icon, the red with white search icon.
site is here, so you can see it in action, all my action buttons are made this way btw.
click here for seeing this in action
Context
On OSX, I notice that if I take my mouse cursor and drag it to the border (bottom, left, or right), the cursor changes to from regular pointer to resize cursor (<->) when:
I am inside the window, but within 4-5 pixels of the border
I am outside of the window, but within 4-5 pixels of the border
Question
Now, I note that in CSS/DOM, I have the "on mouse over" event -- how would I implement something like this in CSS / DOM / JavaScript?
Would the correct approach be:
create some type of "invisible border" that is not shown, and also not contribute to the window size?
do some type of complicated manual mouse tracking to know when I'm close to the border (since I also need to handle when the mouse cursor is outside of the border)
does CSS have some type of "mouse near border" rather than "on mouse over" event?
Thanks!
This is an approach I refined from one originally posted by undefined (another user) which was subsequently deleted for some reason. By no means should this be interpreted as a final approach, but it shows how you could create a bounding box with left/right/top/bottom handles, all added by CSS.
HTML
<div id='container' class='boundary top-bottom'>
<div class='boundary left-right'>
<div class='contents'></div>
</div>
</div>
CSS
#container {
width: 300px;
height: 300px;
margin: 50px;
}
.contents {
cursor: default;
background: green;
width: 100%;
height: 100%;
}
.boundary {
background: blue;
padding: 10px;
}
.boundary.top-bottom {
cursor: row-resize;
padding-left: 0;
padding-right: 0;
}
.boundary.left-right {
cursor: col-resize;
padding-bottom: 0;
padding-top: 0;
width: 280px;
height: 300px;
}
http://jsfiddle.net/userdude/V5h5F/1/
Handling something like needing a border and invisible overlaps would require some retooling, probably using something like Javascript and the internal boundary being the border; the complexity of doing that in pure CSS is problematic I think (undefined's answer handled this with positioned elements on the boundaries).
I'm currently having a of problem with my Phonegap application on Playbook. It consists of a button and a circle that moves across the screen. The circle is re with a black border, but the playbook renders it as just a red square. Does anyone know of how to fix this? I've tried changing the image type and adding in a background color tag, but that didn't work.
You can use a simple div with css 3 properties to create a simple circle without images.
background: red;
width: 10em;
height: 10em;
-moz-border-radius: 5em;
-webkit-border-radius: 5em;
border: solid 1px #000;
border-radius: 5em;
I wrote some CSS in my HTML code to create rollover buttons. Then i tried to run it with IE 7 and surprise! it doesn't run. In fact it shows both the button and underlying rollover. How can i get around IE's inability to cache background images? Preferably using CSS but javascript 'will' be tried.
Sample CSS:
#Menu
{
width: 100%;
height: 32px;
margin-top: 93px;
padding-left: 13px;
}
#Menu a
{
height: 32px;
line-height: 32px;
width: 123px;
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
float: left;
margin-left: 3px;
text-decoration: none;
color: #1e1e1d;
font-size: 12px;
text-align: center;
}
#Top #Menu a:hover, #Top #Menu a.active
{
background-position: 0px 0;
text-decoration: underline;
}
Well firstly you are giving conflicting instructions ...
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
... the background is already positioned using shorthand.
I assume that your regular and hover states both share the same image, so why not do both with shorthand? Remove...
background-position: -123px 0;
... and for your hover and active states, use ...
background-position: bottom left;
Then have both your states in one image, one below the other (which I assume is what you've been trying anyway).
Image rollover issue comes mainly because of downloading image every time on hovering a link or tab. This flicker is caused by the delay when the primary image is removed and the rollover image is loaded (even though they are technically the same image, Internet Explorer prefers to treat them separately).
check it out complete fix for rollover issue:
http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html
if you are using the :hover pseudo-selector, then it won't work in IE unless it is an anchor tag. Try changing the button into an anchor. You can still make it look like a button using css.
If you want to use javascript, then have a look at jQuery.
Try making sure your CSS background syntax is correct. Some browsers let you specify the properties in any order however IE will choke. You should specify the attachment in the form X Y (horizontal then vertical). You currently have top left. Make it left top. Also you have no-repeat at the end of the line, it should come just after the url declaration and before the position declaration.
The order for CSS background shorthand values should be:
background-color
background-image
background-repeat
background-position
background-attachment
eg. background: #fff url(example.jpg) no-repeat left top fixed;