I'm trying to get various locations to appear on a image with mouseovers. So basically I have an image and when you hover over a link nearby a hoverbox appears at the location specified in CSS on the image. However I'm trying to get it to happen with multiple links without creating code for each CSS box.
I have something like 50 links and and when I hover over one I want to be able to pull from a db or text file to grab the location where it should create a hover on the image. My original thought was using PHP to help pull in the information from a file, put it into an array and then having the CSS update on the fly. This seems doable if the user just clicks the link as then I can tell CSS what place in the array to look for the location. I am unsure how I could get this to work with mouseovers if at all possible.
The CSS code is very basic at the moment as shown below.
#box {
position: absolute;
top: 100px;
left: 200px;
background-color: #ffffff;}
Let me know if anything doesn't make sense or if I'm just forgetting something.
Thank you!
Ok, so what you're trying to do is called a CSS sprite. Here's what you want (my example is orthogonal to your code, but teaches the principle):
.link {
width: 50px;
heigh: 50px;
float: left;
text-indent: -9000px;
background-color: transparent;
background-image: url(path/to/sprite.png);
background-repeat: no-repeat;
}
.link#one {
background-position: 0px 0px; /* This one is top left on the image. */
}
.link#two {
background-position: 0px 50px; /* This one is 50px from top and 0px from left on the image. */
}
You can see where to go from here (and you don't need to use .link#one. I just used it for example purposes. You could just use #one, or even a class .one.
Practice with this and you'll get how it works soon enough. Here's some sample HTML:
<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>
Just through all that together, and make your image a 100px tall by 50px wide .png file with 50px x 50px for each link.
Related
I'm using datamaps to display the countries of the world, but have the graph centered. When I hover over a country, the pop up appears all the way to the left, accurate to where the country would be if I didn't center it. I believe the issue is the css:
#map {
margin: 0px auto;
width: 700px;
}
But I don't know how to center it in a different way.
Is there any way to change where the pop up appears? Thanks in advance!
(I tried to add a code snippet, but it was getting an error for some reason.)
Changing the position to be relative works. As Eric Hoose's example shows, the <div> is relative, so the hover still works.
#map {
margin: 0px auto;
width: 700px;
position: relative;
}
The hoverover popup is attached to the dom via the datamaps-hoverover class. By default, d3 sets this position: absolute, with top and left attributes being set dynamically based on where the mouse is. Since the position is absolute, it shouldn't matter that you have the map centered.
For example, I added your css (while renaming the id to match the example):
#container1 {
margin: 0px auto;
width: 700px;
}
to the jsbin that datamaps uses as an example here.
As you can see, the popup is still in the correct spot even though the map is centered.
So I'm trying to get two individual divs which are close in proximity to share one background image but I'm not sure if this is possible. I've uploaded two pictures, the second being designed for a smaller screen (just to further explain what I mean) http://imgur.com/a/2dypd . I can't imagine two separate background images would work as they wouldn't line up when resizing the window.
The only solution I can think of is creating two plain white divs to overlay on one single div but that seems like a dodgy way to go about it. I'm not expecting a hunk of code to be written for me, maybe just explain if it's possible and a reference so I can learn. Cheers.
Based on #cale_b's comment, you can set the same background to both div's and then use the background-position property to do the delusion of background sharing.
Then you can use media queries to make it look good in mobile too.
Here you've got a simple example that looks like the one you posted:
#wrapper {
width: 800px;
font-family: sans-serif;
}
#top {
height: 200px;
margin-bottom: 20px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 0;
line-height: 150px;
color: #FFF;
font-size: 32px;
text-indent: 50px;
}
#bottom {
width: 500px;
height: 100px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 -220px;
}
#bottom ul {
list-style: none;
}
#bottom ul li {
display: inline-block;
list-style: none;
padding: 0 10px;
line-height: 50px;
color: #000;
font-size: 24px;
}
<div id="wrapper">
<div id="top">
I'm a banner
</div>
<div id="bottom">
<ul>
<li>I'm</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
</div>
As I understand, you want to use only one image copy of one image over two div and you dont want to use any overlay.
So you can do the following:
On the bottom div, use background-position-y:-100px or any other desired value. This way you push the image upwards.
This looks promising so far, but you will face an issue with the size of the background size specially if you are making a responsive web page.
I would say that background-size:100% 100%for both div would do the job yet it will make the image stretching (unless you go really responsive).
I still recommend using an overlay or even a ready made image. But if you insist on using two div then the above steps should be enough while you have to make your design suitable for this image.
N.B. keep in mind that you might need to use background-repeat:no-repeat
on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.
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
I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several different parts rapidly).
Is there a way I can invert (or otherwise highlight) a small section of an image JavaScript?
Instead of using image maps, you could try this CSS method:
Use a transparent <div> on top of each "image-map" part (link), and then use the CSS :hover pseudo-class to handle the highlighting.
CSS:
#image {
position: relative;
width: 400px;
height: 100px;
background-image: url(image_map.png);
}
#map-part {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: transparent;
}
#map-part:hover {
background-color: yellow; /* Yellow Highlight On Hover */
opacity: 0.2;
filter: alpha(opacity=20);
}
HTML:
<div id="image">
<a id="map-part" href="http://www.example.com/"></a>
</div>
Note that this will only work for rectangular links.
Take a look at jQuery MapHilight.
I'm not sure it does exactly what you need, but you can achieve that with minor tweaking.
How about overlaying a semi-transparent <DIV> block over the clicked area to highlight it?
There are many way,
In a d fashion way, break down your images into many smaller pieces and using table to combine them. After that, by using javascript to replace thr "src" attribute for the highlight effect.
In another CSS way, use CSS to clip the alt. image on top of the original, and control which area should be visible.
It is better to have a single image for all rather then many small images to speed up and user will get it without delay by network.