There are some situations where you need to change the content display dynamically. Like, you have to change font color and background color of your text or you have to make image bright. You can do these things by applying styles dynamically through javascript.
Here I gave you a solution to fulfill such type of requirement by using jQuery functions. We are using jQuery mouseover() function to highlight text or image on your webpage whenever we place mouse on it.
Below is the code to make text or image highlight whenever we place mouse on it.
<html>
<head>
<title>highlight the text and image dynamically using jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#parent').mouseover(function() {
$('#child1').css({
'background-color': 'green',
'font-weight': 'bold',
'color': 'red'
});
$('#child2').css({
'background-color': 'cyan',
'font-weight': 'bold',
'color': 'blue'
});
$('#img1').css({
'opacity':1.0
});
});
$('#parent').mouseout(function() {
$('#child1').css({
'background-color': 'white',
'font-weight': 'normal',
'color': 'black'
});
$('#child2').css({
'background-color': 'white',
'font-weight': 'normal',
'color': 'black'
});
$('#img1').css({
'opacity': 0.4
});
});
});
</script>
</head>
<body>
<div id="parent">
<div id="child1">this text from first child</div>
<div id="child2">this text from second child</div>
<img src="img1.jpg" id="img1" style="opacity:0.4" />
</div>
</body>
</html>
Here we have two <div> tags whose id's are child1, child2 and one <img> tag whose id is img1 with in parent <div> tag whose id is "parent".
We are applying jQuery mouseover() function to the parent <div> tag by using $('#parent').mouseover(function() { }. Within this function we are applying our required properties to different elements.
$('#child1').css({
'background-color': 'green',
'font-weight': 'bold',
'color': 'red'
});
$('#child2').css({
'background-color': 'cyan',
'font-weight': 'bold',
'color': 'blue'
});
will change the font color and background color of our two <div> tags to our required colors whenever we place mouse on it.
$('#img1').css({
'opacity':1.0
});
will make the image bright whenever we place the mouse on it.
Here we are also using the jQuery mouseout() function to roll back the changes of our elements.
$('#parent').mouseout(function() {
$('#child1').css({
'background-color': 'white',
'font-weight': 'normal',
'color': 'black'
});
$('#child2').css({
'background-color': 'white',
'font-weight': 'normal',
'color': 'black'
});
$('#img1').css({
'opacity': 0.4
});
});
will change the text font color, background color to black, white and will make the image blurred whenever mouse out from the content.
Download source code: jQuery_higlight_text_image.zip (41.89 kb)