Jump to content
Sign in to follow this  
gaby

Schimbarea Culorii De Fundal Cu Javascript - Background Color Changer

Recommended Posts

Daca doriti sa schimbati culoarea de pe fundalul unei pagini web, ca de exemplu: :link: atunci, iata codurile ce trebuiesc scrise in pagina respectiva:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>PC Troubleshooting Background Color Changer</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.red').hover(function() {
$('body').stop().animate({ backgroundColor: "#c00"}, 800);
},function() {
$('body').stop().animate({ backgroundColor: "#ffffff" }, 800);
});

$('.blue').hover(function() {
$('body').stop().animate({ backgroundColor: "#487794"}, 800);
},function() {
$('body').stop().animate({ backgroundColor: "#ffffff" }, 800);
});

$('.green').hover(function() {
$('body').stop().animate({ backgroundColor: "#00a200"}, 800);
},function() {
$('body').stop().animate({ backgroundColor: "#ffffff" }, 800);
});

$('.grey').hover(function() {
$('body').stop().animate({ backgroundColor: "#888"}, 800);
},function() {
$('body').stop().animate({ backgroundColor: "#ffffff" }, 800);
});
});
</script>
<style type="text/css">
body {
background: #fff;
}

#centerdiv {
background: #f6f6f6;
width: 400px;
height: 150px;
margin: auto;
-moz-border-radius: 15px;
border: 1px solid #909090;
margin-top: 350px;
}

.red {
background: #fff;
width: 16px;
height: 16px;
float: left;
margin-top: 60px;
border: 2px solid #c00;
margin-left: 90px;
}

.blue {
background: #fff;
width: 16px;
height: 16px;
float: left;
border: 2px solid #487794;
margin-left: 50px;
margin-top: 60px;
}

.green {
background: #fff;
width: 16px;
height: 16px;
float: left;
border: 2px solid #00a200;
margin-left: 50px;
margin-top: 60px;
}

.grey {
background: #fff;
width: 16px;
height: 16px;
float: left;
border: 2px solid #888;
margin-left: 50px;
margin-top: 60px;
}
</style>
</head>
<body><center>
<div id="centerdiv">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="grey"></div>
</div></center>
</body>
</html>[/code]

Sper sa va foloseasca :pct2: !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×