homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Java Script
Is it possible to contain an image map within js?

10+ Year Member

Msg#: 10 posted 12:54 am on Oct 30, 2001 (gmt 0)

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





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

Msg#: 10 posted 12:56 pm on Oct 30, 2001 (gmt 0)

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?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved