PDA

View Full Version : Pop-Up window link to image



egghead2000
06-07-2007, 10:49 PM
[I] have an image that I want to link a pop up/over window to. I put the proper script in the header, but what script do I put in the body and how do I link it to the image?

Thanks,
A real novice

thetestingsite
06-07-2007, 10:52 PM
Is this a script off of DD's script library, or are you requesting a script. If it is from DD, then please post a link to the script in question.

egghead2000
06-07-2007, 10:57 PM
http://www.dynamicdrive.com/dynamicindex8/popwin.htm

thetestingsite
06-07-2007, 10:59 PM
Then you would put the code that gets generated in the second textarea (on that page you linked to) into the body of your document. So it would be something like this:



<a href="http://www.google.com" onclick="NewWindow(this.href,'mywin','213','324','no','center');return false" onfocus="this.blur()">YourLinkText</a>


except with your custom settings.

Hope this helps.

egghead2000
06-07-2007, 11:03 PM
If I put the code you sent, how does it know what image to link to?

thetestingsite
06-07-2007, 11:08 PM
Change the part in red below to the path to your image.



<a href="path/to/your/image.jpg" onclick="NewWindow(this.href,'mywin','213','324','no','center');return false" onfocus="this.blur()">Text or Image</a>


Hope this helps.

egghead2000
06-07-2007, 11:13 PM
<td><img border="0" src="LIPS_01_copy.gif" width="200" height="70" <a></td>

above is the image I want to link a pop-up window to.

As you can tell I confuse easely

thetestingsite
06-07-2007, 11:17 PM
<td>
<a href="LIPS_01_copy.gif" onclick="NewWindow(this.href,'mywin','213','324','no','center');return false" onfocus="this.blur()">Text or Image</a><img border="0" src="LIPS_01_copy.gif" width="200" height="70"><a></td>

egghead2000
06-07-2007, 11:51 PM
OK, I put the following code in the proper location on the page and the image showed uo in the top left of the page, not where it should be and it doesnt link to a new window or anything.

popup is the name of the new popup page

<href="LIPS_01_copy.gif" onclick="NewWindow(this.href,'popup','213','324','no','center');return false" onfocus="this.blur()"<Text or Image<a/><img border="0" src="LIPS_01_copy.gif" width="200" height="70" <a>

thetestingsite
06-08-2007, 12:21 AM
Do you have a link to the page you are trying to put this one (or even posting the source code would be helpful). Other than that, not sure what else to tell you.

egghead2000
06-08-2007, 12:40 AM
Do you mean a hyperlink?

Can I send yo the html for the page?

thetestingsite
06-08-2007, 12:42 AM
Yes, either a link to your page that you are trying to add this functionality to, or you can simply post the source code of your page. That would be helpful to us in order to get your issue resolved.

egghead2000
06-08-2007, 04:09 AM
how about I send you the entire page's html. Theres not much

egghead2000
06-08-2007, 04:13 AM
Here is the page. I want to be able to click on the lips to open a popover.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Home Page</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<link rel="icon" href="http://www.squarefrog.com/favicon.ico"
type="image/x-icon" /> <link rel="shortcut icon"
href="http://www.squarefrog.com/favicon.ico" type="image/x-icon" />

<link rel="icon" href="http://www.squarefrog/favicon.ico"
type="image/vnd.microsoft.icon" />





</head>

<body bgcolor="#FFFF00">







<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td colspan="10" align="center"><img border="0" src="sf1&#37;20copy.gif" width="123" height="123"><img border="0" src="squarefrog%20ry.gif" width="600" height="100"><img border="0" src="sf2.gif" width="123" height="123"></td>
</tr>
<tr>
<td></td>
<td>.</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="10">
<p style="margin-left: 15; margin-right: 15"><i><font face="Century Gothic" size="3" color="#000000">
&quot;In the future this web site will become a portal to the unknown...........Some of the things to be witnessed will shock you, others will
amaze you and yet, others will disappoint you.&nbsp;One thing is for certain, this page is taking me a lot longer to
create than for you to experience.&quot;</font></i></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="150"></td>
<td width="30"></td>
<td width="60"></td>
<td colspan="4" align="center" width="200" valign="bottom">.
<p><img border="0" src="LIPS_01_copy.gif" width="200" height="70"></td>
<td width="60"></td>
<td width="30"></td>
<td width="150"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</center>
</div>















</body>

</html>

egghead2000
06-08-2007, 04:17 AM
www.squarefrog.com

jscheuer1
06-08-2007, 07:22 AM
I haven't really been following this thread too closely, but you can try something like so:


<a href="some_page.htm" target="_blank" onclick="window.open(this.href, this.target, 'width=500, height=500, top=150, left='+[screen.availWidth/2-250]);return false;"><img border="0" src="LIPS_01_copy.gif" width="200" height="70"></a>

It uses the javascript window.open() method, which you can look up using Google to find out all of the various options (specifications, actually) available for use with it. I've just set it to the average sort of specs one might normally want. If javascript is unavailable, a normal HTML new window will open instead.

