I came to know that we cannot have an alt for a css generated image.There are solutions that say by having title atribute we can get the alt effect only on hovering on the image,however when we disable the css we will not able to see that text in place of the image.In my case I need the text to be appeared even when the css is disabled .Is there any workaround for getting the text visible when the css is disabled.
<span class="myimageclass">
hi
</span>
<style>
.myimageclass
{
height: 100px;
width: 200px;
background-image:url('http://cdn.osxdaily.com/wp-
content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png');
color:red;
overflow: hidden;
text-indent: -9999px;
}
</style>
Thanks,
Balaji.
You can use text-indent and overflow: hidden.
This is not flexible method but I hope you can use it.
.image {
width: 200px;
height: 100px;
display: block; /* it needs for inline elements like span */
background: url(http://cdn.osxdaily.com/wp-content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png);
overflow: hidden;
text-indent: -9999px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image js-image">
Image alt
</div>
<button class="js-button">On/Off styles</button>
<script>
$('.js-button').click(function() {
$('.js-image').toggleClass('image');
});
</script>
#balaji, this is already an SO thread that takes care of CSS in a page, you can pick something from here and fine tune for your needs: How to determine if CSS has been loaded?
Related
Here I'm trying to change the CSS variable's value (visibility) when the button is clicked on (using :focus) to show/hide the images, without using Javascript.
CSS
img {
width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
:root {
--c1-vsb: none; --c2-vsb: none;
}
a.c1-imgs {
visibility: var(--c1-vsb);
}
a.c2-imgs {
visibility: var(--c2-vsb);
}
#C1:focus {
background-color: red;
--c1-vsb: hidden;
}
#C2:focus {
background-color: red;
--c2-vsb: hidden;
}
HTML
<html>
</head>
<body>
<div id="left-panel">
<button class="lp-btn" id="C1">SEAL 1</button><br>
<button class="lp-btn" id="C2">SEAL 2</button><br>
</div>
<div id="right-panel">
<a class="c1-imgs"><img src="https://files.worldwildlife.org/wwfcmsprod/images/HERO_harbor_seal_on_ice/hero_full/87it51b9jx_Harbor_Seal_on_Ice_close_0357_6_11_07.jpg"></a>
<a class="c2-imgs"><img src="https://www-waddensea-worldheritage-org.cdn.gofasterstripes.download/sites/default/files/styles/inline_image_full_width/public/20-11-09_habour%20seals%20report_TTF_5200.JPG?itok=YZs9c_dH"></a>
</div>
</body>
</html>
But for some reasons, when I clicked on the button to set visibility to hidden, the images do not get hidden away.
Previously, I tried hiding the images with css pseudo classes and display:none, z-order... but got stuck. In the end, I thought this should have been the simple way out.
Could you suggest a solution to this problem I'm having? I'm not too sure if this is the correct approach.
Thank you!
When you declare #C1:focus { --c1-vsb: hidden; }, the new value of --c1-vsb only applies to #C1, not the entire HTML document.
As MDN states: "[...] the selector given to the ruleset defines the scope that the custom property can be used in".
With css, you can only Show/hide with mouse handle. You don't change 2 state (Show/Hide) when click into button.
I want to hover over a text and display an image then. This works so far, but to be honest the "hitbox" is too small. The image is just getting shown when I actually hover over the text. I would be cool if one could make that hitbox taller. Is there any possible solution for this problem?
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('under_line');
$(this).prev().show();
},function(){
$(this).removeClass('under_line');
$(this).prev().hide();
});
});
.is_hidden{
display: none;
position: absolute;
}
.under_line{
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/>
<span><b>Lorem Ipsum</b></span>
I would love to have it like on this site. Have a look at these tables and then hover over an element like for example like Execute:
It feels so smooth and nice. I already looked with the developer tool into the css of this but couldn't find anything that helps me..
If I understand what you are trying to do correctly, you could try adding some padding and negative margin to your CSS like so:
span {
padding: 30px;
margin: -30px;
}
This will make the element 30px larger on each side, but the negative margin will allow the surrounding text to not be pushed away by the same 30px amount.
There are many ways and it is actually hard to tell what is the best solution without knowing the context, so heres a basic proposal:
span {
display: block;
padding: 10px;
}
You should ofcourse not style the span element in general, but this fits to your example. Better would be to wrap your text in an element and set the style there.
The padding will increase the "hitbox" / size of your element.
Better Solution:
js
$(document).ready(function () {
$('.hovering').hover(function(){
$(this).addClass('under_line');
$(this).prev().show();
},function(){
$(this).removeClass('under_line');
$(this).prev().hide();
});
});
css
.hovering {
padding: 10px;
}
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/>
<p class="hovering"><b>Lorem Ipsum</b></p>
You could achieve this using pure css. Put the image and text in a div and detect when the div is hovered over, then hide/show the image using the :hover selector.
HTML
<div id="hoverhere">
<img src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg"/>
<p>
<b>Lorem Ipsum</b>
</p>
</div>
CSS
img{
width: 200px;
display: none;
position: absolute;
right: -200px;
top: -100px;
}
#hoverhere{
position: relative;
width: 100px;
margin-top: 100px;
}
#hoverhere:hover img{
display: block;
}
#hoverhere:hover p{
text-decoration: underline;
}
Fiddle
http://jsfiddle.net/L7L1bep6/1/
I updated my answer to mimic the site you linked more closely.
I have an image, and on top of that image is another smaller image. When the first image is clicked, the second one appears, and it disappears when the first image is clicked again. My problem is when the second image appears over the first one, it makes the area that it covers of the first image unclickable. Is it possible to make it so the first image can be clicked through the second image?
This is the HTML for the second image (it's generated in PHP):
Echo '<img src="images/tick.png" id="tick' . $i .'" class="hidden" style="position: absolute; top: 0px; left: 70%;"/>';
Simply put both images in a container div, and attach the click event handler to that instead of the bigger image. This way you can simply make use of event bubbling (which isn't available on the bigger image since it cannot have child elements, such as the smaller image).
Find a working solution here:
https://jsfiddle.net/6nnwy3xw/
$(document).ready(function() {
$('.imgcontainer').on('click', function() {
$(this).toggleClass('toggleImg');
});
})
.imgcontainer {
height: 300px;
width: 300px;
position: relative;
}
.imgcontainer img:first-child {
display: block;
height: 300px;
width: 300px;
}
.imgcontainer img+img {
position: absolute;
top: 50px;
left: 50px;
opacity: 0;
transition-duration: 0.3s;
}
.imgcontainer.toggleImg img+img {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgcontainer">
<img src="http://lorempixel.com/300/300" />
<img src="http://lorempixel.com/200/200" />
</div>
I'm assuming your use-case is some kind of checkbox replacement element? In this case, this may also be of interest to you:
Use images like checkboxes
If that is the case, I'd make the surrounding diva label instead, so it also automatically checks your (probably hidden) real checkbox.
If I understand the issue you're describing properly, you could try turning pointer-events off for the second image, that is often displayed over the click-target:
.two { pointer-events: none; }
Note that this is only supported with HTML in Internet Explorer 11 and up (as well as in Chrome and Firefox). For SVG, support was available in IE 9. That may suffice for a work-around if needed.
Fiddle: http://jsfiddle.net/tbqxjp19/
For better support you should move your handler to an element that will not be obstructed, and as such will always work to toggle the visibility of the second image:
<div class="images">
<img src="http://placehold.it/100x100" class="one" />
<img src="http://placehold.it/100x100/000000" class="two" />
</div>
document.querySelector( ".images" ).addEventListener( "click", function () {
this.classList.toggle( "toggled" );
});
The above simply binds a handler to click events on the .images container, toggling a class that will hide and/or reveal the second image, given the following:
.toggled .two {
opacity: .1;
}
Fiddle: http://jsfiddle.net/tbqxjp19/1/
Try this , if you are fine with jquery solution.
HTML
<img src="images/large.png" class ="image" id="image1" style="position: absolute; top: 0px; left: 0px;" />
<img src="images/small.png" id="image2" class ="image" style="position: absolute; top: 0px; left: 0px; z-index:10;" />
css
.hiddenimage{
display:none;
}
JQuery
$(".image").click(function(){
("#image2").toggleClass("hiddenimage");
})
Trying to change a div background color when hover over another div. But I can't get it to worked. Been seing aroud her now, but can't find a similair question.
<style type="text/css">
#main {
width: 960px;
height: 600px;
margin: auto;
position: relative;
background: red;
}
#trykk {
width: 100px;
height: 100px;
background-color: yellow;
}
#trykk:hover #main {
background-color: green;
}
</style>
<div id="main">
<div id="trykk">
</div>
</div>
Thats the code I've been using. The only problem is that I'm not allowed to use javascript. So is there any way I can change background color on div #main when I hover over div #trykk?
A demo related to Rodik's answer, as he said you cannot change select parent using a child hence you cannot change the style of parent element, but if you want you can change your markup, as you said you cannot use javascript but if you can change the markup than it will go like this
Demo1
HTML
<div id="main">Main</div>
<div id="trykk">Trykk</div>
CSS
#main:hover + #trykk {
background-color: green;
}
Or if you want to nest your div's as you are doing right now, just change the selector like this
Demo2
HTML
<div id="main">Main
<div id="trykk">Trykk</div>
</div>
CSS
#main:hover > #trykk {
background-color: green;
}
CSS selection only works one way, from parent to child.
A child's state, hence, cannot affect it's parent's state.
A javascript mouseover event will be needed to implement this type of functionality.
with jquery you could do this:
$(function(){
$("#trykk").hover(function(){
$("#main").toggleClass("greenBackground");
});
});
I want to fix the size of empty image to 150px. On Firefox, I can use float: left, but it doesn't work on Google Chrome.
HTML:
<div>
<img src='some broken url' alt='no image'>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
CSS:
div {
width: 450px;
height: 500px;
background: cyan;
}
img {
display: block;
max-width: 100%;
min-height: 150px;
min-width: 150px;
background: grey;
}
Is there a CSS solution for this?
I think there is some misunderstanding. The srcs are supposed to be random urls that I wouldn't know in advanced.
Ideally, use an empty placeholder <div> for this:
<div>
<div><!----></div>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
... and give it the dimensions you need. This will allow you to do stuff like show a background placeholder image in its place etc.
If you want to style an empty image-tag:
img[src=""] { width: 150px; }
Should work, expect for IE6.
If you want to get it cross browser compatible, the solution from #Tom would be your best choice.
Or jQuery solution (because CSS can't check for broken URLs):
$('img').error(function(){
$(this).css('width', '150px');
});