Change Image Size On Javascript Event

I am using a template that I bought offline that uses JavaScript. I am not that great with JavaScript and I would like to make it so that the logo goes from being small to larger a

Solution 1:

Give the logo <img /> an id, such as:

<img id="siteLogo" src="images/logo.png" alt="" height="200">

Add a <script> tag, such as this:

<scripttype="text/javascript">var img = document.getElementById("siteLogo");
    img.addEventListener('click', function () {
        if (img.height != 200) {
            img.height = 200;
        } else {
            img.height = -1;
        }
    });
</script>

The above will cause the logo to toggle between big and small when clicked.

You would then have to play around with the <header> to not have a fixed height; this'll make it resize when the logo changes size.

Solution 2:

you can use some jquery to change the property of your image. This can be done with some ajax :

jquery(function () {

    $("#your image id").click(function () {

        //Then you can change the style properties of your image, this is how you can do it.

        $("#image id you want to modify").attr("style","...");

        //the ... in the ", this is there you will edit your style.

    });

});

So this is a way you can do what you want to do, but you have to know that you will have to link a jquery librairie if you want to use jquery. There is documentation about jquery.

Edit: What you can do too, is to create an external js file that you can call ajax.0-1.js or whatever, and then link this file to your html page.

Solution 3:

I see you load jQuery on your page, that's good because it makes this task simple ;)

just before </body>

<scripttype="text/javascript">
    $(document).ready(function(){
        $('.navigation li').on('click', function(){
                $('#img-logo').css('width','212px');
                $('#img-logo').css('height','70px');
        });
    });
</script>

then change your html:

<img src="http://yakko.cs.wmich.edu/~brain/SAS/images/logo.png" alt="logo"id="img-logo"/>

you can find jsfiddle here: http://jsfiddle.net/arqjn/

you can add some effects on css-transition if u want make sure to use a good image (double-sized on normal view) or you will see blur on zoom