Forum Moderators: open
I've been working on this all week and I can't seem to find an answer.
This was a basic swap image behaviour which I changed so that the image
remains in the ajoined cell. I then want the user to be able to click on
the business unit they want to go to.
Is it possible to define an image map on the ***_inc.gif images? Is there
a better way to do this (without adding 9 layers to rollover in the 2nd
cell)
TIA
Justin Avery.
<html>
<head>
<script>
var gen=document.src="images/buttons/gen_inc.gif";
var net=document.src="images/buttons/pow_inc.gif";
var water=document.src="images/buttons/water_inc.gif";
var retail=document.src="images/buttons/retail_inc.gif";
var rural=document.src="images/buttons/rural_inc.gif";
var techsup=document.src="images/buttons/techsup_inc.gif";
var busi=document.src="images/buttons/busi_inc.gif";
var exec=document.src="images/buttons/exec_inc.gif";
var techserv=document.src="images/buttons/techserv_inc.gif";
</script>
</head>
<body>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td width="130" height="187">
<p>
<a onFocus=this.blur() href="/generation/index.htm"
onMouseover="javascript:document.blank.src= gen;"
onMouseout="document.blank.src= gen;";>
<img src="images/buttons/gen.gif" width="129" height="20" alt="Link to Generation" border="0"></a><br>
<a onFocus=this.blur() href="/networks/index.htm"
onMouseover="javascript:document.blank.src= net;"
onMouseout="document.blank.src= net;";>
<img src="images/buttons/pow.gif" width="129" height="20" alt="Link to Power Networks" name="power" border="0"></a><br>
<a onFocus=this.blur() href="/water_services/index.htm"
onMouseover="javascript:document.blank.src= water;"
onMouseout="document.blank.src= water;";>
<img src="images/buttons/water.gif" width="129" height="20" alt="Link to Water Services" name="water_" border="0"></a><br>
<a onFocus=this.blur() href="/retail_services/index.htm"
onMouseover="javascript:document.blank.src= retail;"
onMouseout="document.blank.src= retail;";>
<img src="images/buttons/retail.gif" width="129" height="20" alt="Link to Retail Services" name="retail_" border="0"></a><br>
<a onFocus=this.blur() href="/rural_services/index.htm"
onMouseover="javascript:document.blank.src= rural;"
onMouseout="document.blank.src= rural;";>
<img src="images/buttons/rural.gif" width="129" height="20" alt="Link to Rural Services" name="rural_" border="0"></a><br>
<a onFocus=this.blur() href="/techincal_support/index.htm"
onMouseover="javascript:document.blank.src= techsup;"
onMouseout="document.blank.src= techsup;";>
<img src="images/buttons/techsup.gif" width="129" height="20" alt="Link to Technical Support" name="techsup_" border="0"></a><br>
<a onFocus=this.blur() href="business_services/index.htm"
onMouseover="javascript:document.blank.src= busi;"
onMouseout="document.blank.src= busi;";>
<img src="images/buttons/busi.gif" width="129" height="20" alt="Link to Business Services" name="business" border="0"></a><br>
<a onFocus=this.blur() href="/business_services/executive/index.htm"
onMouseover="javascript:document.blank.src= exec;"
onMouseout="document.blank.src= exec;";>
<img src="images/buttons/exec.gif" width="129" height="20" name="exec_" border="0" alt="Link to Executive Services"></a><br>
<a onFocus=this.blur() href="/technical_services/index.htm"
onMouseover="javascript:document.blank.src= techserv;"
onMouseout="document.blank.src= techserv;";>
<img src="images/buttons/techserv.gif" width="129" height="20" border="0" name="techserv_" alt="Technology Services"></a></p>
</td>
<td height="187">
<div id=image onMouseout="document.blank.src='images/buttons/blank_inc.gif';";>
<img src="images/buttons/blank_inc.gif" width="161" height="180" name="blank" border="0">
</div>
</td>
</tr>
</table>
</body>
</html>
If that does the job for you, your problems are over.
---
I've also been playing with another idea, but I don't have it working yet either.
How about replacing the DIV with a nested <iframe><ilayer></ilayer></iframe> -- and give the ilayer and the iframe the same name.
Then you could inflow a full HTML document (thereby including an image AND its image map) as the source. But I'm having trouble getting the mouseover behavior you need.
Any other ideas out there?
