JS variable.onMouseOver = not working, why?

**DeltaOne** · 02-27-2007 05:07 PM

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

**CrazyMerlin** · 02-28-2007 02:54 AM

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;

**DeltaOne** · 02-28-2007 04:07 AM

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..

**DeltaOne** · 02-28-2007 08:25 AM

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>

**DeltaOne** · 03-06-2007 08:04 AM

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: JS variable.onMouseOver = not working, why?

Thread Tools

Display

JS variable.onMouseOver = not working, why?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions