滚动时使图像变大，单击时文本变大 javascript

Question

我正在尝试通过翻转使图像变大，然后如果单击显示文本，然后再次单击图像使文本消失。我无法让文本部分工作。我只能通过翻转使图像变大。这是我的 HTML 和 JS 代码。

HTML:

<head>
<script src="picturetask.js"> </script> 
<body>
<h1 style="text-align:center">Picture Manipulation</h1>
<center>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="../images/hippo.png" alt="Hippo" height="200" id=hippo>
<div id=hippos>
</div>
</center>
</body>
</head>

JS:

function bigImg(x) {
    x.style.height = "410px";  
}

function normalImg(x) {
    x.style.height = "200px";
}
function handleClickPar() {
     document.getElementById("hippos").innerHTML = "Picture of a Hippo." ;
}

Answer 1

正确的html文档结构是：

<!doctype html>
<html>
<head>
    <title>Hello World</title>
    <script src="yourscript.js"></script>
</head>
<body>
    <!-- Put your content here -->
</body>
</html>

并为您的 handleClickPar() 函数使用 onclick=""。

Answer 2

onclick 你没能让 handleClickPar() 做任何事情。

在该函数中，检查 hippo 是否为空 - 如果是，则设置文本。如果没有，请清除它。

function bigImg(x) {
  x.style.height = "410px";
}

function normalImg(x) {
  x.style.height = "200px";
}

function handleClickPar() {
  var el = document.getElementById("hippos");

  if (el.innerHTML.trim())   // if it's not empty or whitespace
    el.innerHTML = "";       
  else
    el.innerHTML = "Picture of a Hippo.";
}

<div id=hippos>
</div>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" onclick="handleClickPar();" border="0" src="http://placehold.it/200" alt="Hippo" height="200" id=hippo>

滚动时使图像变大，单击时文本变大 javascript

Getting am image to get larger with roll over, and text when clicked javascript

html

javascript

hover