Jonathan R. Walcher
Feb-15-2007, 01:54 PM
A couple of people were interested in how I created my banner with built-in links so here is a brief, first attempt at an How-To article.....
Background
The idea for this came, in part, from the many examples of websites shown on www.live-books.com (http://www.live-books.com), an excellent company that creates custom portfolio-centric websites. I wasn’t satisfied with the Banner/Navbar combination that I was using; I wanted something more compact and minimal so I began the search on how to create an image sliced banner that would allow me to combine the links and my banner into a single item on my page. In the past, I would have just opened Adobe ImageReady and gone to work on slicing the image up as I pleased and putting in the necessary link information. This time though, I didn’t want to mess with the numerous images that manual slicing creates and I wasn’t confident that the table code that ImageReady produced would work in the SmugMug setting. After a bit of searching I found this (http://alistapart.com/articles/sprites/) article by Dave Shea that in turn provided the code below….many thanks to him for writing such a great article.
The Code
I’m not going to provide detailed explanations as to what each item does; Dave’s article does a thorough job of that.
Things to have before you start copying and pasting:
The URL to your banner image.
The width and height of the entire image in px.
The relative locations of the links within the image measured in px starting from the left of the image. Note: while I didn’t use the HTML code or images that ImageReady created, the slicing function allowed me to get the exact location for each “panel” or link within my banner. If you have a tool that will allow you to do this I highly suggest you use it. It’s not necessary though; with a bit of patience and the borders of the panels turned on (example below) you could probably guess your way through this part. /* Beginning of CSS section copy & paste -- copy white text only */
#BannerImg {
width: (width-of-entire-image-here-remove-parenthesis)px; height: (heighth-of-entire-image-here-remove-parenthesis)px;
background: url(link-to-your-image-goes-here);
margin: 0px auto; padding: 0;
position: relative;}
#BannerImg li {
margin: 0; padding: 0; list-style: none;
position: absolute; top: 0;}
#BannerImg li, #BannerImg a {
height: (heigth-of-entire-image-here-remove-parenthesis)px; display: block;}
#BannerImg a {border: solid 1px #f00;}
/* To remove the borders around the panels remove the last line above*/
/* Each panel represents a block. These measurements are provided by example only. They are specific to my banner and will need to be modified to match the “link” locations your banner. */
#panel1b {left: 0; width: 501px;}
#panel2b {left: 501px; width: 58px;}
#panel3b {left: 559px; width: 49px;}
#panel4b {left: 608px; width: 41px;}
#panel5b {left: 649px; width: 66px;}
#panel6b {left: 715px; width: 52px;}
/* End of CSS section C&P */
/* Beginning of Header Section C&P – Replace with your links of course*/
<ul id="BannerImg">
<li id="panel1b"><a href="Your-HomePage-Link"></a></li>
<li id="panel2b"><a href="Gallery 1 Link"></a></li>
<li id="panel3b"><a href="Gallery 2 Link"></a></li>
<li id="panel4b"><a href="Gallery 3 Link"></a></li>
<li id="panel5b"><a href="Guestbook link"></a></li>
<li id="panel6b"><a href="javascript:norobotmail('yourEmailName', 'yourDomain')"></a></li>
</ul>
/* End of Header Section C&P */
NOTE: The link in panel6b above is one of a two part spam-proof way to give out your E-Mail Address. Details can be found on this (http://www.dgrin.com/showthread.php?t=18036&highlight=%27yourDomain%27%29%22) thread (and many others).
Here is an example of how my banner looks with the borders turned on. If you don’t have a way to measure out the pixels of each link I’m sure you could guesstimate by changing the dimensions of the panels.
http://www.jonathanwphotography.com/photos/129866340-M.jpg
This post is nothing more than an abbreviated version of the article about CSS sprites referenced above. I highly recommend you at least browse through it so you get and idea of how everything works. In addition, the article provides ways to tackle things like hovers and buttons using css alone, something I haven’t attempted yet because of time. Another thing I think is possible but I’ve not attempted is having specific locations of panels rather than proportional blocks. If I find a way to accomplish that I’ll post it.
If you try it let me know, I would love to see your work!
Cheers :D
Background
The idea for this came, in part, from the many examples of websites shown on www.live-books.com (http://www.live-books.com), an excellent company that creates custom portfolio-centric websites. I wasn’t satisfied with the Banner/Navbar combination that I was using; I wanted something more compact and minimal so I began the search on how to create an image sliced banner that would allow me to combine the links and my banner into a single item on my page. In the past, I would have just opened Adobe ImageReady and gone to work on slicing the image up as I pleased and putting in the necessary link information. This time though, I didn’t want to mess with the numerous images that manual slicing creates and I wasn’t confident that the table code that ImageReady produced would work in the SmugMug setting. After a bit of searching I found this (http://alistapart.com/articles/sprites/) article by Dave Shea that in turn provided the code below….many thanks to him for writing such a great article.
The Code
I’m not going to provide detailed explanations as to what each item does; Dave’s article does a thorough job of that.
Things to have before you start copying and pasting:
The URL to your banner image.
The width and height of the entire image in px.
The relative locations of the links within the image measured in px starting from the left of the image. Note: while I didn’t use the HTML code or images that ImageReady created, the slicing function allowed me to get the exact location for each “panel” or link within my banner. If you have a tool that will allow you to do this I highly suggest you use it. It’s not necessary though; with a bit of patience and the borders of the panels turned on (example below) you could probably guess your way through this part. /* Beginning of CSS section copy & paste -- copy white text only */
#BannerImg {
width: (width-of-entire-image-here-remove-parenthesis)px; height: (heighth-of-entire-image-here-remove-parenthesis)px;
background: url(link-to-your-image-goes-here);
margin: 0px auto; padding: 0;
position: relative;}
#BannerImg li {
margin: 0; padding: 0; list-style: none;
position: absolute; top: 0;}
#BannerImg li, #BannerImg a {
height: (heigth-of-entire-image-here-remove-parenthesis)px; display: block;}
#BannerImg a {border: solid 1px #f00;}
/* To remove the borders around the panels remove the last line above*/
/* Each panel represents a block. These measurements are provided by example only. They are specific to my banner and will need to be modified to match the “link” locations your banner. */
#panel1b {left: 0; width: 501px;}
#panel2b {left: 501px; width: 58px;}
#panel3b {left: 559px; width: 49px;}
#panel4b {left: 608px; width: 41px;}
#panel5b {left: 649px; width: 66px;}
#panel6b {left: 715px; width: 52px;}
/* End of CSS section C&P */
/* Beginning of Header Section C&P – Replace with your links of course*/
<ul id="BannerImg">
<li id="panel1b"><a href="Your-HomePage-Link"></a></li>
<li id="panel2b"><a href="Gallery 1 Link"></a></li>
<li id="panel3b"><a href="Gallery 2 Link"></a></li>
<li id="panel4b"><a href="Gallery 3 Link"></a></li>
<li id="panel5b"><a href="Guestbook link"></a></li>
<li id="panel6b"><a href="javascript:norobotmail('yourEmailName', 'yourDomain')"></a></li>
</ul>
/* End of Header Section C&P */
NOTE: The link in panel6b above is one of a two part spam-proof way to give out your E-Mail Address. Details can be found on this (http://www.dgrin.com/showthread.php?t=18036&highlight=%27yourDomain%27%29%22) thread (and many others).
Here is an example of how my banner looks with the borders turned on. If you don’t have a way to measure out the pixels of each link I’m sure you could guesstimate by changing the dimensions of the panels.
http://www.jonathanwphotography.com/photos/129866340-M.jpg
This post is nothing more than an abbreviated version of the article about CSS sprites referenced above. I highly recommend you at least browse through it so you get and idea of how everything works. In addition, the article provides ways to tackle things like hovers and buttons using css alone, something I haven’t attempted yet because of time. Another thing I think is possible but I’ve not attempted is having specific locations of panels rather than proportional blocks. If I find a way to accomplish that I’ll post it.
If you try it let me know, I would love to see your work!
Cheers :D