Making Header Image clickable

  • Resolved flutwerk

    (@flutwerk)


    14 years, 1 month ago

    Hello,

    I’m using an image in order to display the blog title. So because there is no clickable text in the header which redirects you to the blog mainpage, I’d like to make the whole header-image clickable.

    I was adding this to my header.php, but appearantly it doesn’t work:

    <div id="headerimg"onclick="location.href='http://www.mydomain.com';" style="cursor: pointer;" title="Home"></div>

    my header.php looks like this now:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="verify-v1" content="s/PrC06nimhhimtebXxjLQet/RwXNUuuK+rkz2j0VuQ=" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie-styles.css" />
<![endif]--> 

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>
</head>
<body>

<div id="wrapper"> <!-- wrapper starts -->

  <div id="header"> <!-- header starts -->
	<div id="headerimg"onclick="location.href='http://www.mydomain.com';" style="cursor: pointer;" title="Home"></div>
  </div> <!-- header ends -->

    What am I missing? Anyone got an idea?

    Greetings

Viewing 7 replies - 1 through 7 (of 7 total)
  • Jose B

    (@linkaq)

    14 years, 1 month ago

    I have a similar problem. In my header I have a background image, and a foreground image as the logo. I would like the foreground image(the logo)clickable as a link that will take users to the home page. How can I make this happen?

    Thanks in advance people!

    Andrei Olsen

    (@nebulus)

    14 years, 1 month ago

    Well.. you don’t need JavaScript. I usually do it this way:

    <div id="headerimg">
  <a href="http://www.mydomain.com" title="Home">Home</a>
</div>

    And add this to CSS file:

    #headerimg a {
  display: block;
  outline: none;
  height: 200px; /* adjust this */
  width: 700px; /* adjust this */
  text-indent: -9999em; /* this will hide Home-link text */
}

    Thread Starter flutwerk

    (@flutwerk)

    14 years, 1 month ago

    Ah yes of course,

    I forgot to set headerimg in the css:

    #headerimg {
  display: block;
  outline: none;
  height: 150px; /* adjust this */
  width: 942px; /* adjust this */
  text-indent: -9999em; /* this will hide Home-link text */
}

    did the trick for me.

    Thanks nebulus

    Andrei Olsen

    (@nebulus)

    14 years, 1 month ago

    You’re welcome 🙂

    BTW, you only need to set height and width. divs are block level elements anyway, and since you have no text text-indent is kind of pointless.

    Jose B

    (@linkaq)

    14 years, 1 month ago

    Um, what? You guys lost me.

    <div id=”headerimg”>
    Home
    </div>

    Where do I find this? Are you saying I should change something in the page.php file? The index.php file. Please help me out by being a little more specific. Thanks.

    Andrei Olsen

    (@nebulus)

    14 years ago

    @linkaq It kind of depends on a theme, so it may not necessary be <div id="headerimg">. Take a look at your header.php

    Jose B

    (@linkaq)

    14 years ago

    Thanks for responding. Okay I kind of get what you mean. In my case I’ll have to add an image (.png) to use as a clickable logo from scratch. Here’s what I’ll do:

    1. I’ll create a <div id="headerimg"></div>
    2. Then I’ll add the link:
      <div id="headerimg"><a href="http://www.mydomain.com" title="Home">Home</a></div>
    3. Then I guess I’ll use your suggested CSS with my own width and height.

    The only question is, where do I place the logo image??? Please let me know what you think dude.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Making Header Image clickable’ is closed to new replies.