Is there a way I can display the name of an animal for example when I hover over a number between 1 - 20, but then have the default display always be shown when no one hovers over any given number using Jquery?
A:
yes there is.
<div class="myAnimal hidden">Horse</div>
<div class="hover">1</div>
$('.hover').mouseover(function(){ $('.myAnimal').show() });
$('.hover').mouseout(function(){ $('.myAnimal').hide() });
the above is untested but you get the idea i hope. if not let me know and ill clarify.
use css to place the item on the screen or even jquery.
don't forget to add a class called hidden that hides the div in the first place.
griegs
2010-08-04 00:20:46
or `hover()`...
Felix Kling
2010-08-04 00:23:50
yup or mouseenter etc. good place to start is jquery.com for all the events i guess
griegs
2010-08-04 00:24:42
+1
A:
Something like this?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
var animals=["Animal1","Animal2","Animal3","Animal4","Animal5","Animal6","Animal7","Animal8","Animal9","Animal10","Animal11","Animal12","Animal13","Animal14","Animal15","Animal16","Animal17","Animal18","Animal19","Animal20",];
var defaultAnimal = "Tiger";
$("li").hover(function(){
$("#animal").html(animals[parseInt($(this).html()) -1]);
},function(){
$("#animal").html(defaultAnimal);
});;
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
<div id="animal">Tiger</div>
</body>
</html>
Brandon Boone
2010-08-04 00:31:09
+3
A:
If you want animal names to display over areas that are hovered above, why not simple use HTML? Try title=
<ul>
<li title="Owl">ONE</li>
<li title="Bear">TWO</li>
<li title="Copepod">THREE</li>
</ul>
Peter Ajtai
2010-08-04 00:34:32
A:
Here's a pure JS example that should show you all you need to know.
$(document).ready(function(){
var defaultText="default";
var target=$("<div>"+defaultText+"</div>").appendTo($("body"));
var animals=["horse","giraffe","zebra","antelope","lion","dog"];
for(var i=0;i<animals.length;++i)
{
$("<span>"+(i+1)+"</span>")
.appendTo($("body"))
.data("index",i)
.mouseover(function(){
target.text(animals[$(this).data("index")]);
})
.mouseout(function(){
target.text(defaultText);
}
);
}
})
spender
2010-08-04 00:38:16