I would like to add actions to this image
So when the user hovers over red dot, some information appears, or when clicks (modal from bootstrap appears). I am using bootstrap, and spreading divs over the image don't give normal result. I want it to be responsive. Any ideas?
there should be a onhover method for javascript on the html dom.
<div id="point1" onmouseover="doHover('point1', true);" onmouseout="doHover('point1', false);"></div>
So, you have a problem with the divs?
function doHover(id, bool) {
var obj = document.getElementById("hoverPoint"+id);
if(bool) {
obj.style.backgroundColor="green";
}else {
obj.style.backgroundColor="blue";
}
}
.hoverPoint {
position:absolute;
top: 0px;
left: 0px;
width:100px;
height:100px;
display:block;
background-color: blue;
opacity: .6;
}
#hoverPoint1 {
top: 130px;
left: 135px;
}
<img src="http://i.stack.imgur.com/sUTxI.png" style="width:777px; height:292px" />
<div class="hoverPoint" id="hoverPoint1" onmouseover="doHover(1,true);" onmouseout="doHover(1,false);"></div>
I solved the problem by deleting red dots in photoshop and then adding them using pure html (I made buttons with background image of red dots) then I placed this dots randomly on the roadmap
Related
I have created popup play youtube videos using html,css and jquery.
Now i need to show, play button when hover an image.
Here is my code tried,
http://jsfiddle.net/495vbwy2/
May i know, how to do?
Html:
<div class="videoThum"> <a href="javascript:;" rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="slide-2.jpg"/></a></div>
</div>
When i worked out like this ,
.guideBox .videoThum a:hover{color:#000; opacity:1;}
It doesn't work. May i know, how to do this,
Can anyone please help me. Thanks in advance.
try this. change color and opacity according to need.
.youTubeVideo:hover {
opacity:0.5;
background-color:#ffffff;
background-image:url('image.png');
}
HTML
<div class="videoThum"></span></div>
CSS
.videoThum .youTubeVideo {
position: relative;
}
.videoThum .youTubeVideo .icon {
display:none;
position: absolute;
top: 50px; // Set icon position you want
left: 50px; // Set icon position you want
}
.videoThum .youTubeVideo:hover {
display: block;
}
I would like to hover over div id-"RollOver1" and be able to change the background to a different image from the main one. Only pasted the HTML for the rollover div cant use jscript so is there a way in HTML or ....?
<div id="RollOver1" style="position:absolute;overflow:hidden;left:152px;top:397px;width:183px;height:183px;z-index:4">
<a href="./car.html">
<img class="hover" alt="" src="images/Enter_02.jpg" style="left: 0px; top: 0px; width: 183px; height: 183px; display: block;">
<span style="display: none;"><img alt="" src="images/index_01.jpg" style="left:0px;top:0px;width:183px;height:183px"></span>
</a>
</div>
You can do this with the following code:
#RollOver1 {
background:url(INITIAL_BACKGROUND);//here use the url of the background you want when is NOT on hover
}
#RollOver1:hover {
background:url(BACKGROUND_ON_HOVER);//here use the url of the bg you want when is on hover
}
You can use :hover pseudo class:
#RollOver1 {
background: url('img1.png');
}
#RollOver1:hover {
background: url('img2.png');
}
But you will usually see "glich" between changes of images, because second image will take some time to be loaded.
To avoid that, use image sprite. Put both images (normal and hover) to single image and than use css background-position
#RollOver1 {
background: url('sprite.png') no-repeat 0 0;
}
#RollOver1:hover {
background-position: -80px -90px;
}
It will be more efficient way to load small images (like buttons, icons and so on).
Check this link
Using JQuery you can try
$(document).on("mouseover", "#RollOver1", function(e) {
$(this).css("background", "url(sampleImage.png) no-repeat");
}
});
use the css pseudo class :hover
You can use below styles
.RollOver1:hover {
background-image: url('paper.gif');
}
I made a thread earlier about putting icons inline. But now, I'm having trouble trying to hover an icon image. For example, say I have a facebook icon, if the mouse is on this icon, I want this icon to bright a bit (not the background, just the icon) in order to indicate that the cursor is on the icon. From my memory, this was done through having two separate images (one with normal icon, the other being brighter than the normal icon) and you fiddle around with the background image within hover in css but I can't seem to work this out. In this example, say the facebook1.png is bright version and facebook.png is a normal one.
HTML
<a class="icons" href="http://www.facebook.com"><img src="images/facebook.png"></a>
CSS
.icons a{
display: inline-block;
width: 64px;
height: 64px;
}
.icons a:hover {
background: url(../images/facebook1.png);
}
still can't seem to get this to work...
Any help would be greatly appreciated.
Thanks in advance.
An easy way to do this is using Javascript. Try using this code:
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("fb_high"))
{
element.src="fb_low.gif";
}
else
{
element.src="fb_high.gif";
}
}
</script>
<img id="myimage" onhover="changeImage()"
src="fb_low.gif" width="#" height="#">
Just insert that into your code wherever you want and it should work. You can also do that with the Twitter icon, but you will need to have two separate pictures.
Use
<a class="icons" href="http://www.facebook.com"></a>
And style as
<style>
.icons{
background: url(../images/facebook.png);
display: inline-block;
width: 64px;
height: 64px;
}
a.icons:hover {
background: url(../images/facebook1.png);
}
</style>
First to the anchor that like following:
<a class="icons" href="http://www.facebook.com">f</a>
And change your css as following:
.icons {
background: url(../images/facebook.png);
display: inline-block;
width: 64px;
height: 64px;
content:"";
}
.icons:hover {
background: url(../images/facebook1.png);
}
This will change your background image.
I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery.
Working FIDDLE Demo
Consider that you want something like this:
We write our markup as simple as possible. One element for container, one element for our link and one another element for popup:
<!-- [container] -->
<div class="link-with-popup">
<!-- link -->
<div class="link">CSS</div>
<!-- [popup] -->
<div class="popup">
<div class="box">CSS Description</div>
</div>
<!-- [/popup] -->
</div>
<!-- [/container] -->
Here is our layer structure in picture:
CONTAINER
Let's write CSS for our container.
.link-with-popup {
/* for visualizing */
background: yellow;
/* we need relative, because childs are absolute */
position: relative;
margin-bottom: 10px;
height: 30px;
width: 400px;
}
[!] Note that we make our container relative. Because the children will be in absolute mode.
LINK
We create our link as an absolute element from left, just as shown in the figure above.
.link {
background: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
z-index: 10;
}
POPUP
The dimention of popup element is same as the container, so we set all top, left, right, bottom properties to 0.
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: green;
z-index: 20;
}
[!] Note that z-index of popup element must be greater than link element.
.popup {
/* we won't show the popup yet */
display: none;
}
By now, we'll get this result (check it on jsFiddle):
Now we want the click for our link. This must be done with :active pseudo selector in CSS. But how we must show the poup? We have to get the next sibling element by the link. We use the + selector in CSS:
.link:active + .popup {
display: block;
}
See the result on jsFiddle. But the problem is that when user realize the mouse, the popup will disappear (as it display is set to none).
So we set the :hover rule for the popup and make it block.
.popup:hover {
display: block;
}
Check the jsFiddle demo. Now we get close enough. The only issue that the popup element, hide our link.
But it doesn't matter, because we won't set background for our popup (it will be transparent).
TEXT
For wanted text in popup element, we set this rules:
.popup .box {
position: absolute;
/* note that we make a gap from left to don't hide the link */
left: 130px;
top: 0;
right: 0;
bottom: 0;
background: #505050;
}
Check the jsFiddle demo. Now we have all things that we need.
Now it's time to make our popup element transparent (by setting the background as transparent or simply remove the background: green; rule):
.popup {
background: transparent;
}
And here is the final jsFiddle result. And if you add some extra CSS to it, it can be more stylish. Something like this that I've created.
Some important note to memorize:
In the final result, there is a gap between the link (blue one) and the popup (gray one). But the fact is that the gray element is not our popup. It's a child of popup and our popup is an 100% width and height element on the container.
Working FIDDLE Demo
Another way is to use the :target property (only works in moderns browsers).
Here's a qucik DEMO where I've hidden the div by applying opacity: 0; and the when you click the link the div changes to opacity: 1; The link and the div are matched using a hash in the url.
Here's the code from my example.
HTML
Click me
<br />
<div id="pop"></div>
CSS
#pop {
width: 100px;
height: 100px;
background: #000;
opacity: 0;
}
#pop:target {
opacity: 1;
}
There are some side effects though. The browser will jump/scroll down (not sure if it's possible to prevent this?) to the matched div and since we are using a hash in the url it will effect the browser history and, as mentioned above, it only works in modern browsers.
EDIT If you want to look into other hack/tricks for pure CSS click events, this is a good post - http://tympanus.net/codrops/2012/12/17/css-click-events/
I have a image where text/link is overlayed on top. My problem is that sometimes the text in the foreground will hide the link in the image in the background. I assume this is because the text box forms an invisible rectangle around the text, thus creating a region that appears it should belong to the image but is actually being covered by the text. I am wondering if it is possible that when I mouse over this region, I will be linking to my image link as oppose to my text link (see illustration).
http://jsfiddle.net/WHpMr/
Try this, i.e. put your tag inside : http://jsfiddle.net/WHpMr/3/
HTML:
<div class="ad">
<span class="link middle right">my text link abcdefg<br>meow<br>meow<br>meow</span>
<img src="http://www.placekitten.com/320/200">
</div>
CSS:
.ad {
position: relative;
height: 200px;
width: 320px;
}
.link {
position: absolute;
padding: 20px;
pointer-events: none;
}
.inline-link {
pointer-events: all;
}
.top { top:0%; }
.middle { top:33%; }
.bottom { top:66%; }
.left { text-align:left; left:0%; }
.center { text-align:center; margin:0 auto; width:100%; }
.right { text-align:right; right:0%; }
You are correct in thinking that. The element will create a block containing the content. You could use the Map Element if you are hell bent on doing that.
If you make each line its own link, that will minimize the problem. If you really want to go all out, you can make each word its own link. But you're getting into stuff that's easier to do with some JS automation instead of manually in the HTML.
EDIT: Here's an attempt at a vanilla JS solution that works for your simple example, at least:
http://jsfiddle.net/aLN2d/35/