Results 1 to 10 of 10

Thread: Adding script to an image

  1. #1
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default Adding script to an image

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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.

  4. #4
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    My mistake,now sorted many thanks.

  5. #5
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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>

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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

  7. #7
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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.
    Last edited by theremotedr; 05-26-2013 at 02:47 PM.

  8. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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
    Last edited by coothead; 05-26-2013 at 03:31 PM.

  9. #9
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    Many thanks.

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

  10. #10
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default


    No problem, you're very welcome.


    coothead

Similar Threads

  1. Left-Right Image Slideshow Script adding twice on page
    By carina. in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-19-2009, 09:19 PM
  2. Adding a fade effect to the "Dom Image Rollover v.3.0" script
    By AshleyQuick in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-06-2009, 01:07 AM
  3. Trouble Adding Image Script into Continuous Marquee Script - please help!
    By tronicuk in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-17-2008, 10:26 AM
  4. Adding rollover image functionality to script
    By SteveC in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-14-2007, 05:23 AM
  5. adding payment buttons to Image Thumbnail Viewer II script
    By djk in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-17-2006, 04:56 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •