Cannot get multiple images to hover on mouse over

elitedesignstud · 04-14-2011, 05:01 PM

I am trying to make different images hover over a table of sliced images when you mouse over a particular image. ex. mouse over image 1 = have image 1.1 hover over entire table of images in spot A; mouse over image 2 = have image 2.2 hover over entire table of images in spot B....ect. what i have so far only allows me to mouse over image 1 and have image 1.1 hover over entire table in spot A. Any time i try to move forward with more div's on other images it just jacks everything up. Here it is:

Code:

<html>
<head>
<title>map</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
			function init()
			{
			  loadAll(document.getElementById('map1'));
			}

			window.onload = init;
			
			function loadAll(arrayLoading)
			{
				var areas = arrayLoading.getElementsByTagName('area'); 
				for(var i=0;i<areas.length;i++) areas[i].onmouseover = mouseIsOver;			  
			}

			function mouseIsOver()
			{
				var area = this;

				var coords = this.coords;
				var x1 = parseInt(coords);
				coords = coords.substring(coords.indexOf(",") + 1);
				var y1 = parseInt(coords);
				coords = coords.substring(coords.indexOf(",") + 1);
				var x2 = parseInt(coords);
				coords = coords.substring(coords.indexOf(",") + 1);
				var y2 = parseInt(coords);

				var img = document.createElement("img");
				img.src = area.getAttribute("imgSrc");
				img.style.position = 'absolute';				
				img.style.left = x1 + 'px';
				img.style.top = y1 + 'px';
				img.style.height = y2 - y1 + 'px';
				img.style.width = x2 - x1 + 'px';

				area.parentNode.appendChild(img);

				img.onmouseout = function ()
				{
					this.parentNode.removeChild(this);
					setTimeout(function () { area.onmouseover = mouseIsOver; }, 50);
				};

				area.onmouseover = null;
			}

		</script>
		<style type="text/css">
			#map1
			{
				position: relative;
			}
		</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (map.psd) -->
<table id="Table_01" width="651" height="761" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="14">
			<img src="images/map_01.png" width="650" height="213" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="213" alt="" /></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="images/map_02.png" width="442" height="48" alt="" /></td>
		<td colspan="2">
			<img src="images/map_03.png" width="87" height="48" alt="" /></td>
		<td rowspan="14">
			<img src="images/map_04.png" width="121" height="547" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="48" alt="" /></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="4">
			<img src="images/map_05.png" width="257" height="164" alt="" /></td>
		<td colspan="3" rowspan="2">
			<img src="images/map_06.png" width="92" height="69" alt="" /></td>
		<td colspan="3" rowspan="2">
			<img src="images/map_07.png" width="94" height="69" alt="" /></td>
		<td>
			<img src="images/map_08.png" width="86" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="12">
			<img src="images/map_09.png" width="86" height="498" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="68" alt="" /></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
		<div id="map1">
		 		<div class ="noborder">
           		  <img src='images/map_10.png' alt="" width="93" height="95" usemap=#airmap>
					<map name=airmap>
               		  <area shape=Rect Coords=-17,-5,107,109 imgSrc="images/Rt5.png" />
               	  </map>
 		  </div>
       	  </div></td>
<td colspan="2">
			<img src="images/map_11.png" width="93" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="10">
			<img src="images/map_12.png" width="93" height="429" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="94" alt="" /></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img src="images/map_13.png" width="230" height="81" alt="" /></td>
		<td colspan="4" rowspan="3">
			<img src="images/map_14.png" width="77" height="82" alt="" /></td>
		<td colspan="2">
			<img src="images/map_15.png" width="43" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="8">
			<img src="images/map_16.png" width="43" height="334" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="80" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/map_17.png" width="153" height="84" alt="" /></td>
		<td rowspan="2">
			<img src="images/map_18.png" width="77" height="84" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/map_19.png" width="28" height="83" alt="" /></td>
		<td rowspan="6">
			<img src="images/map_20.png" width="49" height="253" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="83" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/map_21.png" width="119" height="48" alt="" /></td>
		<td colspan="4" rowspan="2">
			<img src="images/map_22.png" width="112" height="48" alt="" /></td>
		<td colspan="2">
			<img src="images/map_23.png" width="27" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="4">
			<img src="images/map_24.png" width="27" height="169" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="47" alt="" /></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/map_25.png" width="120" height="62" alt="" /></td>
		<td colspan="3">
			<img src="images/map_26.png" width="111" height="23" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/map_27.png" width="111" height="99" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="39" alt="" /></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/map_28.png" width="120" height="60" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="60" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="119" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="33" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="77" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="49" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="42" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="92" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="86" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="121" height="1" alt="" /></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

jmrker · 04-14-2011, 07:43 PM

This is not a modification to your post, but it is a fairly simple to modify alternative.
Perhaps it will give you some ideas.

See: http://www.nova.edu/optometry/pharma...EnlargeMO.html
for other ides, see: http://www.nova.edu/optometry/pharmacy/old/index.html

elitedesignstud · 04-14-2011, 07:59 PM

Thank you very much for the reply. Unfortunately i am not looking to enlarge a image when i mouse over it but rather show a new image in a new location and be able to do this multiple ways for multiple mouse overs. Any ideas

jmrker · 04-14-2011, 09:46 PM

Quote:

Originally Posted by elitedesignstud

Thank you very much for the reply. Unfortunately i am not looking to enlarge a image when i mouse over it but rather show a new image in a new location and be able to do this multiple ways for multiple mouse overs. Any ideas

Do you have a sample code on a live site where the images could be seen in the format you are trying to present?
I'm having trouble with your description and my concept of what you are trying to do.

elitedesignstud · 04-16-2011, 02:40 AM

I decided to work the html completely different so i did not have this issue to work around. My solution was a much more simple java script then this nightmare....thanks anyway