HTML:
<!DOCTYPE html >
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>这是啥?</title>
<link rel="stylesheet" href="css/layout.css" media="screen" />
</head>
<body>
<h1>不知道啊</h1>
<ul id="imagegallery">
<li>
<a href="image/1.jpg" title="This is One">One</a>
</li>
<li>
<a href="image/2.jpg" title="This is Two">Two</a>
</li>
<li>
<a href="image/3.jpg" title="This is Three">Three</a>
</li>
<li>
<a href="image/4.jpg" title="This is Four">Four</a>
</li>
</ul>
<img id="placeholder" height="270" width="480" src="image/sb.jpg" alt="这到底是啥?"/>
<p id="description">我也不知道啊</p>
<script type="text/javascript" src="js/mdzz.js"></script>
</body>
</html>
JS:
function prepareGallery()
{
//if(!document.getElementById) return false;
//if(!document.getElementsByTagName) return false;
//if(!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i = 0; i < links.length; i++)
{
links[i].onClick = function()
{
//showPic(this);
return showPic(this) ? false : true;
}
}
}
function showPic(whichpic)
{
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src", source);
if(document.getElementById("description"))
{
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3)
{
description.firstChild.nodeValue = text;
}
}
return true;
}
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
//window.onload = prepareGallery();
addLoadEvent(prepareGallery);
看JS编程艺术中的一个图片库小例子,写好之后点击链接仍会跳转到新的页面,无法在原本的网页中显示图片。求各位大神指教~~
<!DOCTYPE html >
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>这是啥?</title>
<link rel="stylesheet" href="css/layout.css" media="screen" />
</head>
<body>
<h1>不知道啊</h1>
<ul id="imagegallery">
<li>
<a href="image/1.jpg" title="This is One">One</a>
</li>
<li>
<a href="image/2.jpg" title="This is Two">Two</a>
</li>
<li>
<a href="image/3.jpg" title="This is Three">Three</a>
</li>
<li>
<a href="image/4.jpg" title="This is Four">Four</a>
</li>
</ul>
<img id="placeholder" height="270" width="480" src="image/sb.jpg" alt="这到底是啥?"/>
<p id="description">我也不知道啊</p>
<script type="text/javascript" src="js/mdzz.js"></script>
</body>
</html>
JS:
function prepareGallery()
{
//if(!document.getElementById) return false;
//if(!document.getElementsByTagName) return false;
//if(!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i = 0; i < links.length; i++)
{
links[i].onClick = function()
{
//showPic(this);
return showPic(this) ? false : true;
}
}
}
function showPic(whichpic)
{
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src", source);
if(document.getElementById("description"))
{
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3)
{
description.firstChild.nodeValue = text;
}
}
return true;
}
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
//window.onload = prepareGallery();
addLoadEvent(prepareGallery);
看JS编程艺术中的一个图片库小例子,写好之后点击链接仍会跳转到新的页面,无法在原本的网页中显示图片。求各位大神指教~~