WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Making Header Image clickable (8 posts)

  1. Flutwerk
    Member
    Posted 4 years 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

  2. Jose B
    Member
    Posted 4 years 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!

  3. Andrei Olsen
    Member
    Posted 4 years 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 */
    }
  4. Flutwerk
    Member
    Posted 4 years 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

  5. Andrei Olsen
    Member
    Posted 4 years 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.

  6. Jose B
    Member
    Posted 4 years 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.

  7. Andrei Olsen
    Member
    Posted 4 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

  8. Jose B
    Member
    Posted 4 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.

Topic Closed

This topic has been closed to new replies.

About this Topic