CODEWITHSUNDEEP
javascripthtmlhover
VictorianAutumn
VictorianAutumn

Reputation: 23

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

I am trying to get an image to get bigger with a roll over, then if clicked display text, and clicking on the image again with make the text go away. I am unable to get the text part to work. I can only get the image to get bigger with a roll over. Here is my HTML and JS codes.

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." ;
}

Upvotes: 2

Views: 115

Answers (2)

Paul Roub
Paul Roub

Reputation: 36438

You're missing on onclick to make handleClickPar() do anything.

In that function, check to see if hippo is empty - if so, set the text. If not, clear it out.

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>

Upvotes: 1

jlcharette
jlcharette

Reputation: 900

The correct html document structure is:

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

And use onclick="" for your handleClickPar() function.

Upvotes: 0

Related Questions