[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Image Map

Posted on 2000-02-01
14
Medium Priority
?
185 Views
Last Modified: 2010-04-09
Hi There,
This is probably very simple but only when you know how!

The following code works perfectly with IE, but doesn't work with Netscape.

Why??

  <SCRIPT Language="JavaScript">
<!--
start = new Image()
start.src = "images/starters.gif"
main = new Image()
main.src= "images/maincourse.gif"
dessert = new Image()
dessert.src = "images/dessert.gif"

function menuStart() {
document.menu.src = start.src;
}

function menuMain() {
document.menu.src = main.src;
}

function menuDessert() {
document.menu.src = dessert.src;
}
-->
  </SCRIPT>
</HEAD>
<BODY  BGCOLOR="#b99d80">

<map name="menumap">
<area shape="rect" coords="11,16,165,50" href="JavaScript: menuStart()">
<area shape="rect" coords="166,15,365,53" href="JavaScript: menuMain()">
<area shape="rect" coords="366,18,514,49" href="JavaScript: menuDessert()">
</map>

<P><CENTER><IMG SRC="images/starters.gif" NAME="menu" WIDTH="530" HEIGHT="1000"
ALIGN="BOTTOM" BORDER="0" NATURALSIZEFLAG="3" USEMAP="#menumap"></CENTER>

</BODY>
</HTML>
0
Comment
Question by:muttley1
  • 7
  • 5
  • 2
14 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 2478379
For NS you must refer to the images array (should also work in IE):

function menuStart() {
    document.images['menu'].src = start.src;
}

function menuMain() {
    document.images['menu'].src = main.src;
}

function menuDessert() {
    document.images['menu'].src = dessert.src;
}
0
 

Author Comment

by:muttley1
ID: 2479174
Thanks for the rapid response!
I tried using the method you suggested.
Again it worked fine with IE but it didn't with Netscape.
On thing I did notice though is the cursor changes on mousing over the hotspots. It just doesn't run the function.

It can't be that far away!
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2479191
Hmm, how about this:

<area shape="rect" coords="11,16,165,50" onClick="menuStart()">
<area shape="rect" coords="166,15,365,53" onClick="menuMain()">
<area shape="rect" coords="366,18,514,49" onClick="menuDessert()">
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

Author Comment

by:muttley1
ID: 2479702
Adjusted points to 150
0
 

Author Comment

by:muttley1
ID: 2479703
Nope!
Again works great with IE but not Netscape.
Also, the cursor doesn't change moving over the hotspots like last time.

I'm pushing it up to 150 points!

Help!!
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2479742
Ah, that's because I left out the href.  I admit, I'm guessing here because I can't test this:

<area shape="rect" coords="11,16,165,50" href="#"  onClick="menuStart();return(false);">
<area shape="rect" coords="166,15,365,53" href="#" onClick="menuMain();return(false);">
<area shape="rect" coords="366,18,514,49" href="#" onClick="menuDessert();return(false);">
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2479745
... or better than  "#"  is  "javascript:;"
0
 

Author Comment

by:muttley1
ID: 2479863
Thanks again but.....

It works fine with IE, not with Netscape.
(I'm beginning to sound like a stuck record!)
Now the cursor changes while mousing over the hotpoints but onClick doesn't run the functions.
I just get a little egg timer for a few seconds. No JavaScript errors either!

Any other ideas?
0
 
LVL 8

Accepted Solution

by:
us111 earned 450 total points
ID: 2481431
yes I think just add
// before  -->

function menuDessert() {
                      document.menu.src = dessert.src;
                      }
// -->
</SCRIPT>

netscape will return an Error if you forgot the //
0
 

Author Comment

by:muttley1
ID: 2481573
Thank's us111,
Problem solved!
I won't forget that one in a hurry.
0
 
LVL 8

Expert Comment

by:us111
ID: 2481617
thx for you 150 points
0
 

Author Comment

by:muttley1
ID: 2481639
you're welcome :-)
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2482110
I wouldn't have seen that in a million years  :)

But I am wondering if NS works with the functions as posted above:

function menuDessert() {
  document.menu.src = dessert.src;
}

.... or did you have to do this?:

function menuDessert() {
  document.images['menu'].src = dessert.src;
}
0
 

Author Comment

by:muttley1
ID: 2482766
It works with both.
I use the function:

function menuDessert() {
                 document.menu.src = dessert.src;
               }
 often with mouse overs to change images.

I can't believe that // could make such a difference!

Thanks for trying anyway. I'm sure this isn't the last you've heard of me here. It's a great site.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

607 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