Simple Popup

**Jon Lawrance** · Apr 14, 2008 03:11

I have a graphic image on my webpate, which when clicked should open up a small popup window with dimensions 150 x 100.

How can I do this?

Thanks,

Jon

**alecrust** · Apr 14, 2008 03:27

Add this to the <head> section of the page you have the clickable image on:

Code:

<script type="text/javascript">
<!--
var newwindow = '';

function popup(url) {
	if (!newwindow.closed && newwindow.location)
	{
		newwindow.location.href = url;
	}
	else
	{
		newwindow=window.open(url,'name','height=100,width=150');
		if (!newwindow.opener) newwindow.opener = self;
	}
	if (window.focus) {newwindow.focus()}
	return false;
}

// -->
</script>

Add this to the link of your image, so that it ends up like this:

Code:

<a href="#" title="Link Title" onclick="return popup('popup.htm')"><img src="#" width="#" height="#" alt="Link Alt" /></a>

Make a page called "popup.htm" in the same folder as the original page, and fill it with the content you want in the popup.

Job done

**Jon Lawrance** · Apr 14, 2008 04:02

So I have got to use javascript huh? Thanks for that.

I tried the code, but what am I supposed to put in <a href="#" to replace the #? Or is it supposed to be a #??

Thanks,

Jon

**alecrust** · Apr 14, 2008 04:14

Yeah, gotta use JavaScript if you want it at a set dimension like that.

Nope, just leave the href="#" (but replace all the other "#" bits), the "onclick" part opens the popup.

Let me know if it doesn't work.

**Jon Lawrance** · Apr 14, 2008 04:16

Something doesn't seem quite right. I am using this:

Code:

<a href="#" title="Link Title" onclick="return popup('popup.php')"><img src="../images/reviewbuttonyes.gif" align="top">

But the link seems to carry on into the next paragraph???

**AutisticCuckoo** · Apr 14, 2008 04:22

A more accessible way would be to use a normal link. Alec's solution means the link won't work with JavaScript disabled or unsupported. Using a regular link means it will at least work (although it won't pop up a new window).

Code:

<a href="popup.php" title="Link Title" onclick="return popup(this.href)"><img src="../images/reviewbuttonyes.gif" alt="(text equivalent)"></a>

Don't forget the alt attribute of the image, which is required.

**Jon Lawrance** · Apr 14, 2008 04:25

That non-javascript worked just fine thanks. Couple of questions though:

1. How would I get rid of the blue outline on the image?

2. What do you mean it won't pop up in a new window? When I tried it, it opened a little window? Was using firefox if that makes any difference.

**paul_wilkins** · Apr 14, 2008 04:35

Use a css style give it no border

Code css:

a img { border: none }

When there is no javascript it won't pop up in a new window. It can't. Javascript equals popup, no javascript equals some other solution.

When there is no javascript, having a valid link means that at the very least, the linked page will be accessible.

When there is javascript, that linked page can become a popup window instead.

**Jon Lawrance** · Apr 14, 2008 04:39

Question 2 is actually referring to the non-javascript link, so the question still holds.

Regarding the "a img" css stuff, will I need a unique one since it would affect all my links on my page otherwise? If so, any pointers on how to make it unique?

Thanks guys, nearly there!

**AutisticCuckoo** · Apr 14, 2008 05:02

Originally Posted by Jon Lawrance

2. What do you mean it won't pop up in a new window? When I tried it, it opened a little window? Was using firefox if that makes any difference.

If you disable JavaScript, the link won't open in a new window. It will behave just like a normal link.

If you use Alec's solution, the link will just go to the top of the page if JavaScript is disabled (or unsupported or blocked).

**alecrust** · Apr 14, 2008 05:03

Originally Posted by AutisticCuckoo

A more accessible way would be to use a normal link. Alec's solution means the link won't work with JavaScript disabled or unsupported. Using a regular link means it will at least work (although it won't pop up a new window).

Code:

<a href="popup.php" title="Link Title" onclick="return popup(this.href)"><img src="../images/reviewbuttonyes.gif" alt="(text equivalent)"></a>

Don't forget the alt attribute of the image, which is required.

So how does this fit with his specification of the size being 150x100?

**AutisticCuckoo** · Apr 14, 2008 05:05

Originally Posted by Jon Lawrance

Regarding the "a img" css stuff, will I need a unique one since it would affect all my links on my page otherwise? If so, any pointers on how to make it unique?

It will remove the borders from all images inside links. If you only want this to happen for this particular image, then use something like this,

Code HTML4Strict:

<a href="popup.php" title="Link Title" onclick="return popup(this.href)"><img src="../images/reviewbuttonyes.gif" alt="(text equivalent)" id="reviewbuttonyes"></a>

Code CSS:

#reviewbuttonyes {border:0}

**alecrust** · Apr 14, 2008 05:11

But AutisticCuckoo, he wants the popup to be a specific size.

**AutisticCuckoo** · Apr 14, 2008 05:24

He can still do that in the popup() function. With JS enabled, there will be a pop-up window with the specified size. Without JS it will be a regular link, which is as close to graceful degradation as you'll get in this case.

If it's better not to do anything if JS isn't enabled, then you might use '#' as the URI. But in that case, the entire link should be created by JavaScript, since it's non-functional without scripting.

**Jon Lawrance** · Apr 14, 2008 05:31

So going the javascript route for now, why does the link carry on into the next paragraph of text? Is there some kind of missing terminator?

**AutisticCuckoo** · Apr 14, 2008 05:40

In the sample you posted above, you're missing the </a> tag. If you copy my example verbatim it should work.

**Jon Lawrance** · Apr 14, 2008 06:09

Hey guys, its working a treat now. Thank you.

User Tag List

Thread: Simple Popup

Thread Tools

Display

Simple Popup

Bookmarks

Bookmarks

Posting Permissions