[Javascript] Dynamically Jump to Page Areas

Hakan M (Backbase) hakan at backbase.com
Sat Oct 2 10:49:29 CDT 2004


Well, there's no prefixed type casting in JavaScript, so the "String 
place" is probably what generates the first error. Also, I'm pretty sure 
there is no constructor named "location", which will probably generate 
the next error.

I suggest this change (untested, tired, sorry):

--

var oPrevAnchor;     // global pointer to the last highlighted anchor
function goTo(sName) {
	var oAnchor = document.getElementByName(sName);
	if(oAnchor) {
		if(oPrevAnchor)
			oPrevAnchor.style.backgroundColor = 'white';
		oAnchor.style.backgroundColor = 'yellow';
		oPrevAnchor = oAnchor;
	}
}

--

Regards,
H

tsterlin at email.arizona.edu wrote:
> Greetings Everyone,
> 
>    While I appreciate Flavio and Hakan's empty page additive suggestions, I've
> decided a text highlighting method is best to better distinguish the selected
> table item.  So what I think I need to do is dynamically reconstruct the page
> each time an <area> tag of the <map> is selected.  The "new" page will of
> course have the background/text color attributes reversed for the appropriate
> item so as to make the item's text look highlighted.  More importantly the
> window.location.href variable for the new page will need to be set to the name
> attribute of the <a> tag which corresponds to the href attribute in the
> selected area tag.
> 
> Since the description of this process is a little cryptic, let's try a visual:
> 
> <html>
>   <SCRIPT language="JavaScript">
>                       function goTo(String place) {
>                             var l = new location();
>                             l.href = place;
>                             window.location.href = l.href;
>                       }
>   </SCRIPT>
> 
>   <img src="A_Graphic.jpg" usemap="#A_Map">
>   <MAP NAME="A_Map">
>     <area shape="RECT" onClick="goTo('Item1')" coords="26,94,112,188"
> href="#Item1>
>     <area shape="RECT" onClick="goTo('Item2')" coords="157,343,238,412"
> href="#Item2">
>                                     .
>                                     .
>                                     .(con'd)
> 
>   </MAP>
> 
>   <table>
>     <tr>
>       <td>
>         <a name="Item1">First Item</a>
>       </td>
>       <td>
>         <a name="Item2">Second Item</a>
>       </td>
>                       .
>                       .
>                       .(con'd)
>     </tr>
>   </table>
> </html>
> 
> So at this point I'm not messing with the new page construction, I'm just trying
> to get the document to duplicate the mapping functionality without using the
> map object rather; using JavaScript.  When I open this HTML document, I get
> that good 'ol "object expected" error when I click on any of the "areas".  The
> areas are still recognized as links, though, since the icon changes when I
> mouse over them.  Is there anyone who recognizes what I'm doing wrong here??
> 
> Thanks,
> Tracy:-)
> 
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
> 




More information about the Javascript mailing list