SitePoint Sponsor

User Tag List

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

    "this" is working "inversely" > newbie q

    Hello,

    I'm a newbie and have just spent about 4 hours making the attached code work. The only problem is that it works the opposite of how it should.

    I have an image map and i loop through and place images to the images that i want to showup when a mouse rolls over a hotspot.

    my problem is that in the loop i have:

    Code:
    for(var i=0;i<hotareas.length;i++)
      {
        hotareas[i].onmouseover = mouseIsOver;
        hotareas[i].number = i;
            
        allMouseOvers[i] = new Image();                            
        allMouseOvers[i].number = i;
    then my mouseIsOver funciton looks like:

    Code:
    function mouseIsOver()//how do i pass something here?
    {
          
        var navigate = document.getElementById('map1');
        var findImg = navigate.getElementsByTagName('img');
        findImg[0].src = allMouseOvers[this.number];
    }
    All my problems lie within the "this.number" (the last line in above code)when i have 3 hotspots on my image map, when i should be 0 this.number= 2 when i is 1 this.number =1 and when i is 2 then this.number=0.

    so i get in inverse effect when mousing over the hotspots such as mousing over the top brings up the image for the one that should come up when i am mousing over the bottom.

    I dont know what is going on, and i tried to go about it a different way by passing a parameter

    hotareas[i].onmouseover = mouseIsOver(>>>HERE<<<);

    however that doesnt work and i also have no idea why.(any creation o brackets where (>>>>HERE<<<<)is creates an error)

    the point is i could make it work, but i would have no idea why its working like it is

    thanks a lot for any help!!
    (here is the full code if any of the above didnt make full sense

    html:
    Code:
      <body>
        <div id="centerAll">
        
        
            <div id= "map1">
                  <div class ="noborder"><img src='pics/ortho/mortho1.jpg' usemap=#airmap>
                    <map name=airmap>
                      
                    <area shape=Rect coords=161,220,239,267 href=''>
                      <area shape=Rect coords=161,159,239,206 href=''>
                    <area shape=Rect coords=162,100,240,147 href=''>
                    
                  </map>
                  </div>
            </div>
        
        </div>
        </body>
    javascript:
    Code:
    var allMouseOvers = new Array();
    //var allMouseIsClicked = new Array();
    
    window.onload = function()
    {
      loadAll(document.getElementById('map1'));
    }
    
    function loadAll(arrayLoading)
    {
      var hotareas = arrayLoading.getElementsByTagName('area');
        
      for(var i=0;i<hotareas.length;i++)
      {
        hotareas[i].onmouseover = mouseIsOver;//can i ever pass an attribute here????
        hotareas[i].onmouseout = mouseIsOut;
      
        hotareas[i].number = i;
            
        allMouseOvers[i] = new Image();                            
        allMouseOvers[i].number = i;
        
        
        switch(i)
        {
          case 0: allMouseOvers[i]= './pics/ortho/mortho1.jpg';//would have allMouseOver[i].whatever if was changing more than 1 image)
                    
                              
              break;
          case 1: allMouseOvers[i] = './pics/ortho/mortho2.jpg';
                    
                  
              break;
          case 2:
                    allMouseOvers[i] = './pics/ortho/mortho3.jpg';
                    
                
              break;
          default: alert('Oops! Make sure you have enough cases to match your number of areas!')
            break;
        }
      }
      
    }
    
    
        function mouseIsOver()//how do i pass something here?
    {
          
        var navigate = document.getElementById('map1');
        var findImg = navigate.getElementsByTagName('img'); //getting elements by tag name means ARRAY is gotten
                                                            //(and in this case there is only 1)
        findImg[0].src = allMouseOvers[this.number];
        
      
    }

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see any problem with the 'number'. They are numbered in the order that the AREA elements are found in the html. But here are a few other things:

    1. mouseIsOut doesn't exist

    2. If you're going to assign a new Image() to allMouseOvers[i] then the assignment of the image pathname should be to the 'src' property:
    allMouseOvers[i].src = "....jpg";
    And then in mouseIsOver you'd have:
    findImg[0].src = allMouseOvers[this.number].src;

    3. This might not be causing a problem but the values for the html attributes should be in quotes.

  3. #3
    SitePoint Enthusiast projection83's Avatar
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    !:)

    Quote Originally Posted by MikeFoster
    I don't see any problem with the 'number'. They are numbered in the order that the AREA elements are found in the html. But here are a few other things:

    1. mouseIsOut doesn't exist

    2. If you're going to assign a new Image() to allMouseOvers[i] then the assignment of the image pathname should be to the 'src' property:
    allMouseOvers[i].src = "....jpg";
    And then in mouseIsOver you'd have:
    findImg[0].src = allMouseOvers[this.number].src;

    3. This might not be causing a problem but the values for the html attributes should be in quotes.
    hey, thanks for the reply!
    re:1 - i fogot to erase that part (i was shortening the code)
    re2: why should it be the src property? (why does it work when not doing things properly?)
    re:3 - what exactly do you mean by html attributes?

    ill be looking at this later on today and try to make it work right - but the heat isnt working in my house! (and it snowed 30cm here last night - it pretty much never snows here!) i have to deal with that stuff first

    re3.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2. You are over-writing the new Image object with the image's pathname string. It works because you are assigning that string to the IMG element's 'src' property. It just depends on what you want. I assumed you wanted to "preload" images, since you were creating the new Image objects.

    3. This was just a suggestion. For example, this:
    <area shape=Rect coords=161,220,239,267 href=''>
    should be this:
    <area shape='rect' coords='161,220,239,267' href=''>
    You can use either single or double quote characters.


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
  •