基于单击缩略图图像显示div内的内部html页面

时间：2013-12-24 19:01:23

标签： javascript html

我正在创建一个网站来展示我正在销售的产品，而我正在努力使用产品页面。我希望每个产品都有小图片，并且能够点击它们，然后在缩略图下方的单独div标签中显示完整的产品信息。

我发现了一段我用过的代码，它在Firefox中工作正常，但在IE中它不显示缩略图，链接不起作用。

我花了3天的谷歌搜索和搜索，我找不到解决方案。我附上了我的完整代码，请有人指出我正确的方向吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Seascape 
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20131201

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vapes</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" />
<link href="defaultvape.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />

<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

<style type="text/css">
#leftcolumn{
    float: left;
    width: auto;
    height: auto;
    border: 3px none black;
    padding: 5px;
    padding-left: 5px;
    margin-left: 132px;
    margin-top: -61px;
    margin-right: 14px;
    min-width: 1300px;
    min-height: 300px;
}

#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}

#leftcolumn a:hover{
    background-color: #FFCC00;
}

#rightcolumn{
    float: left;
    width: 1200px;
    min-height: 400px;
    border: 3px solid black;
    margin-left: 66px;
    padding: 5px;
    padding-bottom: 5px;
    margin-top: 12px;
    margin-bottom: 143px;
    min-width: 1450px;
    background-color: #FFFFFF;
}

* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>
</head>
<body>
<div id="header-wrapper">
    <div id="header" class="container">
        <div id="logo">
            <h1><a href="#">Vape culture</a></h1>
        </div>
        <div id="menu">
            <ul>
                <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a></li>
                <li><a href="#" accesskey="2" title="">Vapes</a></li>
                <li><a href="#" accesskey="3" title="">Juice</a></li>
                <li><a href="#" accesskey="5" title="">Accessories</a></li>
                <li><a href="#" accesskey="5" title="">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="featured">


<div id="leftcolumn">
<div id="Thumbnail1"><a href="javascript:ajaxpage('ItasteEP.html', 'rightcolumn');">

  <img src="images/EP/thumbnail.png" width="230" height="170"  alt=""/></a></div>

  <div id="leothunb"><a href="javascript:ajaxpage('NewProductDescription.html', 'rightcolumn');"><img src="images/LeoPro/leothumbnail.png" width="230" height="170"  alt=""/></a></div>

    <div id="VVthumb"><a href="javascript:ajaxpage('ItasteVV3.html', 'rightcolumn');"><img src="images/VV/VVthumbnail.png" width="230" height="170"  alt=""/></a></div>
<div id="MVDthumb"><a href="javascript:ajaxpage('ItasteMVP2.html', 'rightcolumn');"><img src="images/mvp/MVPthumbnail.png" width="230" height="170"  alt=""/></a></div>
<div id="SVDthumb"><a href="javascript:ajaxpage('ItatseSVD.html', 'rightcolumn');"><img src="images/sVd/sVdthumbnail.png" width="230" height="170"  alt=""/></a></div>
<div id="VTRthumb"><a href="javascript:ajaxpage('ItasteVTR.html', 'rightcolumn');"><img src="images/tvr/VTRthumbnail.png" width="230" height="170"  alt=""/></a></div>

<div id="new134tag"><a href="javascript:ajaxpage('Itaste134.html', 'rightcolumn');"><img src="images/134/134thumbnail.png" width="230" height="170"  alt=""/></a></div>
<div id="coolfire1thumb"><a href="javascript:ajaxpage('CoolFire1.html', 'rightcolumn');"><img src="images/coolfire1/Coolfire1thumbnail.png" width="230" height="170"  alt=""/></a></div>
<div id="Coolfire2thumb"><a href="javascript:ajaxpage('CoolFire2.html', 'rightcolumn');"><img src="images/coolfire2/Coolfire2thumbnail.png" width="230" height="170"  alt=""/></a></div>
<div id="AIOthumb"><a href="javascript:ajaxpage('AOI.html', 'rightcolumn');"><img src="images/aio/aoithumbnail.png" width="230" height="170"  alt=""/></a></div>


  </div>



<div id="rightcolumn"><h3><img src="InnokinHeaderV1.png" width="1450" height="400"  alt=""/></h3>
</div>

<div style="clear: left; margin-bottom: 1em"></div>
</div>
<div id="banner-wrapper">
    <div id="banner" class="container">
        <div class="box-left">
            <h2>Mauris vulputate dolor nibh</h2>
            <span>Donec leo, vivamus fermentum praesent urna congue rutrum</span> </div>
        <div class="box-right"> <a href="#" class="button button-big">Etiam posuere</a></div>
    </div>
</div>

<div id="copyright" class="container">
    <p>Copyright (c) 2013 Sitename.com. All rights reserved. | Photos by <a href="http://fotogrph.com/">Fotogrph</a> | Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a>.</p>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

如果要在点击时动态设置#rightcolumn中的文本，可以使用jQuery。

首先，包括jQuery，如：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后，为每个图像使用.click事件处理程序来处理鼠标单击并从指定的HTML文件加载文本。 例如，对于第一个div（＃Thumbnail1）：

为图像分配ID，如：

<img src="images/EP/thumbnail.png" width="230" height="170"  alt="" id="img_1" />

然后，在区域中，将onclick处理程序定义为：

$( "#img_1" ).click(function() {
$('#rightcolumn').load('ItasteEP.html');
});

对所有图像重复此步骤。

相关问题
最新问题