Forum Moderators: open
Code below.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>insertBefore Img My Try</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script src="insertBeforeImgMyTry.js" type="text/javascript"></script>
</head>
<body>
<ul >
<li ID="prev">
<a href="#">Green script running</a>
</li>
</ul>
<div id="parentElementHtml">
<div id="referenceElementHtml">AAAAAAAAAAAAAAA<div>
</div>
</body>
</html>
function green () {
this.style.backgroundColor="green";
newSPAN = document.createElement("SPAN");
newText = document.createTextNode("<img id='hourglass' style='position:absolute; top:-34px;' src='ani-busy.gif' alt='hourglass'/>");
var newElement=newSPAN.appendChild(newText);
var referenceElement=document.getElementById("referenceElementHtml");
var parentElement=document.getElementById("parentElementHtml");
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
};
window.onload = function () {
document.getElementById("prev").getElementsByTagName('A')[0].onclick=green;
}
HTML on your page:
<img src="" id=pookie>
Javascript
function showHourglass() {
document.images.pookie.src='hourglass.gif';
}
Anyway, try something like this:
/**
* Cross browser method for setting attribute on an element node
*/
function domSetAttribute( el, attr, val )
{
var attrNode = el.getAttributeNode(attr);
if (attrNode)
{
attrNode.value = val;
}
else
{
el.setAttribute(attr, val);
}
}
function green () {
// 'this' is the 'a' node
this.style.backgroundColor="green";
// Create a new span element
newSPAN = document.createElement("span");
// Create a new img element
newImg = document.createElement("img");
domSetAttribute( newImg, 'id', 'hourglass' );
domSetAttribute( newImg, 'style', 'position:absolute; top:-34px;' );
domSetAttribute( newImg, 'src', 'ani-busy.gif' );
domSetAttribute( newImg, 'alt', 'hourglass' );
// Stuff the img into the span element
newSPAN.appendChild(newImg);
// Get the reference element and it's parent node
var referenceElement = document.getElementById("referenceElementHtml");
var parentElement = referenceElement.parentNode;
// Insert the new span with img before the reference element
parentElement.insertBefore(newSpan, referenceElement);
};
Also, use lowercase when creating elements.
Good: document.createElement("span");
Bad: document.createElement("SPAN");
[edited by: Fotiman at 4:43 pm (utc) on Dec. 8, 2006]
The code above did not work. My code shown in my original posting creates an output like you might find in a JavaScript tutorial showing the more than and less than characters literally on the screen along with everything else in the image tag literally and does not have my desired results, but does create a a kind of before output. What the code above results and is in a error statement in both the FireBug console and the JavaScript error console 2 which reads as follows. "newSpan is not defined." This output occurs on the line marked in red on my reposting below of my code with the commented out old code highlighted in green. I have another question about this new code as well. In the fourth line of that new function given to me is this code " if (attrNode) ". This only seems to check if the function was called passing to it the required parameters, but why would you call this function without the parameters it requires. In my not getting something in this regard. Well that is it, any further help eye to receive would be greatly appreciated.
[COLOR=green]/*function green () {
this.style.backgroundColor="green";
newSPAN = document.createElement("SPAN");
newText = document.createTextNode("<img id='hourglass' style='position:absolute; top:-34px;' src='ani-busy.gif' alt='hourglass'/>");
var newElement=newSPAN.appendChild(newText);
var referenceElement=document.getElementById("referenceElementHtml");
var parentElement=document.getElementById("parentElementHtml");
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
};*/[/COLOR] /**
* Cross browser method for setting attribute on an element node
*/
function domSetAttribute( el, attr, val )
{
var attrNode = el.getAttributeNode(attr);
if (attrNode)
{
attrNode.value = val;
}
else
{
el.setAttribute(attr, val);
}
}
function green () {
// 'this' is the 'a' node
this.style.backgroundColor="green";
// Create a new span element
newSPAN = document.createElement("span");
// Create a new img element
newImg = document.createElement("img");
domSetAttribute( newImg, 'id', 'hourglass' );
domSetAttribute( newImg, 'style', 'position:absolute; top:-34px;' );
domSetAttribute( newImg, 'src', 'ani-busy.gif' );
domSetAttribute( newImg, 'alt', 'hourglass' );
// Stuff the img into the span element
newSPAN.appendChild(newImg);
// Get the reference element and it's parent node
var referenceElement = document.getElementById("referenceElementHtml");
var parentElement = referenceElement.parentNode;
// Insert the new span with img before the reference element
[COLOR=DarkOrange] parentElement.insertBefore(newSpan, referenceElement); [/COLOR]
};
window.onload = function () {
document.getElementById("prev").getElementsByTagName('A')[0].onclick=green;
}
OK-well maybe you do not mean for me to use that code literally,
Actually, I did. :-)
The code above did not work.
...
What the code above results and is in a error statement in both the FireBug console and the JavaScript error console 2 which reads as follows. "newSpan is not defined."
Ah, that was my mistake. You had created the variable 'newSPAN' and I tried to use it as 'newSpan'. If you make them the same, that should fix that problem.
I have another question about this new code as well. In the fourth line of that new function given to me is this code " if (attrNode) ". This only seems to check if the function was called passing to it the required parameters, but why would you call this function without the parameters it requires.
No, that's not what it's checking:
var attrNode = el.getAttributeNode(attr);
if (attrNode)
What this is doing is seeing if the function getAttributeNode finds an attribute for the element. The reason for this is that when creating a new element, IE will create it with a bunch of 'default' attributes pre-defined, whereas most other browsers will not assume you want default attributes defined. So, what this is really doing is trying to get the attribute... if it exists (as it will in IE), then modify the existing value. If it doesn't exist (Firefox, etc.), then set the attribute value.
Make sense?
Ah, that was my mistake. You had created the variable 'newSPAN' and I tried to use it as 'newSpan'. If you make them the same, that should fix that problem.
Are you making another mistake in your answer or mind being dense, but the first 'newSPAN' in the above said sentence in the second look identical to me.
newSpan is not the same as NewSpaN or NEWSPAN.
I'm still not sure exactly what you're trying to do, but if all you need is to get an image on the page when the user mouses over or clicks something, that's the way to do it, because it's all of one line of code.
