How to have current menu item highlighted when it's an image?
Hello, I've got a site here: http://beta.menashalibrary.org/teens/read That has a menu across the top. I'm looking for the best way to do this within drupal. To do the mouseovers, I'm using javascript. This changes the image you're mousing over, and the one below it with text. Is there a way to do this but still have drupal create the menu? Also, I'd like it so the active link is the same image as when you mouse over it. The only way I can think of to do this is to use sections and have a different section for each link. Is there a better way to do this? - jody
Jody Cleveland schrieb:
Hello,
I've got a site here: http://beta.menashalibrary.org/teens/read
That has a menu across the top. I'm looking for the best way to do this within drupal. To do the mouseovers, I'm using javascript. This changes the image you're mousing over, and the one below it with text. Is there a way to do this but still have drupal create the menu?
Also, I'd like it so the active link is the same image as when you mouse over it. The only way I can think of to do this is to use sections and have a different section for each link. Is there a better way to do this?
Hi. Why not use pure CSS!? Each link have its own id and an image containing all versions (non-highlighted, highlighted, active). You can than select the image part by changing the background position with css (#item1:hover {}; #item1:active {}). The technique is called "image rollover". More details here [1] or at alistapart [2]. hth, Stefan [1] http://wellstyled.com/css-nopreload-rollovers.html [2] http://alistapart.com/articles/slidingdoors2/
Hi. Why not use pure CSS!? Each link have its own id and an image containing all versions (non-highlighted, highlighted, active). You can than select the image part by changing the background position with css (#item1:hover {}; #item1:active {}). The technique is called "image rollover". More details here [1] or at alistapart [2].
Brilliant! Not sure why I didn't think of that before. Is there a way to control two images with a rollover? I have the button state change, as well as, an image below it. Thanks! - jody
Jody Cleveland schrieb:
Why not use pure CSS!? Each link have its own id and an image containing all versions (non-highlighted, highlighted, active). You can than select the image part by changing the background position with css (#item1:hover {}; #item1:active {}). The technique is called "image rollover". More details here [1] or at alistapart [2].
Brilliant! Not sure why I didn't think of that before. Is there a way to control two images with a rollover? I have the button state change, as well as, an image below it.
Hi Jody. Jup, its possible (with an ugly trick :-) ). You now have something like this: #item1 { background: transparent url('yourimage.png') no-repeat 0px 0px; } #item1:hover { background-position: 0px -50px; /* guess your image has a height of 50px */ } Place an element which contains the second image within the list item: <ul id="nav"> <li id="item1"> <span class="info"> </span></li> <li id="item2"> <span class="info"> </span></li> </ul> Then you have to hide the element by default: li .info { display: none; width: ...; height: ...; background: transparent url('yoursecondimage.png') no-repeat 0px 0px; } and display it on hover: #item1:hover .info { display: block; /* here is the ugly trick: */ position: absolute; top: 0px; /* adjust as needed */ left: 0px; /* adjust as needed */ } I haven't tested it yet but it should work. hth, Stefan
Hello Stefan,
You now have something like this: #item1 { background: transparent url('yourimage.png') no-repeat 0px 0px; } #item1:hover { background-position: 0px -50px; /* guess your image has a height of 50px */ }
Place an element which contains the second image within the list item: <ul id="nav"> <li id="item1"> <span class="info"> </span></li> <li id="item2"> <span class="info"> </span></li> </ul>
Then you have to hide the element by default: li .info { display: none; width: ...; height: ...; background: transparent url('yoursecondimage.png') no-repeat 0px 0px; }
and display it on hover: #item1:hover .info { display: block; /* here is the ugly trick: */ position: absolute; top: 0px; /* adjust as needed */ left: 0px; /* adjust as needed */ }
I haven't tested it yet but it should work.
Well, I've mostly gotten it now. There's one issue though. It has to do with this part here: #item1:hover .info { display: block; /* here is the ugly trick: */ position: absolute; top: 0px; /* adjust as needed */ left: 0px; /* adjust as needed */ } The content for the page is contained in a div, <div class="page-container-2">. What I'd like is for #item1:hover .info to be so many pixels from the left hand side of page-container-2. Not from the left hand side of the page. Is this possible? Thank you so much for helping me out with this. I really appreciate it! - jody
Hello again,
Well, I've mostly gotten it now. There's one issue though. It has to do with this part here: #item1:hover .info { display: block; /* here is the ugly trick: */ position: absolute; top: 0px; /* adjust as needed */ left: 0px; /* adjust as needed */ }
The content for the page is contained in a div, <div class="page-container-2">. What I'd like is for #item1:hover .info to be so many pixels from the left hand side of page-container-2. Not from the left hand side of the page.
Ok, I figured it out. I had to set position: relative; to page-container-2. Then, having a position of absolute on #item1:hover .info positions it inside of the container. - jody
Hello yet again,
Why not use pure CSS!? Each link have its own id and an image containing all versions (non-highlighted, highlighted, active). You can than select the image part by changing the background position with css (#item1:hover {}; #item1:active {}). The technique is called "image rollover". More details here [1] or at alistapart [2].
[1] http://wellstyled.com/css-nopreload-rollovers.html [2] http://alistapart.com/articles/slidingdoors2/
Ok, following the instructions from the first link, I have mouseovers working with just css. The only thing that's not working is the 'active' state. In css for each menu item, I have something similar to this: #menu-play a { display: block; width: 92px; height: 91px; background: url("img/play.png") 0 0 no-repeat; } #menu-play a:hover { background-position: -92px 0; } #menu-play a:active { background-position: -92px 0; } And, the html for each is similar to this: <td id="menu-play"><a href="play.html"></a><span class="info"> </span></td> But, when I click on the menu item for 'play', the active state is not honored. Any ideas what I may have wrong? - jody
Jody Cleveland schrieb:
Hello yet again,
[...] [1] http://wellstyled.com/css-nopreload-rollovers.html [2] http://alistapart.com/articles/slidingdoors2/
Ok, following the instructions from the first link, I have mouseovers working with just css. The only thing that's not working is the 'active' state.
In css for each menu item, I have something similar to this: #menu-play a { display: block; width: 92px; height: 91px; background: url("img/play.png") 0 0 no-repeat; } #menu-play a:hover { background-position: -92px 0; } #menu-play a:active { background-position: -92px 0; }
And, the html for each is similar to this: <td id="menu-play"><a href="play.html"></a><span class="info"> </span></td>
But, when I click on the menu item for 'play', the active state is not honored. Any ideas what I may have wrong?
Jup. Its quite simple. "a:active" points to a link that is selected ("active") right now. You want to display the image part for an active sites link. If you do some dynamic stuff (perhaps php) you can give the link a class called "active" and change your style to #menu-play a.active { background-position: -92px 0; } <td id="menu-play"><a class="active" href="play.html"></a><span class="info"> </span></td> Or (with static pages) insert a style rule in the specific page: <style type="text/css"> #menu-play a { background-position: -92px 0; } </style> hth, Stefan
Stefan Borchert schrieb:
If you do some dynamic stuff (perhaps php) ... Or (with static pages) Hint: never try to give help if you are very tired :-) By reading Bèrs reply I noticed that you're using drupal. So you *do* some "dynamic stuff".
Follow Bèrs instructions and you should be done. best regards, Stefan
Stefan Borchert schrieb:
If you do some dynamic stuff (perhaps php) ... Or (with static pages) Hint: never try to give help if you are very tired :-) By reading Bèrs reply I noticed that you're using drupal. So you *do* some "dynamic stuff".
Follow Bèrs instructions and you should be done. best regards, Stefan
Stefan Borchert schrieb:
If you do some dynamic stuff (perhaps php) ... Or (with static pages) Hint: never try to give help if you are very tired :-) By reading Bèrs reply I noticed that you're using drupal. So you *do* some "dynamic stuff".
Follow Bèrs instructions and you should be done. best regards, Stefan
Sorry for flooding the group. My news server is having some problems.
Stefan Borchert schrieb:
If you do some dynamic stuff (perhaps php) ... Or (with static pages) Hint: never try to give help if you are very tired :-) By reading Bèrs reply I noticed that you're using drupal. So you *do* some "dynamic stuff".
Follow Bèrs instructions and you should be done. best regards, Stefan
Op dinsdag 19 december 2006 01:05, schreef Jody Cleveland:
But, when I click on the menu item for 'play', the active state is not honored. Any ideas what I may have wrong?
This is a known Drupal 'bug', at least, I consider it as such :) I have written a howto on getting this solved on my corporate blog: http://webschuur.com/node/658 Bèr -- Ik doneer alle advertentie inkomsten x2 aan Serious Request/Music 4 life. Doe ook mee: -- http://bler.webschuur.com/ik_doneer_alle_advertentie_inkomsten_x2_aan_seriou... Drupal, Ruby on Rails and Joomla! development: webschuur.com | Drupal hosting: www.sympal.nl
I never post here, just read because I'm such a newbie, but I got great help from markhope at drupal.org to accomplish what I think you're trying to do. The posts are at http://drupal.org/node/90318 and http://drupal.org/node/97971. Everything is done through the primary and secondary links in the page.tpl.php and style.css files. Hope it helps. Ramona On Dec 14, 2006, at 3:06 PM, Jody Cleveland wrote:
Hello,
I've got a site here: http://beta.menashalibrary.org/teens/read
That has a menu across the top. I'm looking for the best way to do this within drupal. To do the mouseovers, I'm using javascript. This changes the image you're mousing over, and the one below it with text. Is there a way to do this but still have drupal create the menu?
Also, I'd like it so the active link is the same image as when you mouse over it. The only way I can think of to do this is to use sections and have a different section for each link. Is there a better way to do this?
- jody -- [ Drupal support list | http://lists.drupal.org/ ]
participants (4)
-
Bèr Kessels -
Jody Cleveland -
Stefan Borchert -
Zen Seeker