Jump to content

Schimbarea Culorii De Fundal Cu Javascript - Background Color Changer


gaby

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: !

  • Upvote 2

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

Link to comment
Share on other sites

  • 3 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.