Solved

Using ClientSide ImageMaps in HTML.

Posted on 1998-06-26
8
139 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
Comment Utility
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
Comment Utility

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
Comment Utility
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
 

Author Comment

by:voletisri
Comment Utility

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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 28

Accepted Solution

by:
sybe earned 100 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
HTML table 7 54
Display multiple images in the row in PHP 11 66
Joomla main HTML page 4 44
jquery not selector with class selector 3 30
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

771 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now