Solved

Using ClientSide ImageMaps in HTML.

Posted on 1998-06-26
8
170 Views
Last Modified: 2010-04-09

I have a map which is clickable and their co-ordinates are defined in the same HTML file i.e.
<HTML>
<HEAD>
</HEAD>

<BODY>
<IMG src="sonic.gif" width=500 height=600 usemap="#map1" border="0">

<MAP NAME="map1">
<area shape="rect" alt="Access Guide" coords="0,0,10,20" href="guide.html">
<area shape="rect" alt="Search" coords="2,4,15,30" href="search.html">
<area shape="rect" alt="Four" coords="10,50,1000,1000" href="four.html">
<area shape="rect" alt="Icim Company" coords="23,11,188,87" href="http://www.icil.com">
<area shape="rect" alt="Deccan Paper" coords="66,36,159,68" href="http://www.deccan.com/">
</MAP>
</BODY>
</HTML>

My question is can I seperate the map file and keep it in a different HTML file and call from the
main HTML file i.e

1.html will look like this

<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG src="sonic.gif" width=500 height=600 usemap="2.html#map1" border="0">
</BODY>
</HTML>
my 2.html will look like this
<HTML>
<HEAD>
</HEAD>
<BODY>
<MAP NAME="map1">
<area shape="rect" alt="Access Guide" coords="0,0,10,20" href="guide.html">
<area shape="rect" alt="Search" coords="2,4,15,30" href="search.html">
<area shape="rect" alt="Four" coords="10,50,1000,1000" href="four.html">
<area shape="rect" alt="Icim Company" coords="23,11,188,87" href="http://www.icil.com">
<area shape="rect" alt="Deccan Paper" coords="66,36,159,68" href="http://www.deccan.com/">
</MAP>
</BODY>
</HTML>

I am trying out this and I could not get it working. So, first of all I would really like to know that,
whether we can separate map definition file from main HTML file.

Really would appreciate UR help as we are need this info. very urgently.
Thanks.
0
Comment
Question by:voletisri
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 2

Expert Comment

by:johnny99
ID: 1844408
That should work -- try putting the full URL, like this:

http://www.yourcompany.com/2.html#map1

That might do it. Good luck. I'll come back and post again after I've checked something.
0
 

Author Comment

by:voletisri
ID: 1844409

I have tried giving the complete URL.But it still doesnot work.The browser versions I am using are Internet Explorer 4.0 and Netscape 4.0.Do the above browsers support my problem or not,I am not able to understand.Please if somebody could help me out in solving this problem,I would appreciate.

Thanks
0
 
LVL 28

Expert Comment

by:sybe
ID: 1844410
I suppose you want this because you want to use the same map in several html-files. The you can use SSI to include seperate textfiles into a html:

<!--#INCLUDE FILE="map1.txt"-->

You can just use plain text for the map-code, so no <HTML> and <BODY> tags.

But if you want to do this because you want to code to be invisible to the browser, then there is no way to do it, because it is CLIENT side, so it has to be read by the browser.


0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:voletisri
ID: 1844411

I donot want to use any server side includes.The project which I am doing has such requirement.Different HtmlS WILL BE using the same map file.That is why I want to seperate it.
Is there any way out? Please help.

Thanks
0
 
LVL 28

Accepted Solution

by:
sybe earned 100 total points
ID: 1844412
The imagemap has to be in the same document in the browser. There is no way to use another html document for the imagemap code.
You can seperate the files on the server, but they must be in the same document for the client. If you want to seperate the files on the server then there are a limited number of possibilities:

1. SSI, is according to me the best option, because it is not depending on the browser. But you do not want to use this. I do not know you do not want to use it, but it is a pity, because it is a very elegant solution to your problem.

2. external javascript (works only in browser with javascript turned on)

call it with:

<script language="JavaScript" src="external_js_file.js">
</script>

the code for external_js_file.js would be:

<script>
document.write('<MAP NAME="map1"> ');
document.write('<area shape="rect" alt="Access Guide" coords="0,0,10,20" href="guide.html">')

etc etc
</script>

You have to make an extra MIME-type on the server

3. Use Frontpage and make a frontpage include. When published, Frontpage will merge the document and the include into one file on the server.

4. Use a serverside imagemap, you have to write it only once and can call it from any html page.





0
 
LVL 2

Expert Comment

by:johnny99
ID: 1844413
Hi, Violetisri

I have tried it, and it doesn't work on my server either: you were quite right to reject my answer.

To all the people telling you to use SSI etc, answer me this -- why do several sources of documentation tell me this /does/ work?

I'm completely bemused and I'm going to ask in a newsgroup...

Hope you're holding the fort!

If you're depearate for a solution to a large site which has a number of imagemaps, can't you use a fully-featured text editor to do a big Search and Replace on all your documents to put the imagemap <MAP> stuff in? That's my workaround anyway.
0
 
LVL 2

Expert Comment

by:johnny99
ID: 1844414
OK here's what I've learned having a look around in newsgroups: external client-side image maps *are* in the HTML 3 spec, but are not implemented in either browser.

It can't be done.

Tell us your situation, and we'll have to come up with another answer.
0
 

Author Comment

by:voletisri
ID: 1844415
Hai Johnny,sybe

Thank you very much for your help.After going thru' some documents I too found out that external client side imagemap files are not supported by either IE or Netscape.I got another solution for this.Actually my project uses NetDynamics tool to build the application.What I could do is before loading the page I read the file into Java String and add it to the HTML on the fly.This solves my problem.
        I was under the opinion that if external Client side Image map files could be implemented as given in the HTML Tutorials,it would be more efficient.That's why I was trying for it.

Finally,Thank you very much again.

Regards,
Srinivas
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question