Web Design Forums

flatcat · 23-07-2004, 14:16

http://www.senoritamargarita.ca/home.html

It works fine in Mozilla but for some reason none of the images are firing on rollover in IE 6. Anyone have any problems with image map rollovers before? I know image map rollovers are rare, but the design didn't work well with all the buttons lined up together...so I would really like to know what's wrong with this? I'm positive all my code is fine....

And there are no other pages yet, so clicking will get you nowhere :p

Any help would be greatly appreciated, thank you.

andycogbill · 23-07-2004, 14:27

If your code were fine, it would be working

/got nothing. sorry.

flatcat · 23-07-2004, 15:14

Well it *is* working, just not in that shit-tastic browser known as IE, but thnx for the helpful comment :P

Bill Posters · 23-07-2004, 16:34

Works in MSIE5/Mac, though not in Safari.
Possibly take a look at some point over the weekend.

seen.to · 24-07-2004, 03:00

Use this instead - just replace your source code entirely with this - in a new file of course... I haven't used Netscape for years so haven't tested this with it - if it doesn't work set up a JS browser detection to send MSIE users to this page and NN to yours.

You are going to want to add your links and I've only redone the image map roughly so you are going to want to tidy that up a bit too (mainly around contact and recipe links). You can see this working at http://www.seen.to/helpful-bastard/margeurita2.html

HTML Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>.:|Senorita Margarita|:.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body{
	margin: 0;
	padding: 0;
	background-color: #8DB512;
	font-family: Verdana, Helvetica, Arial;
	font-size: 10px;
	color: #fff;
}
img{
	margin: 0;
	padding: 0;
	border: 0;
}
#mainTable{
	margin: 0;
	padding: 0;
	border: solid #000 5px;
}
#thingy {
	width: 334px;
	height: 243px;
	overflow: auto;
	float: left;
	font-size: 11px;
	padding-left: 2px;
	padding-right: 5px;
}
#divwidth {
width: 300px;
text-align:left;
}
</style>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('images/nav_home.gif','images/nav_specials.gif','images/nav_reservations.gif','images/nav_testimonials.gif','images/nav_sales.gif','images/nav_leasing.gif','images/nav_faq.gif','images/nav_rentals.gif','images/nav_contact.gif','images/nav_recipes.gif')">
<table border="0" cellpadding="0" cellspacing="0" width="114%" height="100%">
  <tr> 
    <td align="center" valign="middle"> 
		<table id="mainTable" cellpadding="0" cellspacing="0">
        	<tr> 
        	  <td><img src="images/logo_top.gif" /></td>
        	  
          <td colspan="2"><a href="#"><img src="images/nav_off.gif" name="nav" border="0" usemap="#navMap" id="nav" href="#" /></a></td>
        	</tr>
        	<tr> 
        	  <td><img src="images/logo_bot.gif" /></td>
        	  <td><img src="images/header_home.gif" /></td>
        	  <td width="340" height="290" background="images/content_bg.gif" valign="bottom"><div id="thingy" align="center"><div id="divwidth" align="center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc at odio a pede ornare malesuada. Nulla sagittis aliquam mi. Sed ornare ipsum eu est. Mauris auctor vehicula urna. Morbi tortor. Vivamus eu velit quis turpis tempor elementum. Fusce interdum. Donec porttitor faucibus sem. Donec pretium fringilla turpis. Cras semper nibh in ligula. Vivamus dapibus risus a leo.<br /><br />

Curabitur bibendum facilisis nibh. Nullam pretium pede nec lectus. Cras condimentum fermentum felis. Nunc accumsan, leo vulputate semper lobortis, mi ligula facilisis sapien, et ultrices velit eros id ligula. Suspendisse id nulla sodales lacus tempus consectetuer. Maecenas interdum semper leo. Ut sed orci et mauris consequat porta. Donec massa erat, iaculis ac, nonummy lacinia, iaculis in, metus. Mauris hendrerit malesuada erat. Nam vel erat. Duis volutpat massa ac pede. Phasellus placerat, justo et auctor placerat, erat metus rutrum nisl, vitae porta mi nulla quis eros. In lacinia quam sit amet ipsum. Suspendisse potenti. Nam vitae augue a eros iaculis mattis. Nullam nec dolor.<br /><br />

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vestibulum gravida elit. Aliquam leo. Proin id lectus. Sed ac mi non ante luctus scelerisque. Nullam et urna. Duis varius luctus justo. Duis feugiat varius massa. Cras sem justo, consequat nec, euismod eget, elementum vel, lectus. Cras eu wisi. Vivamus at tellus. Integer ipsum nibh, mollis et, hendrerit id, eleifend a, nibh. Nullam eget purus. Phasellus quis massa. Nam mattis. Phasellus fermentum lectus ut est. Pellentesque interdum, sem vitae sollicitudin mollis, turpis lorem luctus nibh, eu pulvinar lorem libero et ante. Etiam accumsan, felis vel consectetuer mattis, pede sem venenatis wisi, sed volutpat turpis nisl id arcu. Ut molestie nibh vitae nibh eleifend sollicitudin. </div></div></td>
        	</tr>
      	</table>
	 </td>
  </tr>
</table>

