Coding Forum

**Phunky** · 01-20-2004, 01:54 PM

Hello there... I am designing a site that is mostly made up of an image with hotspots and the hotspots link to different pages as well as cause a rollover where a small image at the top of the page is switched to depeding on which page I am rolling over...

There are a few things going on...

In the HEAD, I am preloading all of the necessary images like so...

Code:

<script language="JavaScript">	
	var roBlueAbout = new Image();
	roBlueAbout.src = "Images/roBlueAbout.gif";
	
	var roBlueClients = new Image();
	roBlueClients.src = "Images/roBlueClients.gif";
</script>

the basic code for the page looks like this...

Code:

<table width="760" height="420" bgcolor="#411CC2">
 <tr>
		 <td colspan="3" height="5">&nbsp;</td>
	</tr>
	<tr>
			<td width="38" height="26" valign="bottom">
     <img src="Images/parenthBlue.gif" alt=")" width="38" height="26">
   </td>
			<td colspan="2" height="26" valign="bottom">
     <img src="Images/roBlueMarketing.gif" name="ro_header" alt="Absolute Marketing Group" width="234" height="26">
   </td>
 </tr>
	<tr>
			<td valign="top"></td>				
			<td width="669" height="400" valign="top"> 
      <img src="Images/bgKey.jpg" alt="Key to Sucess" width="669" height="439" usemap="homeMap"> 
      <map name="homeMap" id="homeMap">
        <area shape="rect" coords="24,362,71,397" href="about.html" target="_self" alt="About Absolute Marketing Group"  onMouseOver="window.document.ro_header.src='Images/roBlueAbout.gif'; return false;" onMouseOut="window.document.ro_header.src='Images/roBlueMarketing.gif'; return false;">
					    <area shape="rect" coords="111,361,161,397" href="clients.html" target="_self" alt="Clients" onMouseOver="window.document.ro_header.src='Images/roBlueClients.gif'; return false;" onMouseOut="window.document.ro_header.src='Images/roBlueMarketing.gif'; return false;">
    				  <area shape="rect" coords="193,361,253,396" href="marketing.html" alt="Marketing" onMouseOver="window.document.ro_header.src='Images/roBlueMarketing.gif'; return false;" onMouseOut="window.document.ro_header.src='Images/roBlueMarketing.gif'; return false;">
			       <area shape="rect" coords="295,361,340,397" href="design.html" alt="Design" onMouseOver="window.document.ro_header.src='Images/roBlueDesign.gif'; return false;" onMouseOut="window.document.ro_header.src='Images/roBlueMarketing.gif'; return false;">
			       <area shape="rect" coords="371,360,417,398" href="Printing.html" alt="Printing" onMouseOver="window.document.ro_header.src='Images/roBluePrinting.gif'; return false;" onMouseOut="window.document.ro_header.src='Images/roBlueMarketing.gif'; return false;">
			  			  <area shape="rect" coords="451,361,503,397" href="tvRadio.html" alt="TV and Radio" onMouseOver="window.document.ro_header.src='Images/roBlueTVRadio.gif'; return false;" onMouseOut="window.document.ro_header.src='Images/roBlueMarketing.gif'; return false;">
	    			  <area shape="rect" coords="538,362,576,396" href="contact.html" alt="Contact Us" onMouseOver="window.document.ro_header.src='Images/roBlueContact.gif'; return false;" onMouseOut="window.document.ro_header.src='Images/roBlueMarketing.gif'; return false;">
			     </map>
				</td>
	</tr>
</table>

The rollovers are essential to the site. They work absolutly fine in IE and Netscape, yet when I view the page in Safari, Not only do the rollovers not work, but they DO NOT EVEN LINK TO THE PAGES HEY CORRESPOND TO!

Has any one come across this problem at all and/or can anyone make any suggestions???

Thanks a lot,

Pat.

**Dan Grossman** · 01-24-2004, 02:11 PM

Since this is a DOM-based rollover, it SHOULD work with Safari, but I can't test. You might want to try it:

http://www.dynamicdrive.com/dynamicindex15/domroll.htm

**Phunky** · 01-29-2004, 11:49 AM

Thanks for that link... that is a neat looking script...

I am however in the process of re-working the site using Photoshop/ImageReady...

It seems to be exactly what I needed for this site (although a pain in the *** sometimes for someone that would rather work in the code

) and the links/rollovers now work fine...

the JavaScript that IR writes uses a slightly different approach to change images...

Code:

<head>
<script>
function changeImages() {
  if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
      document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
  }
}
</script>
</head>

<body>
<img name="A_header" src="Images/A_header.gif" width="85" height="27" alt="Absolute Marketing Group" />

<!-- A sample area from my image map -->
<map name="A_blocks_Map">
 <area shape="rect" alt="Contact Us" coords="534,348,567,384" href="contact.html" target="_self"
  onmouseover="changeImages('A_header', 'Images/A_header07over.gif'); return true;"
  onmouseout="changeImages('A_header', 'Images/A_header.gif'); return true;" />
</map>
</body>