Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Java Script

Is it possible to contain an image map within js?



12:54 am on Oct 30, 2001 (gmt 0)

10+ Year Member

Hi List,

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


Justin Avery.


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";



<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td width="130" height="187">
<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 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">




12:56 pm on Oct 30, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Using images instead of text navigation seems to paint you into a corner. Have you looked at the text DHTML menu at [dynamicdrive.com...]

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?


Featured Threads

Hot Threads This Week

Hot Threads This Month