Welcome to WebmasterWorld Guest from 54.242.83.92

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)

Full Member from GB 

10+ Year Member

joined:Oct 16, 2001
posts:201
votes: 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
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>

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

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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?

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members