CODEWITHSUNDEEP
javascript
Am4d
Am4d

Reputation: 25

How to make images clickable in javascript?

I recently setup custom rotational banners on my blogger using this code I come across but I can't seem to figure out how to make the images clickable to link to the homepage. Any help would be much appreciated.

Heres the code:

<script type='text/javascript'>
var HeaderImage= new Array()

HeaderImage[0]=&quot;http://Example1.png&quot;
HeaderImage[1]=&quot;http://Example2.png&quot;
HeaderImage[2]=&quot;http://Example3.png&quot;
HeaderImage[3]=&quot;http://Example4.png&quot;
HeaderImage[4]=&quot;http://Example5.gif&quot;
HeaderImage[5]=&quot;http://Example6.png&quot;
HeaderImage[6]=&quot;http://Example7.png&quot;
var random=Math.round(6*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>

Its working now guys. I just wasn't sure exactly where to put the tags everyone was teling me. Thanks very much for all your help.

Upvotes: 1

Views: 12066

Answers (3)

jfriend00
jfriend00

Reputation: 707158

This code has issues with &quot instead of ". But aside from that, what this code is doing is setting the background image for an object with id="header". To make that object clickable, you can surround the header object with an <a> tag. For example, if the header object was a div, then you would use something like this:

<a href="xxx"><div id="header"></a></a>

If there's some reason why you don't want to use a link to make the area clickable (which is the simplest way to do it), then you could also use javascript like this:

document.getElementById("header").onclick = function() {
    window.location = "http://my.example.com";
}

This would either be placed after the page HTML (so the object in question is already loaded when this code runs).

If you show us the actual HTML that includes the header object, we could be more specific about how to make it clickable.

From reviewing your HTML, if you want to make it clickable with just your HTML, you can change this part of your HTML:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
</b:section>

to this (which just surrounds it with an <a> tag:

<a href="http://my.example.com">
    <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
        <b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
    </b:section>
</a>

Upvotes: 4

tjarratt
tjarratt

Reputation: 1690

Well, you don't actually have any image elements, so that's your first problem.

The simplest solution (to make images clickable) is to wrap images in anchor tags with the href attribute set to your index. What it seems like you're actually doing is dynamically writing some css for an element with id #header and setting its background to the image. When you do this, there are no actual img elements, so there's nothing for a user to click on other than the element itself.

Without seeing any more of your markup, I'd suggest just wrapping your #header element in an anchor like this <a href='/'><some_element id='header'></some_element></a>

Upvotes: 1

Farzher
Farzher

Reputation: 14563

Idk how Blogger works, so I'll just tell you the quick and dirty way to get it working with javascript.

Put this after the code you showed us, even after the closing script tag

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
   $('#header').click(function() {
        window.location = '/';
    }); 
});
</script>

Upvotes: 0

Related Questions