Help with JavaScript please.

hotvoodoo

04-04-2007, 02:59 PM

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/script2/popimage2.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

Nightfire

04-04-2007, 03:25 PM

Take a closer look at the link

<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

Nightfire

04-04-2007, 03:26 PM

......

hotvoodoo

04-04-2007, 04:54 PM

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

Nightfire

04-04-2007, 04:56 PM

It'll be moved for you when the mod for this forum comes along :)

hotvoodoo

04-04-2007, 05:03 PM

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 :thumbsup:

jay

hotvoodoo

04-04-2007, 08:55 PM

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. :confused:

Thanks in advance for any other help. :thumbsup:

Jay

Nightfire

04-04-2007, 08:59 PM

<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

hotvoodoo

04-04-2007, 09:11 PM

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

Nightfire

04-04-2007, 09:14 PM

;) Yep it's me again

hotvoodoo

04-04-2007, 09:37 PM

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"> 

</a>

</body>
<html>