Solved

Using ClientSide ImageMaps in HTML.

Posted on 1998-06-26
8
154 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
  • 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
The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

 

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

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 36
Input box width 6 27
Just need a little help with this header height please 10 29
Else condition 9 19
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Find out what you should include to make the best professional email signature for your organization.
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…

809 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