PDA

View Full Version : 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
<!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


<!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. :eek:

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

Use CSS to remove the border that IE may add. ;)



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


<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

theremotedr
05-26-2013, 04:54 PM
Many thanks.

Its now working as it should.
Thanks for your time this sunday afternoon.

coothead
05-26-2013, 05:03 PM
No problem, you're very welcome. ;)



coothead