CODEWITHSUNDEEP
javascripthtmlcssdom-eventsimage-size
user1574685
user1574685

Reputation: 181

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 as soon as the user clicks on one of the links above example:

Before: Before

After: After

As I said before I am not good at JavaScript, I am fairly good at HTML and CSS, but stil a little grey on advanced CSS. Is there a way I can do this on page change. The code for this is all one single page and does not reload from server so I can't set an event via "page load". The loading is done via JavaScript. For a live demo you can go here: Logo Change Site

Upvotes: 0

Views: 7768

Answers (3)

mtt
mtt

Reputation: 1717

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

just before </body>

<script type="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

Upvotes: 1

Vinc 웃
Vinc 웃

Reputation: 1257

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.

Upvotes: 1

Jesse
Jesse

Reputation: 8759

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:

<script type="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.

Upvotes: 1

Related Questions