Author Topic: spacer, gif hover  (Read 2179 times)


  • Guest
spacer, gif hover
« on: November 16, 2013, 10:47:56 pm »

I've been asked to add another page onto an existing site.  The navigation bar is a jpg with a spacer.gif being used.  When I view it with "live view" in Dreamweaver, the spacer.gif shows a transparent image with a question mark.  Is there a way to set the hover and visited colors with the spacer gif?  I am submitting the partial jpg and some of the css code.

<div id="topsection2" style="background-image: url('images/menu12.jpg'); background-repeat:repeat-x;">

<a href="index.html"><img src="spacer.gif" width="50" height="28" border="0" class="home" /></a>

<a href="history.html"><img src="spacer.gif" class="history" border="0"></a>

I believe the spacer.gif is black, not sure.  I need to acheive the results as in menu1.jpg and menu2.jpg. is the new navigation bar.  The customer wants the original colors.  I am unfamiliar with working with spacer gifs like this.
Thanks for your help!


  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: spacer, gif hover
« Reply #1 on: November 19, 2013, 03:46:57 pm »
The spacer is probably a transparent gif file. It is just used to create space on the navigation bar, most likely for links. You said the navigation bar was a single image correct? Whoever originally developed the site is using the spacer image to act as a link. They are setting up an <img> tag with the spacer image and giving it a set width and height, so it overlaps each "button". The user doesn't actually see the spacer image because it is transparent, but it does act as a link so it can be clicked on.

To answer your question, no you cannot modify the spacer gif to provide a different hover color. At least I'm not aware of a technique that would let you do that. Because of the way this is designed I don't think you'll be able to do a hover color without changing the way this is setup. The easiest way would be to create separate images of the navigation bar, one for each rollover and switch out the entire image for each of the links. Definitely not the most efficient way of doing it, but probably the least amount of work.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty


  • Guest
Re: spacer, gif hover
« Reply #2 on: November 20, 2013, 11:53:10 pm »
Thanks Erikk,

That is what I done, created separate images and changed the background image for each page to reflect that.