Could anyone tell me how I would make this image linked below clickable?
It's just the header of my site and I want user to be able to click on the header to return to the front page.


div#body {
font-family: Trebuchet MS, Arial;
font-size: 10pt;
text-align: left;
background-color: #FFFFFF;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
}

<div id="header" onclick="location.href='http://www.mysite.com';">

#header {
background-color: #FFFFFF;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
}

It certainly isn't the most accessible way, smoove, as a number of people disable javascript, or simply have browsers which don't support it.

Is there any other way of doing it then?

A quick Google search produces the following:

http://www.simplebits.com/notebook/2004/07/18/clickable.html
http://archivist.incutio.com/viewlist/css-discuss/40293

Use window.location.href="" or window.location.replace("")
It works in almost all browsers

It works in almost all browsers

Not if javascript is disabled by the user. :)

Don't make it a background image than...

If you do not want to use JavaScript ever, you have to stick with:
<A HREF="url.com"><IMG SRC="image.jpg"></A>
And you can put some extra CSS code to prevent underlining when mouse-over, and also you can put the image inside a div, and locate it where ever you want.

One reason why smoove might be using a background image, BurakUeda, is to avoid a horizontal scroll bar appearing in the browser when the visitor reduces their screen resolution. So, sometimes, and I suspect in this case, a standard image won't cut it. :)

You can use overflow:hidden on a containing element if you want to show a picture the traditional way without allowing it to give you a horizontal scroll.

I forget about this all the time myself, actually. It's quite handy :)

Smoove, just set that picture inside the div and link it as you normally would. Then apply overflow:hidden to that div. No trickery involved, and all of your problems are solved!

Well, we all learn something new every day. How effective is this Paul? Are there any bugs associated with it?

Not in newer browsers. I think you're safe using this for browsers released this century.

The thing is, I do seriously forget about this, and I'll end up setting backgrounds needlessly. In fact, this would account for a recent error I made coding which you brought up to me privately this morning :)

the_pm is right Jamie,

as you most probably know, you can set a strict div dimensions without any scrollbars, no matter what the contents are.

One more, rather funny (and not recommended ;) ), approach would be:

.button {
font-size: 1pt;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
background-color:#FFFFFF;
border-width:0px
border-style:none;
cursor:pointer;
}

<FORM ACTION="somedomain.com/fronpage.html">
<INPUT TYPE="submit" NAME="button" VALUE=" " CLASS="button">
</FORM>
:emlaugh:

Originally posted by the_pm
You can use overflow:hidden on a containing element if you want to show a picture the traditional way without allowing it to give you a horizontal scroll.

I forget about this all the time myself, actually. It's quite handy :)

Smoove, just set that picture inside the div and link it as you normally would. Then apply overflow:hidden to that div. No trickery involved, and all of your problems are solved!

And what is the image? Could you cut it on some images and some of them make as background? If you have big jazzed up image put it, but if not - cut on some small ones.

Originally posted by ws-infinity
And what is the image? Could you cut it on some images and some of them make as background? If you have big jazzed up image put it, but if not - cut on some small ones. You can do this, but in doing so, you've created a great deal of disjointedness in your presentation, and you've actually made more work for yourself. If you have an image that does not fully express itself properly when broken into pieces, it is best not to break it into pieces, for semantic/contextual reasons :)

Originally posted by the_pm
You can do this, but in doing so, you've created a great deal of disjointedness in your presentation, and you've actually made more work for yourself. If you have an image that does not fully express itself properly when broken into pieces, it is best not to break it into pieces, for semantic/contextual reasons :)

I thought

"If you have big jazzed up image put it" = "If you have an image that does not fully express itself properly when broken into pieces, it is best not to break it into pieces, for semantic/contextual reasons"
:)

Ah, ok then. Consider my post clarification :)

I saw someone write about JAVA... I have been having so many problems with mine. I've even uninstalled and reinstalled... I've been to their site but it doesnt tell me anything. Can someone point me in the right direction>