Add image link overlay to Joomla Template Header

The header is one image and I'm trying to add links over the Home and Contact Us text without having to create separate images.
<?php

defined('_JEXEC') or die('Restricted access'); // no direct access

require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';

$document = isset($this) ? $this : null;

$baseUrl = $this->baseurl;

$templateUrl = $this->baseurl . '/templates/' . $this->template;

artxComponentWrapper($document);

?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

 <head>

  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<jdoc:include type="head" />

  <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />

  <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />



  <link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" />

  <!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]-->

  <!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->

  <script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>

 </head>

<body>

    <div id="art-page-background-gradient"></div>

<div id="art-main">

<div class="art-Sheet">

    <div class="art-Sheet-tl"></div>

    <div class="art-Sheet-tr"></div>

    <div class="art-Sheet-bl"></div>

    <div class="art-Sheet-br"></div>

    <div class="art-Sheet-tc"></div>

    <div class="art-Sheet-bc"></div>

    <div class="art-Sheet-cl"></div>

    <div class="art-Sheet-cr"></div>

    <div class="art-Sheet-cc"></div>

    <div class="art-Sheet-body">

<div class="art-Header">

    <div class="art-Header-jpeg"></div>



</div>

<jdoc:include type="modules" name="user3" />

<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />

<?php echo artxPositions($document, array('top1', 'top2', 'top3'), 'art-block'); ?>

<div class="art-contentLayout">

<div class="art-<?php echo artxCountModules($document, 'right') ? 'content' : 'content-wide'; ?>">



<?php

  echo artxModules($document, 'banner2', 'art-nostyle');

  if (artxCountModules($document, 'breadcrumb'))

    echo artxPost(null, artxModules($document, 'breadcrumb'));

  echo artxPositions($document, array('user1', 'user2'), 'art-article');

  echo artxModules($document, 'banner3', 'art-nostyle');

?>

<?php if (artxHasMessages()) : ?><div class="art-Post">

    <div class="art-Post-body">

<div class="art-Post-inner">

<div class="art-PostContent">



<jdoc:include type="message" />



</div>

<div class="cleared"></div>



</div>



    </div>

</div>

<?php endif; 

//index.php?option=com_bfquiztrial&view=bfquiztrial&catid=3
$string = $_SERVER['REQUEST_URI'];
 if(strpos($string, '/vodes/complete')) {
?>
<div style="padding-left:350px; padding-top:100px;"><jdoc:include type="modules" name="videoplayer" />
		<?php
		// echo artxModules($document,'videoplayer');
		 
		?>
</div>
<?php }
?>



<jdoc:include type="component" />
<?php

//index.php?option=com_bfquiztrial&view=bfquiztrial&catid=3
$string = $_SERVER['REQUEST_URI'];
 if(strpos($string, '/vodes/complete')) {
		 echo '<div style="padding-left:20px;">When you have watched the video below <a href="training-video-test-1">CLICK HERE to Take the Test.</a><br />
<br />
</div>';
		?>
</div>
<?php }
?>


<?php



 echo artxModules($document, 'banner4', 'art-nostyle'); ?>

<?php echo artxPositions($document, array('user4', 'user5'), 'art-article'); ?>

<?php echo artxModules($document, 'banner5', 'art-nostyle'); ?>

</div>

<?php if (artxCountModules($document, 'right')) : ?>

<div class="art-sidebar1"><?php echo artxModules($document, 'right', 'art-block'); ?>

</div>

<?php endif; ?>



</div>

<div class="cleared"></div>



<?php echo artxPositions($document, array('bottom1', 'bottom2', 'bottom3'), 'art-block'); ?>

<jdoc:include type="modules" name="banner6" style="artstyle" artstyle="art-nostyle" />

<div class="art-Footer">

 <div class="art-Footer-inner">

  <?php echo artxModules($document, 'syndicate'); ?>

  <div class="art-Footer-text">

  <?php if (artxCountModules($document, 'copyright') == 0): ?>

<p>Copyright &copy; 2009 Robb Smith.<br/>

All Rights Reserved.</p>



  <?php else: ?>

  <?php echo artxModules($document, 'copyright', 'art-nostyle'); ?>

  <?php endif; ?>

  </div>
 </div>

 <div class="art-Footer-background"></div>

</div>



    </div>

</div>

<div class="cleared"></div>

<p class="art-page-footer"></p>

</div>



</body> 

</html>

Open in new window

Picture-1.png
RedcurbAsked:
Who is Participating?
 
Amanda WatsonWeb DeveloperCommented:
Have you considered adding a module position up in the header and adding the image you want with links within it.  You could add the html module and simply add the html code within that module and position it up in the header.
You could create a new module position called "topbuttons" for example and then publish you html module to that position.

If you don't know how to add a module position read this:
http://www.solarenergyhost.com/content/view/187/200/
0
 
j-b-tCommented:
I'm not clear where the Home and Contact Us  text is - is it in your image?  

0
 
techsathishCommented:
Hi,

Use image map for creating link in images.

http://www.elated.com/articles/creating-image-maps/

http://www.javascriptkit.com/howto/imagemap.shtml

See these pages...
0
 
techsathishCommented:
Hi did u got the solution...
0
 
Amanda WatsonWeb DeveloperCommented:
Maybe try this
Changed template property of logo from image to text.

Then changed the following section of the file: httpdocs/templates/your template/layouts/blocks/header.php

or something like that....just try to find header.php

 

Then it may look like this:

 

            <div class="logo-text">

                        <h1><a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>

                        <p class="site-slogan"><?php echo $sloganText;?></p>

            </div>

 

To …

 

            <div class="logo-text">

                        <h1><a href="" title="<?php echo $siteName; ?>"></a></h1>

                        <img src="templates/yourtemplate/images/logo.gif" width="964" height="110" border="0" usemap="#Map">

                        <map name="Map">

                                    <area shape="rect" coords="1,1,250,109" href="" alt="Your name">

                                    <area shape="rect" coords="660,69,753,100" href="links" alt="home">

                                    <area shape="rect" coords="761,69,870,100" href="contact" alt="contact">

                        </map>

            </div>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.