Domanda
I found a script online where I can hover a text and a shape shows on an imagemap. It works, but only for that one instant. Can I use a JS that serves individual instances, so I won't have to write an individual JS that references each insant? My texts are arranged in a table.
here's my JS:
https://stackoverflow.com/questions/21390134
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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>
AS YOU CAN SEE ABOVE I have a second item to highlight, which in the "area id" references the following code, which is a duplicate of the "squidhead" section with the adjustment of having a different name to it:
<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, is there a way to manipulate the javascript so it can be used just once for the whole ARRAY of items in the table that are used to highlight different areas on the map/image?
The "id" items reference their appropriate JS script, so that I am forced to write an individual JS for every instant, which will be many...
THE resolved script, thanks to @levi:
OK, after MUCH reworking of the code, it works...the above gentleman was spot on...there so many variables to work on, geez...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();
});
});
});
Soluzione
You can use a loop to apply the code to multiple instances:
$('.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();
});
});
