CODEWITHSUNDEEP
javascriptaddeventlistener
Matt
Matt

Reputation: 565

javascript to enlarge img

I've got some problems while trying to change the size of an image when 'mouseover' occurs.

I know it can be done by css, but I need to realize it by js.

JS Codes:

// id is passed to this function.
...
var content = document.getElementById("content");
var li;
// generate lists of img from db.
li = document.createElement("li");      
li.innerHTML = '<img src="' + id + '" />';
content.appendChild(li);
addDomListener(li, 'mouseover', function(){
    li.style.height = '600px';
    li.style.width = '800px';
});

HTML codes:

<div>
  <ul id="content">
  </ul>
</div>

seems right, but it doesn't work. I suspect the problem is 'li.style.height'. Could anyone tell me the correct way to realize it? Thx!

Upvotes: 1

Views: 143

Answers (3)

Bergi
Bergi

Reputation: 664971

Change the size of the <img>, not of the <li>:

var li = document.createElement("li");
var img = document.createElement("img");
img.src = id;
li.appendChild(img);
content.appendChild(li);
addDomListener(li, 'mouseover', function(){
    img.height = '600px';
    img.width = '800px';
});

Upvotes: 1

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50603

You were changing the height and width of li element itself, instead of the img element, for that replace your following code:

li.style.height = '600px';
li.style.width = '800px';

for this one:

li.firstChild.style.height = '600px';
li.firstChild.style.width = '800px';

Upvotes: 3

Louis Chatriot
Louis Chatriot

Reputation: 2051

You are changing the dimensions of the li element, not the image itself, so the behaviour is expected. You need to get a pointer to your image first.

In addition, you should use jQuery for manipulating the DOM and modifying an element's style on a mouse event. It will make your like much easier.

Upvotes: 2

Related Questions