am using this code to get menu tab.when i mouseover on the tab the tab image will change, similarly i want to change the image of tab onlick using jquery.i used the below code to do this but i was not able to get it.how can i do this.
<html>
<head>
<title>Css Menu</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
.home {
background: url("images/tab2.png") repeat scroll 0 0 transparent;
border-radius: 4px 4px 0 0;
height: 75px;
left: 54px;
position: relative;
top: 25px;
width: 90px;
}
.home:hover {
background: url("images/tab3.png") repeat scroll 0 0 transparent;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
</style>
<script type="text/javascript">
$(function() {
$('.home').click(function() {
$('home').css('backgroundImage', 'url(images/tabs3.png)');
});
}):
</script>
</head>
<body><div class="frame">
<div class="header1"></div>
<div class="header2">
<a href="#"><div class="home" onclick="function()"><img src="images/tools.png" class="image"><br><span class="align">Home</span></div></a>
</div>
<div class="header3"></div>
</div>
</body>
</html>
This question is related to
javascript
jquery
html
css
You need to use background-image instead of backgroundImage. For example:
$(function() {
$('.home').click(function() {
$(this).css('background-image', 'url(images/tabs3.png)');
});
}):
Use your jquery like this
$('.home').css({'background-image':'url(images/tabs3.png)'});
I think this should be:
$('.home').click(function() {
$(this).css('background', 'url(images/tabs3.png)');
});
and remove this:
<div class="home" onclick="function()">
//-----------^^^^^^^^^^^^^^^^^^^^---------no need for this
You have to make sure you have a correct path to your image.
Source: Stackoverflow.com