asked on

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

ASKER CERTIFIED SOLUTION

Amanda Watson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

j-b-t

I'm not clear where the Home and Contact Us text is - is it in your image?

techsathish

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...

techsathish

Hi did u got the solution...

Amanda Watson

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>