弹出脚本！？！ [英] pop up script!?!
问题描述
有没有人有一个简单的脚本，让我从一个
缩略图中弹出一张图片？
我找到的那些都非常非常来源复杂而凌乱......
谢谢，
丁丁
在文章< JP ********************** @ amsnews03.chello.com>，
在** @ wentinkmodelbouw.nl 中启发我们...有没有人有一个简单的脚本让我从一个图片弹出一张图片
缩略图？
我找到的那些都非常非常复杂和杂乱的源...
你需要吗？它是在一个有规格的窗口中弹出还是只在新窗口中打开？
------------------- ------------------------------
~kaeli~
耶稣拯救，真主保护，和Cthulhu
认为你会做一个漂亮的三明治。
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
------- ------------------------------------------
" Wentink" <在** @ wentinkmodelbouw.nl>在消息中写道
新闻：JP ********************** @ amsnews03.chello.com ...有没有人有一个简单的脚本，让我从一个缩略图中弹出一张图片？
我找到的那些都非常非常复杂和杂乱的来源.. 。
谢谢，
丁丁
试一试（注意 - 你应该将javascript保存在* .js文件
所以你可以重复使用它）。我在IE6和Mozilla 1.4上测试了这个。
你需要做的就是将src传递给imagePopup（）
函数。然后你只需要在< a>中调用该函数。标签或
使用按钮或图像中的onclick处理程序或任何你想要的。
脚本将动态地确定图像的高度和宽度，所以你不需要包括那些（我发现这会使脚本设置起来） />
a在页面上更容易！）。
< html>
< head>
< title>弹出图像测试< / title>
< meta http-equiv =" Content-Type"含量=" text / html的; charset = iso-8859-1">
< script type =" text / javascript">
//存储对弹出窗口的引用的变量
var popupWindow
/ *
功能：imagePopup（）
描述：
在弹出窗口中打开图像的功能
函数参数：
ImageSource - 必需 - 要在弹出窗口中打开的图像的src
ImageWidth - 可选 - 图像的宽度
ImageHeight - 可选 - 图像的高度
ImageTitle - 可选 - 图像的标题 - 用于弹出窗口中的< title>
属性
PopupTitle - 可选 - 弹出窗口的window.name属性
* /
函数imagePopup（ImageSource， ImageWidth，ImageHeight，ImageTitle，
PopupTitle）{
/ *
1.处理通过的FUNC价格值
* /
//如果没有传递则设置默认值
PopupTitle =（PopupTitle ==''' '）？ ''imgPopup''：PopupTitle; //注意 - 这个
不能包含任何空格
ImageTitle =（ImageTitle ==''''）？ ImageSource：ImageTitle; //如果没有通过，则使用
图像src作为默认标题
//如果没有，请查看我们是否需要动态抓取图像宽度尺寸
在函数中传递
if（ImageWidth ==''''|| typeof（ImageWidth）==" undefined"）{
//如果没有传递图像宽度 - 预加载图像然后从预加载的图像中获取宽度
值
theImage = new Image（）;
theImage.src = ImageSource;
ImageWidth = theImage.width;
}
//看看我们是否需要动态抓取图像宽度尺寸（如果没有）
在函数中传递
if（ImageHeight =='''''|| typeof（ImageHeight）==" undefined"）{
ImageHeight = theImage.height;
}
/ *
2.计算POPUP窗口的中心值< br $>
* /
//我认为这适用于NS6 +& Mozilla）！
if（document.all）{
var xMax = screen.width;
var yMax = screen.height;
}
else {
if（document.layers）{
var xMax = window.outerWidth;
var yMax = window.outerHeight;
}
else {
var xMax = 640;
var yMax = 480;
}
}
xOffset =（xMax - ImageWidth）/ 2;
yOffset =（yMax - ImageHeight）/ 2;
/ *
3.设置POPUP窗口值
* /
/ *设置预览窗口的各种功能 - 宽度，高度，
标题栏等。* /
var popupFeatures =
''width =''+ ImageWidth +
''，height =''+ ImageHeight +
''，screenX =''+ xOffset +
''，screenY =''+ yOffset +
''，top =''+ yOffset +
''，left ='' + xOffset
/ *
4.创建并打开POPUP WI NDOW
* /
popupWindow = window.open（''''，PopupTitle，popupFeatures）;
// Set开窗器
if（popupWindow.opener == null）{
popupWindow.opener = self;
}
popupWindow.focus（）;
/ *
5.将实际图像写入POPUP窗口
* /
//为弹出窗口创建默认的HTML内容
var popupContent =""
popupContent + =" \\\
< ; HTML>< HEAD><标题>" + ImageTitle +"< / title>< meta
http-equiv =''Content-Type''content =''text / html; charset = iso-8859-1''>< / head>"
popupContent + =" \ n< body style =''margin：0px; padding：0px;''>" //需要
确保< body>没有填充或边距或图像将是
off-kilter
popupContent + =" \\\
< div align =''center''>"
popupContent + ="< img id =''popupimage''>" //这是< img>我们
取代src，width&身高（见下文）
popupContent + ="< / div>"
popupContent + =" \ n< / body>"
popupContent + =" \\\
< / html>"
popupWindow.document.write（popupContent）
popupWindow.document.close（）
//现在写下图像的数据（src，width& height）
oPopupImg = popupWindow.document.getElementById（''popupimage'' ）; //创建
对< img>的对象引用在弹出窗口中
oPopupImg.src = ImageSource; //替换来源
oPopupImg.width = ImageWidth;
oPopupImg.height = ImageHeight;
}
< / script>
< / head>
< body>
< h1>图像弹出测试< / h1>
< input type =" button"名称= QUOT;视图"值= QUOT;视图" onclick =" imagePopup（
''http：//www.mystudios.com/art/impress/monet/monet-wheat-field-1881.jpg''）" />
< / body>
< / html>
轻微修改 - 我忘了预装图片没有
ImageHeight通过的情况 - 我依靠的事实是没有ImageWidth也会传递
（在99％的情况下可能是这样 - 但只需要确认
）
更改：
查找：
//看看我们是否需要动态抓取图像宽度尺寸如果没有
在函数中传递
if（ImageHeight ==''''|| typeof （ImageHeight）==" undefined"）{
ImageHeight = theImage.height;
}
并将其替换为：
//看看我们是否需要动态抓取图像高度尺寸如果没有
在函数中传递
if（I mageHeight ==''''|| typeof（ImageHeight）==" undefined" ）{
theImage = new Image（）;
theImage.src = ImageSource;
ImageHeight = theImage.height;
}
" DB McGee" <无***** @ noreply.com>在消息中写道
news：DE **************** @ news01.bloor.is.net.cable。 rogers.com ..." Wentink" <在** @ wentinkmodelbouw.nl>在消息中写道
新闻：JP ********************** @ amsnews03.chello.com ...任何人都有一个简单的脚本，让我从一个缩略图中弹出一张图片？
我找到的那些在
来源中非常复杂和混乱。 。
谢谢，
丁丁
试试这个（注意 - 您应该将javascript存储在* .js
文件，以便您可以重复使用它）。我在IE6和Mozilla 1.4上测试了这个。
你需要做的就是将src传递给imagePopup（）
函数。然后你只需要在< a>中调用该函数。标记
或在按钮或图像中使用onclick处理程序或任何你想要的。
脚本将动态确定图像的高度和宽度，因此您甚至不需要包含这些（我发现这使得在页面中更容易设置脚本
） ！）。
< html>
< head>
< title>弹出图像测试< / title>
< meta http-equiv =" ;内容类型"含量=" text / html的; charset = iso-8859-1">
< script type =" text / javascript">
//存储对弹出窗口的引用的变量
var popupWindow
/ *
功能：imagePopup（）
描述：
在弹出窗口中打开图像的功能
/>函数参数：
ImageSource - REQUIRED - 要在弹出的
窗口中打开的图像的src
ImageWidth - 可选 - 图像的宽度
ImageHeight - 可选 - 图像的高度
ImageTitle - 可选 - 图像的标题 - 在弹出窗口的< title>
属性中使用
PopupTitle - 可选 - 弹出窗口的window.name属性
* /
函数imagePopup（ImageSource，ImageWidth，ImageHeight，ImageTitle，
PopupTitle）{
/ *
1.处理通过的功能值
* /
//如果没有通过则设置默认值
弹出窗口Title =（PopupTitle ==''''）？ ''imgPopup''：PopupTitle; //注意 -
这个不能包含任何空格
ImageTitle =（ImageTitle ==''''）？ ImageSource：ImageTitle; //如果没有通过，则使用
图像src作为默认标题
//如果函数中没有传递
，请查看我们是否需要动态获取图像宽度尺寸
if（ImageWidth ==''''|| typeof（ImageWidth）==" undefined"）{
//如果没有传递图像宽度 - 预加载图像然后抓取宽度
来自预装图像的值
theImage = new Image（）;
theImage.src = ImageSource;
ImageWidth = theImage.width;
}
//看看是否我们需要动态抓取图像宽度尺寸，如果在函数中没有传递
if（ImageHeight ==''''|| typeof（ImageHeight）==undefined）{
ImageHeight = theImage.height;
}
/ *
2.计算POPUP窗口的中心值
* /
/ /我认为这适用于NS6 +& Mozilla）！
if（document.all）{
var xMax = screen.width;
var yMax = screen.height;
}
else {
if（document.layers）{
var xMax = window.outerWidth;
var yMax = window.outerHeight;
}
else {
var xMax = 640;
var yMax = 480;
}
}
xOffset =（xMax - ImageWidth）/ 2;
yOffset =（yMax - ImageHeight）/ 2;
/ *
3.设置POPUP窗口值
* /
/ *设置预览窗口的各种功能 - 宽度，高度，
标题栏等* /
var popupFeatures =
''width =''+ ImageWidth +
''，height =''+ ImageHeight +
''，screenX ='' + xOffset +
''，screenY =''+ yOffset +
''，top =''+ yOffset +
''，left =''+ xOffset
/ *
4.创建并打开POPUP窗口
* /
popupWindow = window.open（''''，PopupTitle，popupFeat ures）;
//设置窗口开启器
if（popupWindow.opener == null）{
popupWindow.opener = self;
}
popupWindow.focus（ ）;
/ *
5.将实际图像写入POPUP窗口
* /
//为弹出窗口创建默认的HTML内容window
var popupContent =""
popupContent + =" \ n< html>< head>< title>" + ImageTitle +"< / title>< meta
http-equiv =''Content-Type''content =''text / html; charset = iso-8859-1''>< / head>"
popupContent + =" \ n< body style =''margin：0px; padding：0px;''>" //需要确保< body>没有填充或边距或图像将是
off-kilter
popupContent + =" \ n< div align =''center''>"
popupContent + =" ;< img id =''popupimage''>" //这是< img>我们
取代了src，width&高度（见下文）
popupContent + ="< / div>"
popupContent + =" \ n< / body>"
popupContent + =" \ n< / html>"
popupWindow.document.write（popupContent）
popupWindow.document.close（）
//现在写下图像的数据（src，宽度和高度）
oPopupImg = popupWindow.document.getElementById（''popupimage''）; //创建
对< img>的对象引用在弹出窗口中
oPopupImg.src = ImageSource; //替换来源
oPopupImg.width = ImageWidth;
oPopupImg.height = ImageHeight;
}
< / script>
< / head>
< body>
< h1>图像弹出测试< / h1>
< input type =" button"名称= QUOT;视图"值= QUOT;视图" onclick =" imagePopup（
'' http://www.mystudios.com/art/impress/monet/monet-wheat-field-1881.jpg''）" /> < / body>
< / html>
Does anybody have a simple script that let''s me popup a picture from a
thumbnail?
The ones i found are all very very complicated and messy in the source...
Thanks,
Tintin
In article <JP**********************@amsnews03.chello.com>,
in**@wentinkmodelbouw.nl enlightened us with...Does anybody have a simple script that let''s me popup a picture from a
thumbnail?
The ones i found are all very very complicated and messy in the source...
Do you need it to popup in a window with specifications or just open in
a new window?
-------------------------------------------------
~kaeli~
Jesus saves, Allah protects, and Cthulhu
thinks you''d make a nice sandwich.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
-------------------------------------------------
"Wentink" <in**@wentinkmodelbouw.nl> wrote in message
news:JP**********************@amsnews03.chello.com ...Does anybody have a simple script that let''s me popup a picture from a
thumbnail?
The ones i found are all very very complicated and messy in the source...
Thanks,
Tintin
Try this out (NOTE - you should probably store the javascript in a *.js file
so you can reuse it). I tested this on IE6 and Mozilla 1.4.
All you need to do is pass the src to the image to the imagePopup()
function. Then you just need to call that function either in an <a> tag or
using an onclick handler in a button or image or whatever you want. The
script will dynamically determine the height and width of the image so you
don''t even need to include those (i find that makes setting the scripting up
a lot easier in a page!).
<html>
<head>
<title>Popup Image Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// Variable to store a reference to the popup window
var popupWindow
/*
Function: imagePopup()
Description:
Function to open an image in a popup window
Function Parameters:
ImageSource - REQUIRED - the src of the image to open in the popup window
ImageWidth - OPTIONAL - the width of the image
ImageHeight - OPTIONAL - the height of the image
ImageTitle - OPTIONAL - the title for the image - used in the <title>
attribute in the popup window
PopupTitle - OPTIONAL - the window.name property for the popup window
*/
function imagePopup( ImageSource, ImageWidth, ImageHeight, ImageTitle,
PopupTitle ) {
/*
1. PROCESS THE PASSED FUNCTION VALUES
*/
// Set default values if none were passed
PopupTitle = ( PopupTitle == '''' ) ? ''imgPopup'' : PopupTitle; // Note - this
must not contain any spaces
ImageTitle = ( ImageTitle == '''' ) ? ImageSource : ImageTitle; // Use the
image src as the default title if none was passed
// See if we need to dynamically grab the Image width dimensions if none
were passed in the function
if ( ImageWidth == '''' || typeof( ImageWidth ) == "undefined" ) {
// If no image width was passed - preload the image then grab the width
value from the preloaded image
theImage = new Image();
theImage.src = ImageSource;
ImageWidth = theImage.width;
}
// See if we need to dynamically grab the Image width dimensions if none
were passed in the function
if ( ImageHeight == '''' || typeof( ImageHeight ) == "undefined" ) {
ImageHeight = theImage.height;
}
/*
2. CALCULATE CENTERING VALUES FOR THE POPUP WINDOW
*/
// I think this works in NS6+ & Mozilla )!
if (document.all) {
var xMax = screen.width;
var yMax = screen.height;
}
else {
if (document.layers) {
var xMax = window.outerWidth;
var yMax = window.outerHeight;
}
else {
var xMax = 640;
var yMax = 480;
}
}
xOffset = (xMax - ImageWidth) / 2;
yOffset = (yMax - ImageHeight) / 2;
/*
3. SETUP POPUP WINDOW VALUES
*/
/* Set the various features for the preview window - width, height,
titlebar etc. */
var popupFeatures =
''width='' + ImageWidth +
'',height='' + ImageHeight +
'',screenX='' + xOffset +
'',screenY='' + yOffset +
'',top='' + yOffset +
'',left='' + xOffset
/*
4. CREATE AND OPEN THE POPUP WINDOW
*/
popupWindow = window.open('''', PopupTitle,popupFeatures);
// Set the window opener
if ( popupWindow.opener == null ) {
popupWindow.opener = self;
}
popupWindow.focus();
/*
5. WRITE THE ACTUAL IMAGE TO THE POPUP WINDOW
*/
// Create the default HTML content for the popup window
var popupContent = ""
popupContent += "\n<html><head><title>" + ImageTitle + "</title><meta
http-equiv=''Content-Type'' content=''text/html; charset=iso-8859-1''></head>"
popupContent += "\n<body style=''margin: 0px; padding: 0px;''>" // Need to
make sure the <body> has no padding or margin or the image will be
off-kilter
popupContent += "\n<div align=''center''>"
popupContent += "<img id=''popupimage''>" // This is the <img> that we
replace the src, width & height (see below)
popupContent += "</div>"
popupContent += "\n</body>"
popupContent += "\n</html>"
popupWindow.document.write( popupContent )
popupWindow.document.close()
// Now write the data for the image (src, width & height)
oPopupImg = popupWindow.document.getElementById(''popupimage''); // Create
an object reference to the <img> in the popup window
oPopupImg.src = ImageSource; // Replace the source
oPopupImg.width = ImageWidth;
oPopupImg.height = ImageHeight;
}
</script>
</head>
<body>
<h1>Image Popup Test</h1>
<input type="button" name="view" value="view" onclick="imagePopup(
''http://www.mystudios.com/art/impress/monet/monet-wheat-field-1881.jpg'' )"/>
</body>
</html>
Slight modification - I forgot to preload the image in the case where no
ImageHeight was passed - I was relying on the fact that no ImageWidth would
be passed as well (which is probably true in 99% of the cases - but just to
be sure)
THE CHANGES:
Find this:
// See if we need to dynamically grab the Image width dimensions if none
were passed in the function
if ( ImageHeight == '''' || typeof( ImageHeight ) == "undefined" ) {
ImageHeight = theImage.height;
}
And replace it with:
// See if we need to dynamically grab the Image height dimensions if none
were passed in the function
if ( ImageHeight == '''' || typeof( ImageHeight ) == "undefined" ) {
theImage = new Image();
theImage.src = ImageSource;
ImageHeight = theImage.height;
}
"DB McGee" <no*****@noreply.com> wrote in message
news:DE****************@news01.bloor.is.net.cable. rogers.com..."Wentink" <in**@wentinkmodelbouw.nl> wrote in message
news:JP**********************@amsnews03.chello.com ...Does anybody have a simple script that let''s me popup a picture from a
thumbnail?
The ones i found are all very very complicated and messy in the source...
Thanks,
Tintin
Try this out (NOTE - you should probably store the javascript in a *.js
file so you can reuse it). I tested this on IE6 and Mozilla 1.4.
All you need to do is pass the src to the image to the imagePopup()
function. Then you just need to call that function either in an <a> tag or using an onclick handler in a button or image or whatever you want. The
script will dynamically determine the height and width of the image so you
don''t even need to include those (i find that makes setting the scripting up a lot easier in a page!).
<html>
<head>
<title>Popup Image Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// Variable to store a reference to the popup window
var popupWindow
/*
Function: imagePopup()
Description:
Function to open an image in a popup window
Function Parameters:
ImageSource - REQUIRED - the src of the image to open in the popup window
ImageWidth - OPTIONAL - the width of the image
ImageHeight - OPTIONAL - the height of the image
ImageTitle - OPTIONAL - the title for the image - used in the <title>
attribute in the popup window
PopupTitle - OPTIONAL - the window.name property for the popup window
*/
function imagePopup( ImageSource, ImageWidth, ImageHeight, ImageTitle,
PopupTitle ) {
/*
1. PROCESS THE PASSED FUNCTION VALUES
*/
// Set default values if none were passed
PopupTitle = ( PopupTitle == '''' ) ? ''imgPopup'' : PopupTitle; // Note - this must not contain any spaces
ImageTitle = ( ImageTitle == '''' ) ? ImageSource : ImageTitle; // Use the
image src as the default title if none was passed
// See if we need to dynamically grab the Image width dimensions if none
were passed in the function
if ( ImageWidth == '''' || typeof( ImageWidth ) == "undefined" ) {
// If no image width was passed - preload the image then grab the width
value from the preloaded image
theImage = new Image();
theImage.src = ImageSource;
ImageWidth = theImage.width;
}
// See if we need to dynamically grab the Image width dimensions if none
were passed in the function
if ( ImageHeight == '''' || typeof( ImageHeight ) == "undefined" ) {
ImageHeight = theImage.height;
}
/*
2. CALCULATE CENTERING VALUES FOR THE POPUP WINDOW
*/
// I think this works in NS6+ & Mozilla )!
if (document.all) {
var xMax = screen.width;
var yMax = screen.height;
}
else {
if (document.layers) {
var xMax = window.outerWidth;
var yMax = window.outerHeight;
}
else {
var xMax = 640;
var yMax = 480;
}
}
xOffset = (xMax - ImageWidth) / 2;
yOffset = (yMax - ImageHeight) / 2;
/*
3. SETUP POPUP WINDOW VALUES
*/
/* Set the various features for the preview window - width, height,
titlebar etc. */
var popupFeatures =
''width='' + ImageWidth +
'',height='' + ImageHeight +
'',screenX='' + xOffset +
'',screenY='' + yOffset +
'',top='' + yOffset +
'',left='' + xOffset
/*
4. CREATE AND OPEN THE POPUP WINDOW
*/
popupWindow = window.open('''', PopupTitle,popupFeatures);
// Set the window opener
if ( popupWindow.opener == null ) {
popupWindow.opener = self;
}
popupWindow.focus();
/*
5. WRITE THE ACTUAL IMAGE TO THE POPUP WINDOW
*/
// Create the default HTML content for the popup window
var popupContent = ""
popupContent += "\n<html><head><title>" + ImageTitle + "</title><meta
http-equiv=''Content-Type'' content=''text/html; charset=iso-8859-1''></head>"
popupContent += "\n<body style=''margin: 0px; padding: 0px;''>" // Need to
make sure the <body> has no padding or margin or the image will be
off-kilter
popupContent += "\n<div align=''center''>"
popupContent += "<img id=''popupimage''>" // This is the <img> that we
replace the src, width & height (see below)
popupContent += "</div>"
popupContent += "\n</body>"
popupContent += "\n</html>"
popupWindow.document.write( popupContent )
popupWindow.document.close()
// Now write the data for the image (src, width & height)
oPopupImg = popupWindow.document.getElementById(''popupimage''); // Create
an object reference to the <img> in the popup window
oPopupImg.src = ImageSource; // Replace the source
oPopupImg.width = ImageWidth;
oPopupImg.height = ImageHeight;
}
</script>
</head>
<body>
<h1>Image Popup Test</h1>
<input type="button" name="view" value="view" onclick="imagePopup(
''http://www.mystudios.com/art/impress/monet/monet-wheat-field-1881.jpg'' )"/> </body>
</html>
这篇关于弹出脚本！？！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
