Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cannot get multiple images to hover on mouse over

    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>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    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

  • Users who have thanked jmrker for this post:

    elitedesignstud (04-14-2011)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by elitedesignstud View Post
    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.

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •