Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

pre-nav rollover logo

 

Indexhibit version: 2.0
Thread is resolved.

ramsaypalmer
UNITED STATES
2 year(s) ago
Permalink Post

Hi,

I need help setting up a rollover logo in the pre-nav of my website. I have tried several ways including following the directions here indexhibit.org/forum/thread/8521/, but can't make anything work. I am using version 2, so I imagine that is the problem. Does anyone have a way of making a rollover logo work in version 2?

Thanks,

Ramsay

ramsaypalmer
UNITED STATES
2 year(s) ago
Permalink Post

BTW, Here is my website: ramsaypalmer.com

The rollover I am trying to create is on the logo in the upper left hand corner. I want the logo to change from yellow to dark grey.

Thank you,

Ramsay

Best Answer!
arsondpi
GREECE
2 year(s) ago
Permalink Post

Apparently the code in that post is a bit messed up so I'm reposting it:

In this case I have an button that is 100px X 100px and the image is 100px X 200px that has both states (normal and hover) on top of each other
(check out this thread to understand more about image structure etc)

The css:

  1. a.rolloverme {
  2.     display: block; 
  3.     width: 100px; 
  4.     height: 100px; /* make a box with a set width and height... */
  5.     text-decoration: none;
  6.     background: url('YOUR_IMAGE_URL'); /* ...and set it's background */
  7.     }
  8. a.rolloverme:hover {
  9.     background: url('YOUR_IMAGE_URL') 0 100px; /* this creates the magic - moves the background image inside the box down by 100px so the HOVER button appears */
  10.     }
  11. .hidethis {
  12.     display: none; /* you need this */
  13.     }
  14.     

then just simply add

  1. <a href="A_URL" class="rolloverme"><span class="hidethis">This is a button</span></a>

You need the .hidethis css rule to make things semantically right (screen readers and search engines will know that this is a button)

If you get the hang of this you can extend it for :visited and :active states as well...
And of course you can create different sets of the css code above for different buttons (rolloverme1, rolloverme2 etc)...

ramsaypalmer
UNITED STATES
2 year(s) ago
Permalink Post

Thank you so much, arsondpi. It worked like a charm.

Showing 1 - 4 of 4 posts in Forum » Customize » pre-nav rollover logo
 

This thread has been closed, thank you.