how can changed image size in mouse
example
from
to
This is one way to do it using HTML/CSS/JQuery:
See this code in action via jsfiddle here.
THE HTML
<div id="image_frame">
<div class="shrinking_image"></div>
</div>
THE JQUERY
$(document).ready(function(){
$("#image_frame").hover(
function(){
$(this).find(".shrinking_image").addClass("image_frame_hover");
},
function(){
$(this).find(".shrinking_image").removeClass("image_frame_hover");
});
});
THE CSS
#image_frame {
width:167px; height:27px;
}
.shrinking_image {
background-image:url(http://i.stack.imgur.com/q9MCk.jpg);
background-repeat: no-repeat;
background-position:0px 0px;
overflow:hidden;
width:167px; height:27px;
}
.image_frame_hover {
overflow:hidden;
background-position:-70px 0px !important;
width: 24px !important;
}
See this code in action via jsfiddle here.
Basically, you are just using jQuery's hover() function to assign and un-assign a special css that uses the a combination of the css properties width, height and background-position to show only the parts of the photo you care about.
Hope this helps!
Related
I did some research on here, and I left with the impression that a background image is not loaded if the associated div class is not in the HTML. This led me to believe that when using addClass() to assign a div the class with the background image, I would need to refresh the CSS to make the image load. However, it is showing up without refreshing the CSS.
Does including the class in the JavaScript cause the CSS to pre-load the image, so it is ready when the class is added? If not, why is the background image available without refreshing the CSS?
HTML
<body>
<div class="no-class"></div>
</body>
CSS
.background-image {
background-image: url('image.png');
background-size: 100% 100%;
}
.no-class {
height: 500px;
width:500px;
background-color: red;
}
JS
$(document).ready(function () {
$('.no-class').click(function() {
$('.no-class').toggleClass('background-image');
});
})
rearrange classes
.no-class {
height: 500px;
width:500px;
background-color: red;
}
.background-image {
background-image: url('image.png');
background-size: 100% 100%;
}
And be sure to include Jquery
DEMO
and if you have more than 1 element with class .no-class .. use $(this)
$(document).ready(function () {
$('.no-class').click(function() {
$(this).toggleClass('background-image');
});
})
I like the way it does, for example please see profile picture when you hover 'CR' that will show picture on the top, how does it works?
Please let me know.
chack the answer of Alois Mahdal from here
<style>
#tuxie {
width: 25px; height: 25px;
background: url('images/tuxie.png') no-repeat left top;
}
#tuxie:hover { background-position: -25px 0px }
</style>
<div id="tuxie" />
JSFiddle
This is done with the help of CSS3 attribute which is "transition: all 0.7s ease-out 0s;"
This will show this smooth effect and remaining is normal "hover" property of css.
Read about "transition" property of css for more details.
http://css3.bradshawenterprises.com/transitions/
I've a input a button which have a initial background image. I tried to change its image when some condition changed with jquery .css(). It seems that it will override the button's global css in css file. How can I only change background attribute with jquery or anything else? Thanks.
JS:
if(sum>=window.start_fee){
$(".shopcart").removeAttr("disabled")
$(".shopcart").css("background", 'url(/static/images/cart2.png)')
}else{
$(".shopcart").attr("disabled","disabled")
$(".shopcart").css("background", 'url(/static/images/cart.png)')
}
css:
.shopcart{
background:url(/static/images/cart.png) no-repeat;
border:none;
background-size:100% 100%;
width:57px; height:50px;
float:right;
}
The best thing to do is create a class disabled in css, in this way you separate the presentation of logic. Sample
CSS
.shopcart{
background:url(/static/images/cart2.png) no-repeat;
border:none;
background-size:100% 100%;
width:57px; height:50px;
float:right;
}
.shopcart.disabled{
background:url(/static/images/cart.png) no-repeat;
}
In JS you just add or remove the disabled class, sample:
JS
if(sum>=window.start_fee){
$(".shopcart").removeClass("disabled");
}else{
$(".shopcart").addClass("disabled");
}
Instead of Remove attr you can use addClass and removeClass property
$(document).ready(function(){
if(sum>=window.start_fee){
$("input[type=submit]").removeClass("submitbtn");
$("input[type=submit]").addClass("submitbtnnew");
}
else{
$("input[type=submit]").addClass("submitbtn");
$("input[type=submit]").removeClass("submitbtnnew");
}
});
</script>
Apply your background image for that class
<style>
.submitbtn{
background:#000;
}
.submitbtnnew{
background:#03C;
}
</style>
i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.
This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});
Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/
Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover
Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up
Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.
Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.
HTML You didn't say how you want to toggle this. Using a button?
<button onclick="dim();">Dim</button>
<div id="dimmer"></div>
but bear in mind the dimmer will go over the button
CSS
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.
Javascript
function dim(bool)
{
if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
document.getElementById('dimmer').style.display=(bool?'block':'none');
}
dim(true); // on
dim(false); // off
You can do it with a simple JavaScript
Demo
HTML
Click me
<div id="toggle_div"></div>
Hello World
JavaScript
function dim_div() {
document.getElementById("toggle_div").style.display="block";
}
CSS
#toggle_div {
background-color: rgba(255, 255, 255, .6);
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 999;
}
HTML
<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>
CSS
div#initial_opacity_zero{
opacity:0;
display:block;
position:fixed;
top:0px; right:0px; bottom:0px; left:0px;
}
JavaScript:
function func_onclick(){
document.getElementById("initial_opacity_zero").style.opacity="0.6";
}