Hi,

Below is the exact code I copied and pasted from the editor's
DHTML side tab.

I would like to know how to set up a background image for the
[Top] link.

Anyone who know this please advise. I'd appreciate that very
much. Thanks.

Oinky

Some details: I'm calling up this code from external file
and the call-up will be placed before the </Head>

------------------------------------------------------
// Change this text to the text that you want to be displayed as the link on your page.

var displayed="<nobr><font size=2 face=Arial>[Top]</font></nobr>"

// === DO NOT EDIT ANYTHING BELOW THIS LINE!!! === //

var logolink='nojavascript...window.scrollTo(0,0)'
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4)
setTimeout("window.onresize=regenerate",400)
}

if (ie4||ns6)
document.write('<span id="logo" style="position:absolute;top:-300;z-index:100">'+displayed+'</span>')

function createtext(){ //function for NS4
staticimage=new Layer(5)
staticimage.left=-300
staticimage.document.write('<a href="'+logolink+'">'+displayed+'</a>')
staticimage.document.close()
staticimage.visibility="show"
regenerate2()
staticitns()
}

function staticit(){ //function for IE4/ NS6
var w2=ns6? pageXOffset+w : document.body.scrollLeft+w
var h2=ns6? pageYOffset+h : document.body.scrollTop+h
crosslogo.style.left=w2
crosslogo.style.top=h2
}

function staticit2(){ //function for NS4
staticimage.left=pageXOffset+window.innerWidth-staticimage.document.width-28
staticimage.top=pageYOffset+window.innerHeight-staticimage.document.height-10
}

function inserttext(){ //function for IE4/ NS6
if (ie4)
crosslogo=document.all.logo
else if (ns6)
crosslogo=document.getElementById("logo")
crosslogo.innerHTML='<a href="'+logolink+'">'+displayed+'</a>'
w=ns6? window.innerWidth-crosslogo.offsetWidth-20 : document.body.clientWidth-crosslogo.offsetWidth-10
h=ns6? window.innerHeight-crosslogo.offsetHeight-15 : document.body.clientHeight-crosslogo.offsetHeight-10
crosslogo.style.left=w
crosslogo.style.top=h
if (ie4)
window.onscroll=staticit
else if (ns6)
startstatic=setInterval("staticit()",100)
}

if (ie4||ns6){
window.onload=inserttext
window.onresize=new Function("window.location.reload()")
}
else if (ns4)
window.onload=createtext

function staticitns(){ //function for NS4
startstatic=setInterval("staticit2()",90)
}

try changing this:
var displayed="<nobr><font size=2 face=Arial>[Top]</font></nobr>"

to this:
var displayed="<nobr><span style="background-image:url(images/image.gif); width:100px; height:20px;"><font size=2 face=Arial>[Top]</font></span></nobr>"

Adjusting the bold bits to fit....

Hello Oinky,

While you're at it, you can move the font tag into the style attribute to comply with current standards. I just updated our scripts to remove as many deprecated tags as possible.


can now become:

var displayed="<nobr><span style="background-image:url(images/image.gif); width:100px; height:20px; font-size:x-small; font-family: Arial, sans-serif;">[Top]</span></nobr>"

Hi Guys,

Thanks for your input, but I've tried copying exactly the code
you've advised in the external .js file, it didn't work.

Then I tried copying the whole script onto my html file (before the
</HEAD>), also failed to work. The [Top] with the images (that
I created) didn't come out at all.

I even tried this:

var displayed="<nobr><span style="background-color: red">[Top]</span></nobr>"

Again, it showed nothing.

I really don't know how to go about making it work. I would
appreciate for your further assistance.

Thank you very much.

Oinky

Can you provide a link to your page? I'll take a look at the code and see what the problem is.

Hi Cesar,

Sorry for the late reply.

Here's the link: http://www.casharrestor.com

I can change the font color using the font color code but I just
couldn't use the <span> tag and include a background image.

If I use that, the whole [top] word will disappear. I wonder if
it has anything to do with the document type I'm using.

I'd appreciate your help in this. Thank you very much.

Oinky

I think I've figured out the problem. The span tag needs to be styled as a block-level element to include a background image, and you need to tell it how large the box will be (by specifying a width and height). The code should look similar to:


It may be easier to make it a div with a unique ID, then place all the styles into the head:

Hi Cesar,

Thanks for that. In fact, several testing on my part has found
the real "culprit" that causes the problem for proper display
is actually the quotes within the <span> tag.

Previously, we made a mistake that we used double quotes within
the <span> tag, like this:

var displayed="<span style="background:url(image.gif);">[Top]</span>";

Under normal html coding in the html editor, we should use double quotes
for the <span> tag, but because this var display has already used double
quotes to enclose its inside elements, then the <span> tag should use
single quotes instead to enclose its elements, like this:

var displayed="<span style='background:url(image.gif);'>[Top]</span>";

This is what you've done in your latest input which allowed me to see
the mistakes we had made in the previous few posts.

Thank you very much.

Oinky

Hi all!

I use Jump to top Link script, it works fine but i want to modify the code for an image. I want to use an image instead of using a text to show the top link. I tried several times but it did not work.
how can i change the text with an image? Any idea?

The text code is like this.

var displayed="<nobr><b>[Top]</b></nobr>"

cyberx,

Have you tried to insert an image in place of the [Top]?

Something like: var displayed="<nobr><b><img src='top.jpg'></b></nobr>"

I haven't tested this, so I don't know if it will work, but maybe it will do what you want.

Is there a specific reason for not using an anchor tag?