Adding script to an image

**theremotedr** · 05-25-2013, 07:52 AM

Hi

I am using a small script of which when the visable text on the screen is clicked on you are returned to the top of the web page.

Here is the script,
<a href='#'>BACK TO TOP</a>

Please advise how i can use this with an image so the image is clicked on as opposed to clicking the text.

Thanks

**vwphillips** · 05-25-2013, 09:19 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div style="height:1000px;" ></div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" onmouseup="window.scrollTo(0,0);"/>
</body>

</html>

or

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

var zxcScrollTo ={

 ms:1000,

 Scroll:function(to){
  this.animate(window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop,to,new Date(),this.ms,Math.PI/(2*this.ms));
 },

 animate:function(f,t,srt,mS,i){
  var oop=this,ms=new Date().getTime()-srt,n=(t-f)*Math.sin(i*ms)+f;
  clearTimeout(oop.dly);
  if (isFinite(n)){
   window.scrollTo(0,n);
  }
  if (ms<mS){
   oop.dly=setTimeout(function(){ oop.animate(f,t,srt,mS,i); },10);
  }
  else {
   window.scrollTo(0,t);
  }
 }


}


/*]]>*/
</script>
</head>

<body>
<div style="height:1000px;" ></div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" onmouseup="zxcScrollTo.Scroll(0);"/>
</body>

</html>

**theremotedr** · 05-26-2013, 11:10 AM

Many thanks for the choices.
I have decided to use the top script.
I have replaced you "1" image with my image and script works well.
Here is the link to my test page http://www.ianparsons.info/ztestpage.htm
Please could you take a look at the page as there seems to be a large distance between my enter logo & the arrow up logo.
Please could you make an edit so the arrow up logo is nearer also i would like it center to page.

I have had a try but unsuccessfull.

**theremotedr** · 05-26-2013, 11:12 AM

My mistake,now sorted many thanks.

**theremotedr** · 05-26-2013, 01:31 PM

I do have another question if i may.
When you place your mouse cursor over an image of which has a hyperlink you see a small hand.
I have noticed that when i place my mouse cursor over the image i am using with the script i do not see any hand for obvious reasons.
Is it possible to add a tweak to the script so this hand is then seen as if it was a hyperlink ?

I am using this script supplied above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div style="height:1000px;" ></div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" onmouseup="window.scrollTo(0,0);"/>
</body>

</html>

**coothead** · 05-26-2013, 02:04 PM

Hi there theremotedr,

javascript is totally unnecessary for your task.

Just place the image within the "a element" and you're ready to go.

Use CSS to remove the border that IE may add.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a img {
    border:0;
 }
</style>

</head>
<body>

<div style="height:1000px;">the top</div>


<div>

<a href="#">
<img src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/TOPOFPAGEBUTTON.png" alt="go to top">
</a>

</div>

</body>
</html>

coothead

**theremotedr** · 05-26-2013, 02:39 PM

Hi,
Im having problems with it.
Please could you try and see if its the same on your pc.
Go here http://www.ianparsons.info/index.html
Click on the Audi logo.
Click the Top of page logo at the bottom.
Yes you are taken to the top of the page But if you click on the back arrow you are still on the Audi page Not the Home page ?
Thus neding to click the back arrow twice to be at the Home page.

I thankyou for your help.

**coothead** · 05-26-2013, 03:13 PM

Hi there theremotedr,

in this code...

Code:


<a href="#">

...replace the "#" with index.html for the home page and audikeypage.htm for the audi page.

Replace the "#" for the other pages in a similar manner.

Note that some pages have an .html extension while others have an .htm extension.

coothead