www.webdeveloper.com
Results 1 to 8 of 8

Thread: Totally different on mouseover behavior in IE

  1. #1
    Join Date
    Feb 2011
    Posts
    6

    Totally different on mouseover behavior in IE

    I've created this rollover menu that works just perfectly in Firefox, doesn't work at all in Chrome, and rolls over to the entirely wrong place in IE.


    The JS is
    PHP Code:

    <SCRIPT TYPE="text/javascript">
    <!--
    // copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
    // Distribute this script freely, but please keep this 
    // notice with the code.
    // var image information object
    var mloi=new Object();
    // set the image for swapping
    function setswap()
    {
    if (! 
    document.images)return;
    var 
    imgInfo=new Object();
    imgInfo.defaultImg = new Image();
    imgInfo.defaultImg.src document.images[arguments[0]].src;
    imgInfo.opts = new Object();
    for (var 
    i=1arguments.lengthi=i+2)
    {
    imgInfo.opts[arguments[i]]=new Image();
    imgInfo.opts[arguments[i]].src arguments[i+1];
    }
    mloi[arguments[0]] = imgInfo;
    }
    // set up the link for swapping
    function swap(link,imgName,optName)
    {
    if (! 
    document.images)return;
    if (! 
    link.swapReady)
    {   
    link.imgName    imgName;
    link.onmouseout swapBack;
    link.swapReady  true;
    }
    document.images[imgName].src=mloi[imgName].opts[optName].src;
    }
    function 
    swapBack()
    {
    document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}
    //-->
    </SCRIPT> 
    I placed this on the page at the default image:
    PHP Code:

    <img src="images/mullan_house_670.jpg"  width=670 height=500 alt="MLco" name="showservice">
    <
    br />

    <
    script type="text/javascript">
    setswap("showservice",
       
    'des''images/design_670.jpg',
       
    'wal',      'images/walks_670.jpg',
       
    'maint',      'images/maint_670.jpg',
       
    'light',       'images/lighting_maple_670.jpg',
       
    'hol',           'images/holiday_670.jpg',
       
    'kitch',             'images/kitchen_670.jpg',
       
    'spec',                'images/specialty_670.jpg',
       
    'drain',                 'images/drainage_670.jpg'
       
       
    );

    </script> 
    And then within the HTML, I have these links: (there are 8 but I only listed 2 as examples.)

    PHP Code:
    <div id="design">
    <
    a href="design.html" onmouseover="swap(this,'showservice','des')"><img src="images/thumb_design.jpg" name="showservice" width="70" height="70"></a>

    </
    div>
      
      
    <
    div id="walks">
    <
    a href="walks.html"  onmouseover="swap(this,'showservice','wal')">
    <
    img src="images/thumb_walks.jpg" name="showservice" width="70" height="70" ></a>


    </
    div
    In IE, the rollover event takes place in the last thumbnail. I'm wondering if I have the setswap function in the wrong place?


    Please help! I have searched for an answer and stayed up almost all night trying to figure this out. I am new to JavaScript but trying VERY HARD to learn and not just copy scripts.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You have given all your images the same name, thus in your code:
    Code:
    document.images[imgName]
    will refer a collection of elements, not a single element.

    You code is medieval. Try to find or code yourself a modern one. Use individual ids, not names, and DOM methods.

  3. #3
    Join Date
    Feb 2011
    Posts
    6
    I know, I know. 1998! I have searched all over for a code that will work for this effect and can't seem to find one. I have been up all night the past 2 nights reading JavaScript tutorials but I am still not up to writing my own. My client specifically asked for this type of menu (scroll over a thumbnail and you see a large photo in the column next to it. I first tried the Jeremy Keith script:

    PHP Code:
    /* This script and many more are available free online at
    The JavaScript Source!! http://javascript.internet.com
    Created by: Jeremy Keith / Anonymous | http://www.alistapart.com/articles/imagegallery/ */
    function showPic(whichpic) {
      if (
    document.getElementById) {
        
    document.getElementById('placeholder').src whichpic.href;
        if (
    whichpic.title) {
          
    document.getElementById('desc').childNodes[0].nodeValue whichpic.title;
        } else {
          
    document.getElementById('desc').childNodes[0].nodeValue whichpic.childNodes[0].nodeValue;
        }
        return 
    false;
      } else {
      return 
    true;
      }
    }

    var 
    previousToggle=null;
    function 
    toggleMe(a){
      var 
    e=document.getElementById(a);
      if(!
    e)return true;
      if(
    e.style.display=="none"){
        
    e.style.display="block";
        if(
    previousToggle)previousToggle.style.display="none";
        
    previousToggle=e;
      }
      return 
    true;

    which was fine, except that I couldn't figure out how to make it showpic on mouseover and go to new URL (basic link to a page) onclick.
    Here's a link in the body:
    PHP Code:
    <a onMouseover="toggleMe('para1'); showPic(this); return false;"  href="images/commercial_600.jpg" title="blah blah blah">
    <
    img src="images/pix_smaller3.jpg" style="float:left" width="70" height="70"></a
    where I want the <a> to be to a new page, not the larger img.

    Can you help?

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tblue View Post

    which was fine, except that I couldn't figure out how to make it showpic on mouseover and go to new URL (basic link to a page) onclick.
    Here's a link in the body:
    PHP Code:
    <a onMouseover="toggleMe('para1'); showPic(this); return false;"  href="images/commercial_600.jpg" title="blah blah blah">
    <
    img src="images/pix_smaller3.jpg" style="float:left" width="70" height="70"></a
    Code:
    <a onmouseover="toggleMe('para1'); showPic(this)"  href="newURLhere" title="blah blah blah">

  5. #5
    Join Date
    Feb 2011
    Posts
    6
    Right, that's what I thought, but then the large img that is supposed to show in the new column on mouseover disappears--

    Shouldn't the
    PHP Code:
    onmouseover="toggleMe('para1'); showPic(this); return false;" 
    be responsible for the showing the larger pic?

    I really appreciate anything you can suggest.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    OK. Even it is a sort of hack , here you are a quick solve:
    Code:
    <a onmouseover="toggleMe('para1'); showPic(this)"  href="images/commercial_600.jpg" title="blah blah blah" onclick="location.href='newURLhere';return false">
    <img src="images/pix_smaller3.jpg" style="float:left" width="70" height="70"></a>

  7. #7
    Join Date
    Feb 2011
    Posts
    6
    Nope, unfortunately--doesn't work, and doesn't work differently in every browser.

    I just keep wondering why showPic isn't doing its job. toggleMe is working just fine. But where does showPic get this

    The link:
    PHP Code:
    <a onmouseover="toggleMe('para1'); showPic(this); return false;" href="design.html"> <img src="images/thumb_design.jpg" width="70" height="70"></a
    The script again:
    PHP Code:
    function showPic(whichpic) {
      if (
    document.getElementById) {
        
    document.getElementById('placeholder').src whichpic.href;
        if (
    whichpic.title) {
          
    document.getElementById('desc').childNodes[0].nodeValue whichpic.title;
        } else {
          
    document.getElementById('desc').childNodes[0].nodeValue whichpic.childNodes[0].nodeValue;
        }
        return 
    false;
      } else {
      return 
    true;
      }
    }

    var 
    previousToggle=null;
    function 
    toggleMe(a){
      var 
    e=document.getElementById(a);
      if(!
    e)return true;
      if(
    e.style.display=="none"){
        
    e.style.display="block";
        if(
    previousToggle)previousToggle.style.display="none";
        
    previousToggle=e;
      }
      return 
    true;


  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Let's take it otherwise. Describe your aim as detailed as you can, post your HTML structure, and we might create a code customized for your special needs.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles