Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
292 views
in Technique[技术] by (71.8m points)

html - Hyperlinking an image using CSS

I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!

Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-

#header
{
    width: 1000px;
    margin: 0px auto;
    padding: 0px 15px 0px 15px;
    border: none;
    background: url(images/title.png) no-repeat bottom;
    width: 1000px;
    height: 100px;
}

I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You control design and styles with CSS, not the behavior of your content.

You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:

a#header {
  background-image: url(...);
  display: block;
  width: ..;
  height: ...;
}

You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.

You can nest your <a> tag inside <div> and then put your image inside :)

If you don't want that, you're going to have to use JavaScript to make your <div> clickable:

Document.getElementById("header").onclick = function() {
    window.location='...'; 
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...