/    Sign up×
Community /Pin to ProfileBookmark

pop-up window

Copy linkTweet thisAlerts:
Feb 09.2004

I have created a page with an image centred in the page.

How can i change the code so the image can be clicked for a larger view in a pop up window?

Below is the code of the page in question.

<html>

<head>

<title>page three</title>

<style type=”text/css”>
<!–
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #ffffff;
}
–>
</style>

</head>

<body>

<img style=”position:absolute; top:0px; left:0px; width:200px; height:150px” src=”imageone.jpg”>

</body>

</html>

Hope someone can help?

Thanks in advance.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@PhillMcFeb 09.2004 — it's done with JavaScript. Place the image in an Anchor, like so:

<a><img src="your image.img"></a>

Now, add the this to the open achor tag:

href="javascript:Window.open(URL OF YOUR IMAGE)"

this will open your image in a new window.

OR

set the href attribute to the url of your image, and add a target attribute set to open in new window (target="_blank")
Copy linkTweet thisAlerts:
@Paul_JrFeb 10.2004 — I don't believe you should be using the [FONT=times new roman]javascript:[/FONT] pseudo-protocol, as that means users without JS enabled won't be able to view the actual sized image. Something like this would probably be better:
<i>
</i>&lt;a href="your/image.jpg" onclick="window.open(href); return false;"&gt;&lt;img src="your/image.jpg" width="100" height="100" alt="Image Thumbnail"&gt;&lt;/a&gt;

That way, people with JS enabled will get the popup, and people who don't will just be taken to the actual image. ?

You can see [URL=http://www.webdevfaqs.com/javascript.php#centeredpopup]this link[/URL], or [URL=http://www.w3schools.com/js/js_window.asp]this link[/URL] for more info on how to customize the opened window.
×

Success!

Help @bash spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,
)...