Recent Topics
  1. b2evolution CMS Support Forums
  2. b2evolution Support
  3. Templates, skins, XHTML and CSS
  4. Clickable banner tabs

Clickable banner tabs

1 Mar 10, 2007 10:36    

My b2evolution Version: 1.8.6

Okay, this is more of a design question but I know there are some really savy design experts out there that might be able to help me with this. If you visit my blog ([url=http://www.theparchment.org]http://www.theparchment.org[/url]) you will see at the top a few menu items (About | Podcast | Covenant Radio | etc). Anyhow, what I want to do is move those to the banner as a image (eadch link would be an image) and make each image "clickable" and thus correspond to the page it represents. Understand?

Okay, if you understand HOW can I do this? I have tried to create an image of each item on my currently existing image but cannnot get the hotlink to work. Ideas?

Thanks!

W. Hill

Back to top

2 Mar 10, 2007 11:22

See if this gets you started :-

#header{
position:relative;
}

#header ul,
#header li{
padding:0;
margin:0;
list-style:none;
}

#header li{
position:absolute;
z-index:999;
}

#header li a{
display:block;
width:100%;
height:100%;
background:center left no-repeat;
}

#header li a:hover{
background-position:center right;
}

#header li span{
display:none;
}

/* repeat for all buttons */
#header #hdr_about{
bottom:0;
left:50px;
width:100px;
height:40px;
}

#header #hdr_about a{
background-image:url( a_graphic.jpg );
}

<div id="header" onclick="location.href='http://www.theparchment.org';" style="cursor: pointer;"> 
	<h1><a href="http://theparchment.org/index.php" title=""></a></h1>
<ul>
<li id="hdr_about"><a href="/index.php/2005/01/01/about"><span>About Me</span></a></li>
<li id="hdr_rtrc"><a href="http://www.rtrc.net/"><span>RTRC</span></a></li>
<li id="hdr_gallery"><a href="http://gallery.theparchment.org/"><span>Photo Gallery</span></a></li>
<li id="hdr_radio"><a href="http://www.covenantradio.com/"><span>Covenant Radio</span></a></li>
<li id="hdr_podcasts"><a href="/index.php/2006/01/01/podcasts"><span>Podcasts</span></a></li>
</ul>
</div>

¥

Back to top

3 Mar 10, 2007 23:01

That caused my text to go down the left side of the banner -- what I would like is for it to be centered at the bottom of the banner.

Back to top

4 Mar 11, 2007 07:08

How about this idea? Instead of using your "banner" jpg as a background image, bring it to the forefront and do an image map that includes the "buttons" built in....

I just created one for you on the fly with the html that you can punch in (or change to suit your fancy). You might want to take some time and do a better job with the art, but this gives you the idea. 


<body> 

<div>
<body> 
<center>

<IMG SRC="headertest.jpg" WIDTH=760 HEIGHT=200 BORDER=0 ISMAP USEMAP="#headertest.jpg">

<MAP NAME="headertest.jpg">
<AREA SHAPE="RECT" COORDS="65,162,189,192" HREF="http://theparchment.org//index.php/2005/01/01/about" ALT="All about me. I'm Willam F. Hill, Jr. Our family are members of Calvary Reformed Presbyterian Church in Hampton, Virginia" OnMouseOver="window.status=''; return true" OnMouseOut="window.status=' '; return true">
<AREA SHAPE="RECT" COORDS="233,163,356,191" HREF="http://gallery.theparchment.org/" ALT="The Hill Family photos. Plus, 335 photos from  mission trips. Also, there's our entire family photo gallery including some vacation pictures. There are a lot of photos to enjoy." OnMouseOver="window.status=''; return true" OnMouseOut="window.status=''; return true">
<AREA SHAPE="RECT" COORDS="427,163,549,192" HREF="http://www.covenantradio.com/" ALT="The goal of Covenant Radio is to implore the Church of the Lord Jesus Christ to start thinking deeply. It's about the issues of the covenant. Our approach to baptism, communion, eschatology, and worship." OnMouseOver="window.status=''; return true" OnMouseOut="window.status=''; return true">
<AREA SHAPE="RECT" COORDS="236,31,354,62" HREF="http://theparchment.org/index.php?cat=48" ALT="Guides to studying the Bible. Everything to aid in daily Scripture reading and study. These are tools for learning the Bible, for example, a recent article was about studying Greek and another was on the Gospel of John." OnMouseOver="window.status=''; return true" OnMouseOut="window.status=''; return true">
<AREA SHAPE="RECT" COORDS="428,30,543,63" HREF="http://theparchment.org//index.php/2006/01/01/podcasts" ALT="List of Podcasts on The Parchment. If you are using iTunes you can automatically subscribe. It's true Audio Blogging on The Parchment." OnMouseOver="window.status=''; return true" OnMouseOut="window.status=''; return true">
<AREA SHAPE="RECT" COORDS="78,30,192,64" HREF="http://www.rtrc.net/" ALT="The Reformed Theology Resource Center. The place for your one stop Reformed Faith browsing. A co-sponsor of Covenant Radio, our new internet broadcasting program." OnMouseOver="window.status=''; return true" OnMouseOut="window.status=''; return true">

</MAP></center>
</div>

I have uploaded the modified header image into a demo area that you can play with located here (give it a try... those are "live" links):

http://www.samredman.com/parchment/

If you want that one... just right click on the image to get it (that vanilla html up there is all that is needed to drive that image map. No javascript is needed). An image map is one of many possible ideas, but I like it; it is a very simple concept that makes your graphics more dynamic (and is easy to code).

You would have to play around with how you would stick that properly into your _main.php for your skin, but I have done it on mine and it worked great (after some fritzing around to make sure it was in the right place and didn't conflict with the b2 code).

(I edited this a moment ago just to improve the html code a bit, so if anyone saw it earlier, what's up now is better.).

Sam

Back to top

5 Mar 11, 2007 10:38

Yahoo!! That is what I was looking for...

I took your idea and implemented in my own ideas and the results are up.

Thanks so much! :)

Back to top


Form is loading...