Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with JavaScript please.

    Hi,
    I was wondering if anyone can help me.
    I want to use a script on my website to viewer a small image larger when hovered over or clicked on, but then it also has to have a link for a download.
    I have found one here that is just perfect.
    http://www.javascriptkit.com/script/...opimage2.shtml

    What I was wondering is, can I replace the description underneath the image in the new window that appears after clicking the food option to a download link and if so, how ?
    So, for example, the description on the first food option ( Breakfast pancakes ) in the new window that appears is "Breakfast is served." This would become a "DOWNLOAD" link. I am also obviously changing the images to suit my needs.

    Any help appreciated.

    Jay

  • #2
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Take a closer look at the link
    Code:
    <a href="#" onClick="jkpopimage('food1.jpg', 325, 445, 'Breakfast is served.'); return false">Breakfast pancakes</a>
    Image name
    Description
    Link text

    Change the text/names in the colours shown for what you want. Also you should've posted this in the javascript forum

  • #3
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    ......
    Last edited by Nightfire; 04-04-2007 at 03:26 PM. Reason: forum messed up

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, my apologies for posting in the wrong forum.
    I need to confirm something else. Would I have to repost my question or could you move this to the correct forum for me ?

    Thanks you and again my apologies.

    Jay

  • #5
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    It'll be moved for you when the mod for this forum comes along

  • #6
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, thanks for the quick response & thanks also for the help so far.
    I shall wait till a little later until it has been moved to the correct forum for my "next" question LOL.
    Cheers my friend. Later

    jay

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    OK, I know Nightfire started helping me with this issue and made the suggestion, but I am needing the Description in red to be made as a downloadable link. How would I do this.
    <a href="#" onClick="jkpopimage('food1.jpg', 325, 445, 'Breakfast is served.'); return false">Breakfast pancakes</a> and I am not sure how this can be done within the script.
    The link above just opens a new "preview" window with it's description "Breakfast is served" underneath.
    "Breakfast is served" would then be the "downloadable link".

    I hope you can make sense of what I am trying to achieve.

    Thanks in advance for any other help.

    Jay

  • #8
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Code:
    <a href="#" onClick="jkpopimage('food1.jpg', 325, 445, '<a href="downloadfile.ext">Download file</a>'); return false">Breakfast pancakes</a>
    Change the orange to the filename you want to be downloaded

  • #9
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    LOL. Too funny. Hi again Nightfire, you again HUH. I was expecting someone else LOL.
    OK, I will give that a try. Thanks very much. Appreciate it.
    I just didn't think that I could add a link within a Javascript within a link, so to speak.
    Anyhow, thanks again.

    Jay

  • #10
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Yep it's me again

  • #11
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HI again,
    No, that didn't work.
    I am not sure if it will help, but below is the full Javascript as I found it, within my HTML.
    I just changed the details in the link to suit my needs so far. Near the bottom of HTML coding.
    I was also wondering how to "center" the larger preview in the newly opened window.
    Thanks for any help again.

    Jay

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>

    <title>main</title>

    <script type="text/javascript">

    // JK Pop up image viewer script- By JavaScriptKit.com
    // Visit JavaScript Kit (http://javascriptkit.com)
    // for free JavaScript tutorials and scripts
    // This notice must stay intact for use

    var popbackground="#34170f" //specify backcolor or

    background image for pop window
    var windowtitle="Preview Window" //pop window title

    function detectexist(obj){
    return (typeof obj !="undefined")
    }

    function jkpopimage(imgpath, popwidth, popheight,

    textdescription){

    function getpos(){
    leftpos=(detectexist(window.screenLeft))?

    screenLeft+document.body.clientWidth/2-popwidth/2 :

    detectexist(window.screenX)?

    screenX+innerWidth/2-popwidth/2 : 0
    toppos=(detectexist(window.screenTop))?

    screenTop+document.body.clientHeight/2-popheight/2 :

    detectexist(window.screenY)?

    screenY+innerHeight/2-popheight/2 : 0
    if (window.opera){
    leftpos-=screenLeft
    toppos-=screenTop
    }
    }

    getpos()
    var

    winattributes='width='+popwidth+',height='+popheight+',re

    sizable=yes,left='+leftpos+',top='+toppos
    var bodyattribute=(popbackground.indexOf(".")!=-1)?

    'background="'+popbackground+'"' :

    'bgcolor="'+popbackground+'"'
    if (typeof jkpopwin=="undefined" || jkpopwin.closed)
    jkpopwin=window.open("","",winattributes)
    else{
    getpos() //uncomment these 2 lines if you wish subsequent

    popups to be centered too
    jkpopwin.moveTo(leftpos, toppos, rightpos, bottompos)
    jkpopwin.resizeTo(popwidth, popheight+30)
    }
    jkpopwin.document.open()
    jkpopwin.document.write('<html><title>'+windowtitle+'</ti

    tle><body '+bodyattribute+'><img src="'+imgpath+'"

    style="margin-bottom:

    0.5em"><br>'+textdescription+'</body></html>')
    jkpopwin.document.close()
    jkpopwin.focus()
    }

    </script>

    <link href="basestyles.css" rel="stylesheet" type="text/css">

    </head>

    <body>

    <a href="#" onClick="jkpopimage('preview41-large.jpg', 350, 400, '<a href="myfilename.ext">DOWNLOAD</a>'); return false">

    <img src="preview41.jpg" border="0"> <!-- USED SMALL IMAGE HERE INSTEAD OF TEXT LINK -->

    </a>

    </body>
    <html>


  •  

    Posting Permissions

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