Changing image size during mouse hover

Question

I am currently trying to make it so that if i hover over the li, the image changes its size. I managed to pull out a code from a website that changes the image size if i hover over the img which looks like the following:

<div class="profiles">
    <ul>
        <li class="portraitsLeft" id="one" align="left">
            <a href="../project/profile1.html">
                <img src="../project/images/portraits/img1.jpg" width="100" onmouseover="this.width=150;" onmouseout="this.width=100" align="middle" alt="Img1"/>
            </a> 
            Character 1
        </li>
    </ul>
</div>

What i don't understand is what this is pointing at. I assumed it points at img but it doesn't seem to work. How should I change the code so that i can change the image size when i hover over the li or a instead of this? Thanks in advance.

"this" is referring to the element currently being referred to by the event....in this case the onmouseover event is referring to "this" image that is being moused over — The One and Only ChemistryBlob, Jul 27 '14 at 17:39
if you prefer a zoom effect -- http://jsfiddle.net/y4yAP/ -- http://stackoverflow.com/questions/20078250/simple-jquery-hover-enlarge — Tasos, Jul 27 '14 at 17:43
Are you sure the above isn't working? Take a look at this [JSFiddle](http://jsfiddle.net/jVeju/2/). It validates what you did and works. — G--, Jul 27 '14 at 18:00

G-- · Accepted Answer · 2014-07-27T18:12:45.890

There's no need for CSS(although it is cleaner) in this case. You can do this using a name attribute.

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" width="150" height="100" name="OrteliusWorldMap"
onmouseover="OrteliusWorldMap.width='300';OrteliusWorldMap.height='200';"
onmouseout="OrteliusWorldMap.width='150';OrteliusWorldMap.height='100';" />

JSFiddle Link.

EDIT:

You can now change it anywhere you like thanks to the name attribute.

<div class="profiles">
    <ul>
        <li class="portraitsLeft" id="one" align="left">
            <a href="google.com" onmouseover="OrteliusWorldMap.width=150;" onmouseout="OrteliusWorldMap.width=100">
                <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" width="100" name="OrteliusWorldMap">
            </a> 
            Character 1
        </li>
    </ul>
</div>

JSFiddle Link.

The issue with trying to use this elsewhere is that this will try to reference the current HTML element. See the following for more information on this and how the onMouseOver event works.

Thank you! This really helped + I learned something new and handy today! — user3748353, Jul 27 '14 at 18:11

imbondbaby · Answer 2 · 2014-07-27T17:46:08.927

Why not use CSS?

<img id="image" src="../project/images/portraits/img1.jpg" align="middle" alt="Img1"/>

#image{
    width:50px;
    height:50px;
}

#image:hover{
    width:100px;
    height:100px;
}

JSFiddle Demo

Or you can change your code to this:

<img id="image" src="https://www.google.com/images/srpr/logo11w.png" onMouseOver="this.style.width='200px'" onMouseOut="this.style.width='100px'" alt="Img1"/>

Use this.style.width='200px'

JSFiddle Demo

score 2 · Answer 3 · answered Jul 27 '14 at 17:40

Alternatively to CSS, you could go the jQuery route:

$("img").mouseover(function() {
    $("img").css({ width: '150px', height: '150px' });
});

This would also allow you to add some animations on hover if you wanted that.

This would require that you include the jQuery package in your HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

score 2 · Answer 4 · answered Jul 27 '14 at 17:41

2

You may try like this:

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" alt="test" />

img {
    width: 100px;
}
img:hover {
    width: 300px;
}

Working DEMO

answered Jul 27 '14 at 17:41

Rahul Tripathi

168,305
31
280
331

first of all, thank you for your help. however, i think that this answer isnt really what i needed help on (sorry if the question wasnt specific enough). from your code, i think that it only changes the image size when i hover over the img if im not mistaken. I wanted to know how to change it so that a specific image thats inside the li changes its size if i hover over any part of the or
. i edited the question so that its more specific. thank you

user3748353

Jul 27 '14 at 17:52

score 2 · Answer 5 · answered Jul 27 '14 at 23:42

You can try using Javascript, without using any "this" keyword.

<html>
 <body>
    <ul>
       <li>
          <a href="" onmouseover="img_increase()" onmouseout="img_decrease()">Character</a>         
          <img id="image" src="../project/images/portraits/img1.jpg" width="100" >          
       </li>
    </ul>

   <script>

        function img_increase()
        {
            document.getElementById("image").style.width="150px";
        } 

        function img_decrease()
        {
           document.getElementById("image").style.width="100px";
        }

    </script>

 </body>

</html>

score 1 · Answer 6 · answered Jul 27 '14 at 17:49

1

'this' is a keyword used by most proramming languages including java and javascript. 'this' keyword is used to point the current object. 'this' is always a reference to the object on which the method(function) was called.

answered Jul 27 '14 at 17:49

Ajit Singh

390
4
14

Changing image size during mouse hover

6 Answers6

Linked