Search code examples
javascriptimageurltumblr

Javascript if url then image

Hello, I do not know very much about javascript, not much at all to be specific, and i'm french (this means sorry for my english).

since i don't know a lot about html and everything, i'm just changing the css and html on tumblr existing theme (i know it's not the very best solution but it's working for me and i'm improving slowly my knowledge about this world)

so in tumblr you have several pages already created like the one that regroup all your post with the same tag, this page is called http://myblog.tumblr.com/tagged/mytag

Here is my problem : i would like to change the header for each of these pages !

I don't have access to the php code (wich seemed to be the best solution...) here is when i have one header :

<body>
  <div id="header">
     <a href="/"><img src="{image:Header}"/></a> 
  </div>
</body>

i have code the css so that my header looks fine to me

to answer my problem, i tried javascript :

<body>
  <div id="header">
    <script>

var image = new Array("{image:Header}", "http://static.tumblr.com/my-other-image.jpg")

if(document.URL.indexOf("/") >= 0) {
    image.src = "{image:Header}"
    }

if(document.URL.indexOf("/tagged/mytag1") >= 0) {
    image.src = "http://static.tumblr.com/my-other-image.jpg"
    }

    </script>            
  </div>
</body>

obviously it didn't work, and you may be laughing watching what i wrote... since i only have 3 or 4 pages i'd like to change, i'm ok with the "dirty solution" with too much code, and i just think that i need an "else" for all the other pages !

Thank you for telling me how to make it work and sorry to take some of your time for a simple thing like this wich may not be even possible. and sorry for talking about my life in my terrible english.

Thank you

Solution

  • you must create a image element, then append to the dom:

    <body>
    <div id="header"></div>
    <script>
        var uris = ["{image:Header}", "http://static.tumblr.com/my-other-image.jpg"];
        var image = document.createElement("img");
        if (document.URL.indexOf("/") >= 0) {
            image.src = uris[0]
        }
        if (document.URL.indexOf("/tagged/mytag1") >= 0) {
            image.src = uris[1]
        }
        document.getElementById("header")
            .appendChild(image);
    </script>
</body>