Grow your CSS skills. Land your dream job.

Image swop linked with escape button

  • # January 13, 2011 at 5:46 am

    Hi! I’m not completely sure where to post this but I’m going with CSS since my image is called in with CSS.

    I am helping with a website that helps people that struggle with an certain addiction. This site is so that people can be open about their struggles and it be completely confidential at the same time. So I want to make an escape feature for this website when you are in a public place viewing the site.

    All that needs to happen is the background-image (called in CSS) needs to swop with another image when you press a certain keyboard button, and obviously swop back again pressing that same or maybe another button.

    Thank you!

    # January 13, 2011 at 7:51 am

    You can’t do this purely with CSS, you will need JavaScript or a library like JQuery.

    To do this in JQuery, firstly make sure you include the JQuery library. Then your code will look something like:


    $(document).ready(function(){
    $(window).keypress(function(e) {
    if(e.keyCode == 13) {
    $("#divID").css("background-image", "url('path/to/image')");
    }
    });
    });

    Not tested this code, and keyCode 13 is the Enter key.

    You can get all the keyCodes here

    # January 13, 2011 at 11:18 am

    I remember a few Windows applications having a similar feature – “Boss Mode”. It would hide the application and then try to look like Excel :-) .

    I see a few possible issues – if just the background changes then the site will still contain the same content, visible to anyone nosing around. Secondly if the background image is large it may take time to load, providing a very slow replacement.

    I suggest maybe a lightbox style approach. A full sized ‘div’ covering the page, then put in some mundane content (maybe an ‘Error 404′ style message?).

    # January 13, 2011 at 2:38 pm

    hahaha that error msg is quite funny and a good idea! yeah i remember the boss mode, mostly in games :)

    I was thinking both images would load on page load but one would be display:none if you get what i’m saying.

    I suggested to them 2 modes. one would be basic, and simply changing the image. the other would be full mode.

    full mode displays an iframe at the size of the browser window. that iframe loads an previously inserted desired URL by the user. or a default one like google.com…probably will be going with that since i’m no developer :D

    or it could open a completely new window or tab loading that same URL.

    I probably will be going with TT_Mark’s code as soon as i figure it out :P

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".