Beginner:Easiest way to select multiple elements
Hi I know this is basic but here goes:
I have the exact same function that needs to be performed but only on the current element selected.
My current script (A very basic mouse rollover, larger image appears) works but the more thumbnails I add the more unnecessarily long the script will become! I tried using $(this) but I'm unsure of the exact syntaxt because I need to target the specific span tag within the element that is triggering the JavaScript function. My script also needs some work to be less intrusive as the event trigger is in the HTML markup. Can anybody suggest a cleaner, more efficient way to perform my script?
My HTML:
<body>
<a><img src="ben_small.jpg" border="0" onmouseover="vis()" onmouseout="hide()" /><span id="one"><img src="ben_big.jpg" /></span></a>
<a><img src="ben_small.jpg" border="0" onmouseover="vistwo()" onmouseout="hidetwo()" /><span id="two"><img src="ben_big.jpg" /></span></a>
</body>
My CSS:
<style type="text/css">
a span {position:absolute; display:none;}
</style>
My Javascript:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function vis() {
$("a span#one").fadeIn(500);
}
function hide() {
$("a span#one").fadeOut(500);
}
function vistwo() {
$("a span#two").fadeIn(500);
}
function hidetwo() {
$("a span#two").fadeOut(500);
}
</script>