JQuery: Finding Object in the Room
This is a simple application of "addClass", "removeClass", "show" and "hide" in JQuery.
Here's the demo showing it:
Here's the demo showing it:
The trick is position the arrow on the object as shown in the demo then on click, display it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Find Object</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
div#room{ background-image: url(room.jpg); margin: 0 auto; width:794px; height:510px; position:relative}
#bear{ width: 25px; height:29px; position:absolute;top:160px;right:405px}
#panda{ width: 25px; height:29px; position:absolute;top:60px;right:280px}
#ball1{ width: 25px; height:29px; position:absolute;top:365px;left:0}
#ball2{ width: 25px; height:29px; position:absolute;top:300px;left:150px}
#clock1{ width: 25px; height:29px; position:absolute;top:90px;right:5px}
#clock2{ width: 25px; height:29px; position:absolute;top:70px;left:295px}
.show{ background-image:url(here.gif); height:29px; width: 25px}
a{ cursor:help}
p{display:none; font-family:Arial, Helvetica, sans-serif}
</style>
</head>
<body>
<div id="room">
<a href="#" class="animals" id="bear"></a>
<a href="#" class="animals" id="panda"></a>
<a href="#" class="balls" id="ball1"></a>
<a href="#" class="balls" id="ball2"></a>
<a href="#" class="clocks" id="clock1"></a>
<a href="#" class="clocks" id="clock2"></a>
</div>
<center>
<button id="showanimal">Bears </button>
<button id="showball">Balls </button>
<button id="showclock">Clocks </button><br/>
<p id="animal">Showing Bears</p>
<p id="ball">Showing Balls</p>
<p id="clock">Showing Clocks</p>
</center>
<script type="text/javascript">
$(document).ready(function() {
$('#showanimal').click(function() {
$("a.animals").addClass('show');
$("p#animal").show();
$("p#ball").hide();
$("p#clock").hide();
$("a.balls").removeClass('show');
$("a.clocks").removeClass('show');
});
$('#showball').click(function() {
$("a.balls").addClass('show');
$("p#ball").show();
$("p#clock").hide();
$("p#animal").hide();
$("a.animals").removeClass('show');
$("a.clocks").removeClass('show');
});
$('#showclock').click(function() {
$("a.clocks").addClass('show');
$("p#clock").show();
$("p#ball").hide();
$("p#animal").hide();
$("a.animals").removeClass('show');
$("a.balls").removeClass('show');
});
});
</script>
</body>
</html>
