Search code examples
javascriptimagebackgroundclickable

Javascript to make background image clickable?


I can't use a div because the CMS I am using won't allow html into the theme style (it's using a weird structure in its coding) and the only thing that I found that has worked is javascript but I don't know what javascript code will enable a clickable background image.

Any ideas?

<meta name="description" content="description here"> 
<script type="text/javascript"> 
    document.backgroundImage = "url('http://mydomain.com/image.jpg')";
    function callback() { 
        location.href = "http://mylink.com";
    } 
    document.addEventListener("click", callback, false);
</script> 
<script type="text/javascript"> //google analytics code </script>

Solution

  • this is the background of something right? This something has to receive the click event handler.

    cheers.

    edit: adding example:

    Hypothesis:

    o.id = "OhMyCuteness";
    o.style.backgroundImage = "url('...')";
    

    then:

    o.addEventListener("click", callback, false);
    

    and:

    function callback(clickEvent) {
        alert("They clicked meeeee buhuhuhu: " + clickEvent.target.id);
    }
    

    Edit2: in the case your document has a background this is exactly the same, use the document instead of the element "o" as a target for addEventListener.