Javascript 更改主图像的缩略图图像_Javascript_Html

Javascript 更改主图像的缩略图图像

javascript html

Javascript 更改主图像的缩略图图像,javascript,html,Javascript,Html,我有语法错误吗，可能是我在用记事本++？当我单击缩略图时，没有发生任何事情我是javascript新手，所以可能就是这样。我的总体想法是创建一个事件“changeimage”，onclick会将我的主图像的源更改为缩略图图像，使其更大。 <head> <script type="text/javascript"> function changeimage(event) { event = event; var targetElem

我有语法错误吗，可能是我在用记事本++？当我单击缩略图时，没有发生任何事情我是javascript新手，所以可能就是这样。我的总体想法是创建一个事件“changeimage”，onclick会将我的主图像的源更改为缩略图图像，使其更大。

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>


函数更改图像（事件）
{
事件=事件；
var targetElement=event.target；
如果（targetElement.tagName==“IMG”）
{ 
document.getElementbyid（“Main”）.src=targetelement.getattribute（“src”）；
} 
} 
#主要
{
高度：540px；
宽度：540px；
}
.imgthmb1
{
高度：100px；
宽度：100px；
}

是的，您有语法错误：

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>

targetElement

在以下行中拼写为

targetElement

：

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>

将其更改为以下内容：

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>

document.getElementbyid("Main").src = targetElement.getattribute("src");

在相关注释中，以下行是无关的，可以删除：

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>

Javascript区分大小写

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>

代替

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>

document.getElementbyid("Main").src = targetelement.getattribute("src");

写

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>

您的html标记还有一个错误：

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>

<img id="Main" src="img/rickroll1.jpg" </img>

应该是

 <head>
  <script type="text/javascript">
  function changeimage(event) 
  {
    event = event;

    var targetElement = event.target;

    if (targetElement.tagName == "IMG")
    { 
    document.getElementbyid("Main").src = targetelement.getattribute("src"); 
    } 
  } 
    </script>
 <meta charset="utf=8">
<style>
#Main
{
height:540px; 
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>

  <body>
  <img id="Main" src="img/rickroll1.jpg" </img>
   <br />
    <div id="thumbnail" onclick="changeimage(event)">
    <img class="imgthmb1" src="img/rickroll1.jpg" />
    <img class="imgthmb1" src="img/rickroll2.jpg" />
    <img class="imgthmb1" src="img/rickroll3.jpg" />
    <img class="imgthmb1" src="img/rickroll4.jpg" />
    <img class="imgthmb1" src="img/rickroll5.jpg" />
    </div>

  </body>

</html>

<img id="Main" src="img/rickroll1.jpg">

将事件作为参数发送是什么意思？这是不正确的：

。它应该是

change document.getElementbyid（“Main”）.src=targetelement.getattribute（“src”）；到document.getElementbyid（“Main”）.src=targetElement.getattribute（“src”）；设置src attr时，没有正确地重新引用targetElement。您拼写为targetelement而不是targetelement。只要将E-in元素大写，它就会起作用