www.webdeveloper.com
Results 1 to 5 of 5

Thread: JS variable.onMouseOver = not working, why?

  1. #1
    Join Date
    Aug 2005
    Posts
    160

    JS variable.onMouseOver = not working, why?

    Hello again!

    On the below code:
    Code:
    <script type="text/javascript">
    
    // DeltaOne
    // thanks to Mr J from codingforums.com
    
    var offsetx = 100 
    var offsety =  -150
    var elementID="myImg"
    
    function showImg(obj,image){
    
    
    if(!document.getElementById(elementID)){
    newImg = document.createElement('IMG')
    newImg.id = elementID
    newImg.style.display="none"
    newImg.style.position="absolute"
    document.body.appendChild(newImg)
    }
    
    imageDisplay = document.getElementById(elementID)
    imageDisplay.src = image
    imageDisplay.style.display = 'block'
    
    imageDisplay.style.left=obj.offsetLeft+offsetx
    imageDisplay.style.top=obj.offsetTop+offsety
    
    if(imageDisplay.offsetLeft<0){
    imageDisplay.style.left=0
    }
    
    if(imageDisplay.offsetLeft+imageDisplay.offsetWidth>document.body.clientWidth){
    imageDisplay.style.left=document.body.clientWidth - imageDisplay.offsetWidth-50
    }
    
    
    }
    
    function hideImg(){
    imageDisplay.style.display="none"
    }
    
    </script>
    
    <style>
    #myImg {
    width:150px;
    border:1px solid #5555aa;
    }
    
    </style>
    If I put the below:
    Code:
    <a onmouseover="showImg(this,'http://picture.jpg')" onmouseout="hideImg()">link</a>
    On mouseOver over the 'link' a new picture will appear (offsetted by some co-ordinates, like the script tells us) - and it works perfectly.

    Now, I have a problem..

    If I put the below code instead of the one above that works perfectly:
    Code:
    n= document.createElement('a')
    n.href = "http://127.0.0.1"
    n.onmouseover="showImg(this,'picture.jpg')"
    n.onmouseout="hideImg()"
    document.body.appendChild(n)
    
    document.write('<br><br>' + n + '<br><br>')
    The page shows the actual .href (you can not click on it though), but the onMouseOver and onMouseOut attributes are lost, and no new picture will appear (offsetted by X-Y coordonates)

    It's somewhat confusing to describe this - but I figure that I made things at least a little clear. Does anybody have any idea how to fix this, and to make it work?


    I want to make that element so I can modify the below code
    t[t.length] = ["a_name","<a onmouseover='showImg(this,'http://picture.jpg')' onmouseout='hideImg()'><img src='http://thingy.gif' alt=''></a>"]

    to
    t[t.length] = ["a_name",n]

    But neither having the above code in that huge t[t.lenth] form won't make it work,
    1-st it gives a syntax error - i figure its because of the onmouseout attribute that has to declare itself using single quotes and to declare the img src with single quotes, so using in two instances single quotes,
    2nd - it can not find the showImg function if I onMouseOver the pic
    Last edited by DeltaOne; 02-27-2007 at 06:14 PM.

  2. #2
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564
    Code:
    var b = document.createElement('br');
    var n = document.createElement('a');
    var i = document.createElement('img');
    i.src = "http://thingy.gif";
    i.alt = "";
    n.appendChild(i);
    n.href = "http://127.0.0.1";
    n.setAttribute("onmouseover", "showImg(this,'picture.jpg')");
    n.setAttribute("onmouseout", "hideImg()");
    
    t[t.length] = n;
    you can test it with:
    Code:
    document.body.appendChild(b);
    document.body.appendChild(b);
    document.body.appendChild(n);
    document.body.appendChild(b);
    document.body.appendChild(b);
    untested and a little messy but it should do.

    just remember that what is in t is an object, not a bunch of html.
    to show the html, use: t[number].outerHTML;
    Last edited by CrazyMerlin; 02-28-2007 at 03:57 AM.

  3. #3
    Join Date
    Aug 2005
    Posts
    160
    Oh, thanks for the help!

    I'm not at home right now, but will certaily test it once I get there.

    Hopefully it'll work..

  4. #4
    Join Date
    Aug 2005
    Posts
    160
    Unfortunately, it still doesn't work, which is pretty odd...

    The new script gives no error whatsoever, the body appends the 'n' variable (which is an image, and the a href goes where it should), but somehow the onMouseOver and onMouseOut things get lost..

    For example, my html code is this:
    Code:
    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    
    <script type="text/javascript">
    
    var offsetx = 100
    var offsety =  20
    var elementID="myImg"
    
    function showImg(obj,image){
    
    if(document.createElement){ 
    
    if(!document.getElementById(elementID)){
    newImg = document.createElement('IMG')
    newImg.id = elementID
    newImg.style.display="none"
    newImg.style.position="absolute"
    document.body.appendChild(newImg)
    }
    
    imageDisplay = document.getElementById(elementID)
    imageDisplay.src = image
    imageDisplay.style.display = 'block'
    
    imageDisplay.style.left=obj.offsetLeft+offsetx
    imageDisplay.style.top=obj.offsetTop+offsety
    
    if(imageDisplay.offsetLeft<0){
    imageDisplay.style.left=0
    }
    
    if(imageDisplay.offsetLeft+imageDisplay.offsetWidth>document.body.clientWidth){
    imageDisplay.style.left=document.body.clientWidth - imageDisplay.offsetWidth-50
    }
    
    }
    }
    
    function hideImg(){
    imageDisplay.style.display="none"
    }
    
    </script>
    
    <style>
    #myImg {
    width:150px;
    border:1px solid #5555aa;
    }
    
    </style>
    
    </HEAD>
    <BODY>
    
    <a onmouseover="showImg(this,'http://i3.photobucket.com/albums/y66/FirstPhotoLast/bah.jpg')" onmouseout="hideImg()">link</a><br><br>
    
    <a onmouseover="showImg(this,'http://i3.photobucket.com/albums/y66/FirstPhotoLast/bah2.jpg')" onmouseout="hideImg()">link</a>
    <br>
    <br>
    <script>
    var b = document.createElement('br');
    var n = document.createElement('a');
    var i = document.createElement('img');
    i.src = "http://i3.photobucket.com/albums/y66/FirstPhotoLast/bah.jpg";
    i.alt = "";
    n.appendChild(i);
    n.href = "#";
    n.setAttribute("onmouseover", "showImg(this,'http://i3.photobucket.com/albums/y66/FirstPhotoLast/bah2.jpg')");
    n.setAttribute("onmouseout", "hideImg()");
    
    t[t.length] = n;
    
    </script>
    <script>
    document.body.appendChild(b);
    document.body.appendChild(b);
    document.body.appendChild(n);
    document.body.appendChild(b);
    document.body.appendChild(b);
    
    </script>
    </BODY>
    </HTML>

  5. #5
    Join Date
    Aug 2005
    Posts
    160
    I read somewhere that if you create a new element, give attributes to it and then append it to the document, the attributes won't be initiated. (which is pretty much my problem here.)


    I also read there that if you want to have those attributes to the element that you appended to the document, all you had to do is to re-initialize it, or something, as I unfortunately forgot the page talking about it, and I briefly remember the discussion.

    Anyone know how I can re-initialize that n variable?
    something like n = new n, if it exist..

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