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;
}
Related
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
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 am pretty new to coding...
<div class="box">
Click Here
<div class="slide"></div>
</div>
Here is my code. I am trying to get "slide" to start a transition when I hover over the entire"box". As it is now I have to hover over the actual div.
Here it is in jsfiddle. I've been using LESS, can you not use it in jsfiddle?
http://jsfiddle.net/nntTn/
Any help is appreciated. Thanks!
Working Fiddle http://jsfiddle.net/nntTn/2/
You just had the wrong selector is all for this
So I changed this
.box .slide:hover {
left: 262px;
}
to this
.box:hover .slide {
left: 262px;
}
and it works great now.
On line 32 of your fiddle, change to:
.box:hover .slide {
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 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/