Welcome to WebmasterWorld Guest from 54.196.144.100

Forum Moderators: open

Message Too Old, No Replies

Java Script

Is it possible to contain an image map within js?

     

justa

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

tedster

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?