I would like to create a link out of the following so that the image is clickable.
What would you do to get the background-image clickable?
HTML: (Displays an Image which I would like clickable)
<div class="some_image">
</div>
CSS:
.some_image{
width: 200px;
height:100px;
background-image: url(../images/image.png);
}
You can't make a background image clickable with HTML alone. It's a property of an element and not an element itself. Simply wrap the div in an anchor. This is permissible in HTML5 spec.
More info
Of course, you could simply style the anchor:
.some_image {
display: block;
width: 200px;
height:100px;
background-image: url(../images/image.png);
}
<a class="some_image" href=""></a>
You can't do this traditionally however you may achieve the effect with hacky techniques:
#heatSpot {
position: absolute;
left: 20px; // over area of bg image
top: 10px; // over area of bg image
cursor: pointer;
}
then just fire the link or whatever your trying to do onClick with either wrapping above element in <a> tag -- or using jQuery / JavaScript.
Related
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 have two images of text. one with regular text and the other with the same text but with glow effect.
the thing is i want the glow image to replace the regular one while hover.
but instead the glow image appears in addition to the regular one.
please help!!
thanx in advance
here is the code... the background-image attribute is in a comment block because the regular text image is defined as the img src int the html file
#groundPlainLink
{
height:56px;
width: 170px;
margin-left:476px;
float:left;
/*background-image:url("../images/txt_menu_ground_plane_pc.png");*/
}
#groundPlainLink:hover
{
background-image: url("../images/txt_menu_ground_plane_glow_pc.png");
}
It appears in addition, because the IMG element renders above the background image. Why not just use CSS, and skip the IMG element?
You have to hide the image on hover.
#groundPlainLink img:hover { opacity:0; }
However, as mentioned above, it'd be easier and simpler to remove the img and rely on background images for this.
EDIT: Or, style the element instead of the div element, then put text inside the link with a font-size:0. That'd do what you're looking for and still be good for screen readers/accessibility/SEO.
a fiddle
https://jsfiddle.net/Hastig/jd23mcnx/
html
<a class="image-link">
<img class="image-default" src="http://i.imgur.com/c0lfxLU.png">
<img class="image-hover" src="http://i.imgur.com/yfNIfVR.jpg">
</a>
css
.image-link {
display: block;
width: 500px;
margin: 20px auto 0px auto;
}
.image-link img {
width: 500px; height: 300px;
}
.image-hover {
display: none;
}
.image-link:hover .image-default {
displaY: none;
}
.image-link:hover .image-hover {
display: block;
}
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/
I am using CSS for hover and it works, but the hover image allow the background image (pic_normal) to display like transparent behind the image(pic_hover).
How to display only the hover image when mouse over on it?
HTML
<img id="first" src="images/clients/pic_normal.png" />
CSS
#first img:hover {
background-image: url("/images/clients/pic_hover.png");
background-repeat: no-repeat;
}
Your CSS works just fine as intended - it changes the background of your img element. Think about the pic_normal.png as the content of your element (e.gg. some text). When you changing the background the content doesn't change.
Try this instead - http://jsfiddle.net/WvKye/
<div id="first"></div>
#first {
background: url("images/clients/pic_normal.png") no-repeat;
height: 300px;
width: 300px;
}
#first:hover {
background: url("images/clients/pic_hover.png") no-repeat;
}
Use this:
<img onMouseOver="this.src='images/clients/pic_normal.png'"
onMouseOut="this.src='images/clients/pic_normal.png'"
src="images/clients/pic_normal.png"/>
I think u need some javascript for that
Using Jquery u can do like this
$("#first").hover(function()
{
$(this).attr("src","/images/clients/pic_hover.png");
},function()
{
$(this).attr("src","/images/clients/pic_normal.png");
}
);