However, it should be noted that in those browsers with or without javascript enabled - if the pop up blocker is set to block all pop ups (unusual, most allow these type of pop ups - one's initiated by a user clicking on something), not too much more than a warning will happen, if that.

hayleye
06-08-2007, 09:19 AM
Is this exactly what you put on the page?:
<href="LIPS_01_copy.gif" onclick="NewWindow(this.href,'popup','213','324','no','center');return false" onfocus="this.blur()"<Text or Image<a/><img border="0" src="LIPS_01_copy.gif" width="200" height="70" <a>

This is not valid HTML, even before you get anywhere near adding js functionality.

A link tag is this <a>link</a>
Adding a href attribute to a link tag is like this:
<a href="mypage.html">link</a>

Some things wrong with the code above are:
there is no tag that begins <href
the end of an opening tag is > not <
you don't close a tag like <a/>
the end <a> is incorrect

You start your link like this:
<a href="LIPS_01_copy.gif">Text or Image</a>
<img border="0" src="LIPS_01_copy.gif" width="200" height="70">

If you want a link on the image put the <a> tag around it:
<a href="LIPS_01_copy.gif">Text or Image</a>
<a href="LIPS_01_copy.gif"><img border="0" src="LIPS_01_copy.gif" width="200" height="70"></a>

Then add your js into the link as a new attribute:
<a href="LIPS_01_copy.gif" onclick="NewWindow(this.href,'popup','213','324','no','center');return false" onfocus="this.blur()">Text or Image</a>

So <a> is the tag for a link, href and onclick are some attributes that you can give to a <a> tag.

This is pretty much the syntax that was provided apart from that stray <a> at the end

I hope this helps with your HTML, unless of course the code you pasted wasn't what you were using at all and you know HTML perfectly well!

Hayley

jscheuer1
06-08-2007, 03:24 PM
Is this exactly what you put on the page?:
<href="LIPS_01_copy.gif" onclick="NewWindow(this.href,'popup','213','324','no','center');return false" onfocus="this.blur()"<Text or Image<a/><img border="0" src="LIPS_01_copy.gif" width="200" height="70" <a>

This is not valid HTML, even before you get anywhere near adding js functionality.

Hayley

That's not very close to what I posted. Please direct your comments to whoever it is that did.

egghead2000
06-08-2007, 04:42 PM
I've taken everything off this page except the image of the lips, which I want to link a 300 x 300 pop over window to. Here is the html for the page,

.
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Home Page</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<link rel="icon" href="http://www.squarefrog.com/favicon.ico"
type="image/x-icon" /> <link rel="shortcut icon"
href="http://www.squarefrog.com/favicon.ico" type="image/x-icon" />

<link rel="icon" href="http://www.squarefrog/favicon.ico"
type="image/vnd.microsoft.icon" />





</head>

<body bgcolor="#FFFF00">







<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td colspan="10" align="center"><img border="0" src="sf1%20copy.gif" width="123" height="123"><img border="0" src="squarefrog%20ry.gif" width="600" height="100"><img border="0" src="sf2.gif" width="123" height="123"></td>
</tr>
<tr>
<td></td>
<td>.</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="10">
<p style="margin-left: 15; margin-right: 15"><i><font face="Century Gothic" size="3" color="#000000">
&quot;In the future this web site will become a portal to the unknown...........Some of the things to be witnessed will shock you, others will
amaze you and yet, others will disappoint you.&nbsp;One thing is for certain, this page is taking me a lot longer to
create than for you to experience.&quot;</font></i></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="150"></td>
<td width="30"></td>
<td width="60"></td>
<td colspan="4" align="center" width="200" valign="bottom">.
<p><img border="0" src="LIPS_01_copy.gif" width="200" height="70"></td>
<td width="60"></td>
<td width="30"></td>
<td width="150"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</center>
</div>















</body>

</html>

thetestingsite
06-08-2007, 04:44 PM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Home Page</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<link rel="icon" href="http://www.squarefrog.com/favicon.ico"
type="image/x-icon" /> <link rel="shortcut icon"
href="http://www.squarefrog.com/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://www.squarefrog/favicon.ico"
type="image/vnd.microsoft.icon" />
</head>
<body bgcolor="#FFFF00">

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td colspan="10" align="center"><img border="0" src="sf1&#37;20copy.gif" width="123" height="123"><img border="0" src="squarefrog%20ry.gif" width="600" height="100"><img border="0" src="sf2.gif" width="123" height="123"></td>
</tr>
<tr>
<td></td>
<td>.</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="10">
<p style="margin-left: 15; margin-right: 15"><i><font face="Century Gothic" size="3" color="#000000">
&quot;In the future this web site will become a portal to the unknown...........Some of the things to be witnessed will shock you, others will
amaze you and yet, others will disappoint you.&nbsp;One thing is for certain, this page is taking me a lot longer to
create than for you to experience.&quot;</font></i></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="150"></td>
<td width="30"></td>
<td width="60"></td>
<td colspan="4" align="center" width="200" valign="bottom">.
<p><a href="LIPS_01_copy.gif" target="_blank" onclick="window.open(this.href, this.target, 'width=500, height=500, top=150, left='+[screen.availWidth/2-250]);return false;"><img border="0" src="LIPS_01_copy.gif" width="200" height="70"></a></td>
<td width="60"></td>
<td width="30"></td>
<td width="150"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</center>
</div>

</body>
</html>