SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast projection83's Avatar
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question using js to overlay images on mouseOver

    I am getting a simple js/css/html combo working, and I can make it work with brut force with what I know, but I might as well try for elegance:P

    I want to have images of circles come up when I mouse over certain hotspots on my image map. Right now, the way I have it set up when I mouse over a hot spot, I change the whole image (which is the old image plus an area coloured in in the hot spot)

    I want to make this so that an image of just the circle comes up as an overlay to the image (to make for a quicker page). I am not sure how to exactly approach this in terms of my js. Am I going to be loading different coordinates into an array (that will then refer to the same picture)? I think so, but Im not sure how to go about this.

    Im a newbie so take it ease on me

    thanks!

    EDIT--snip code - see next reply
    Last edited by projection83; Nov 26, 2006 at 13:46.

  2. #2
    SitePoint Enthusiast projection83's Avatar
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ive shortened the code to only what is absolutly necessary, its pretty short now. again thanks for any help and general points any one can give. Again, I think i have to load an array of coordinates to then refer to when mousing over....(?)


    my html:

    Code:
    <body> 
        	
    		<div id= "map1">
    		 		<div class ="noborder">
                		<img src='pics/ortho/mortho.jpg' usemap=#airmap>
    					<map name=airmap>
                      		<area shape=Rect Coords=65,48,178,88 Href="./pics/ortho/mortho_wd_a.jpg">
                      	</map>
    	 		  </div>
            	</div>
           	
        </Body>
    and my very basic js:

    Code:
    var mouseOvers = new Array();
    
    window.onload = function()
    {
      loadAll(document.getElementById('map1'));
    }
    
    function loadAll(arrayLoading)
    {
      var areas = arrayLoading.getElementsByTagName('area'); 
        
      for(var i=0;i<areas.length;i++) 
      {
        areas[i].onmouseover = mouseIsOver;
        areas[i].number = i;
        
        mouseOvers[i] = new Image();							
        mouseOvers[i].number = i;
        
        switch(i)
        {
          case 0: mouseOvers[i].main = './pics/ortho/mortho_wd.jpg';
            break;
          default: alert('Oops! Make sure you have enough cases to match your number of areas!')
            break;
        }
      }
      
    }
    
    function mouseIsOver()
    {
      
    	var navigate = document.getElementById('map1');
    	var navImg = navigate.getElementsByTagName('img'); 
    	
        navImg[0].src = mouseOvers[this.number].main;
      
    }


Bookmarks

Posting Permissions

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