<map name="navMap">
  <area shape="circle" coords="42,21,25" href="index.html" onMouseOver="MM_swapImage('nav','','images/nav_home.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="circle" coords="70,76,38" href="specials.html" onMouseOver="MM_swapImage('nav','','images/nav_specials.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="circle" coords="137,27,54" href="reservations.html" onMouseOver="MM_swapImage('nav','','images/nav_reservations.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="circle" coords="188,100,53" href="#" onMouseOver="MM_swapImage('nav','','images/nav_testimonials.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="circle" coords="258,63,32" href="#" onMouseOver="MM_swapImage('nav','','images/nav_sales.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="circle" coords="243,2,40" href="#" onMouseOver="MM_swapImage('nav','','images/nav_leasing.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="circle" coords="303,34,25" href="#" onMouseOver="MM_swapImage('nav','','images/nav_faq.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="circle" coords="328,81,34" href="#" onMouseOver="MM_swapImage('nav','','images/nav_rentals.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="circle" coords="406,65,44" href="#" onMouseOver="MM_swapImage('nav','','images/nav_contact.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="circle" coords="411,4,36" href="#" onMouseOver="MM_swapImage('nav','','images/nav_recipes.gif',1)" onMouseOut="MM_swapImgRestore()">
</map>
</body>
</html>

Bill Posters · 24-07-2004, 08:22

Just to clarify… it's a very simple problem with a very simple solution.
You're missing the # from usemap="#navmap"

I also agree with seen.to's notion to use circles for your image-map areas instead of those uber-cluttered polygons, though you'll need to tweak his stacking order to make the overlapping areas play right.

The earlier an area is listed in the markup, the higher it is in the stacking order.
i.e. if two areas overlap, the overlapping area will belong to whichever area appears first in the markup.

Your order should be:
<area …specials…
<area …home…
<area …reservations…
<area …testimonials…
<area …recipes…
<area …rentals…
<area …contact…
<area …faq…
<area …leasing…
<area …sales…

seen.to · 25-07-2004, 06:16

Quote:

Originally Posted by Bill Posters

Just to clarify… it's a very simple problem with a very simple solution.
You're missing the # from usemap="#navmap"

D'oh - now theres a 3,000 times easier fix.

flatcat · 26-07-2004, 12:16

Thanks bill and seen, kudos to both. It's kind of annoying that it's something so blatantly basic, but that's the way it always goes eh? :P

Thnx again seen for putting so much work into helping me solve my problem, heh :p

I guess this is one of those things you'll remember forever now eh? Haven't used image maps in years, and I won't use 'em for a while I bet, but I'm sure I won't forget this now :P

Bill Posters · 26-07-2004, 12:30

I see you've added the missing #, but will you be dumping poly areas in favour of circle?
It would clean up that map markup considerably.

23-07-2004, 14:16	#1 (permalink)
flatcat Balinese Buddah Sensei Join Date: Jul 2003 Location: Vancouver, British Columbia Posts: 811	IE Image Map Mouseovers...? http://www.senoritamargarita.ca/home.html It works fine in Mozilla but for some reason none of the images are firing on rollover in IE 6. Anyone have any problems with image map rollovers before? I know image map rollovers are rare, but the design didn't work well with all the buttons lined up together...so I would really like to know what's wrong with this? I'm positive all my code is fine.... And there are no other pages yet, so clicking will get you nowhere :p Any help would be greatly appreciated, thank you. __________________ audentes fortuna iuvat Flatcat

23-07-2004, 14:27	#2 (permalink)
andycogbill Notorious? Join Date: Nov 2003 Location: Middlebury, VT Posts: 417	If your code were fine, it would be working /got nothing. sorry. __________________ Now adding "eh?" to the end of my sentences.

23-07-2004, 15:14	#3 (permalink)
flatcat Balinese Buddah Sensei Join Date: Jul 2003 Location: Vancouver, British Columbia Posts: 811	Well it is working, just not in that shit-tastic browser known as IE, but thnx for the helpful comment :P __________________ audentes fortuna iuvat Flatcat

26-07-2004, 12:16	#8 (permalink)
flatcat Balinese Buddah Sensei Join Date: Jul 2003 Location: Vancouver, British Columbia Posts: 811	Thanks bill and seen, kudos to both. It's kind of annoying that it's something so blatantly basic, but that's the way it always goes eh? :P Thnx again seen for putting so much work into helping me solve my problem, heh :p I guess this is one of those things you'll remember forever now eh? Haven't used image maps in years, and I won't use 'em for a while I bet, but I'm sure I won't forget this now :P __________________ audentes fortuna iuvat Flatcat

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

23-07-2004, 16:34	#4 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,975	Works in MSIE5/Mac, though not in Safari. Possibly take a look at some point over the weekend.

24-07-2004, 08:22	#6 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,975	Just to clarify… it's a very simple problem with a very simple solution. You're missing the # from usemap="#navmap" I also agree with seen.to's notion to use circles for your image-map areas instead of those uber-cluttered polygons, though you'll need to tweak his stacking order to make the overlapping areas play right. The earlier an area is listed in the markup, the higher it is in the stacking order. i.e. if two areas overlap, the overlapping area will belong to whichever area appears first in the markup. Your order should be: <area …specials… <area …home… <area …reservations… <area …testimonials… <area …recipes… <area …rentals… <area …contact… <area …faq… <area …leasing… <area …sales…

26-07-2004, 12:30	#9 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,975	I see you've added the missing #, but will you be dumping poly areas in favour of circle? It would clean up that map markup considerably.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)