I came across a script online that allows me to hover over text and have a shape appear on an imagemap. It's functional, but only works for a single instance. Is there a way to implement a JavaScript that handles individual instances so I don't have to write separate scripts for each one? My texts are organized in a table.
Here is the current JavaScript code:
<HEAD>.....
<script type="text/javascript">$(function() {
$('.map').maphilight();
$('#squidheadlink').mouseover(function(e) {
$('#squidhead').mouseover();
}).mouseout(function(e) {
$('#squidhead').mouseout();
}).click(function(e) { e.preventDefault(); });
});
</script>
<BODY>......
<map.....
<area id="squidhead" href="#" shape="rect" coords="680,55,730,110" alt="Octoface" data maphilight='{"stroke":false,"fillColor":"ff0000","fillOpacity":0.6}'>
<area id="xxx" href="#" shape="circle" coords="298,552,10" alt="Octoface" data-maphilight='{"stroke":false,"fillColor":"ff0000","fillOpacity":0.6}'>
</map>
</div>
<DIV ID="header" STYLE="position:absolute; top:450px; left:20px; width:1490px; height:225px;">
<table class="tftable" border="0">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th><th>Header 6</th><th>Header 7</th><th>Header 8</th><th>Header 9</th><th>Header 10</th></tr>
<tr>
<td><a id="squidheadlink" href="#">gyrex</a></td>
<td><a id="xxxlink" href="#">xxx</a></td>
In the above example, there is a second item to highlight, which references the following code duplicating the "squidhead" section with a different name:
<script type="text/javascript">
$(function() {
$('.map').maphilight();
$('#xxxlink').mouseover(function(e) {
$('#xxx').mouseover();
}).mouseout(function(e) {
$('#xxx').mouseout();
}).click(function(e) { e.preventDefault(); });
});</script>
My question is, can the JavaScript be modified to apply to the entire array of items in the table used to highlight different areas on the map/image?
The "id" items reference their respective JS scripts, requiring separate scripts for each instance, leading to potential repetition...
The resolved script, thanks to @levi:
After extensive reworking of the code, it finally works...the previous advice was insightful...with numerous variables at play, the final script:
$(function() {
$('.map').maphilight();
$('.tftable td a').each(function () {
var areaId = '#' + this.id.replace('link', '');
$(this).mouseover(function (e) {
$(areaId).mouseover();
}).mouseout(function (e) {
$(areaId).mouseout();
}).click(function (e) {
e.preventDefault();
});
});
});