CSS Rollover Menu with Images and Current Page Indicator

Hello.
I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
Please tell me if I can use the sample from the link above to do that.
What should I change in the css file (what new class should I make) to make this work on a web site based on a template ?
Thank You !

I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
Details and code examples below:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Spry Menu Bars, Templates and Current Page Indicators

Hello,
If you have a spry menu bar in your design, then create a template, how do you then go about making the menu bar have a current page indicator on each page created from the template?
Thanks,
Ferg.

Can I send you on a different path? This solution will only be required in a non-editable area of the DWT.
First we write a function to initialse the page
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
The function compares the URL of the page with the link in the menubar and if they are both the same, it will add an 'activeMenuItem, class to the menuitem.
Next we nee a trigger to activate the function. This is done with a load listener as per
Spry.Utils.addLoadListener(InitPage);
Now we need to ensure that our active menuitem looks different, by assigning a couple of style rules as in the following. The !important needs to be there to override the JS.
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
And lastly we need to add SpryDOMUtils.js as the JS script that we based our JS scripts on
<script src="SpryAssets/SpryDOMUtils.js"></script>
The whole thing will look like
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Or see it live here http://shoguncarco.com.au/index.php where the function has been externalised in http://shoguncarco.com.au/js/plugins.js
Gramps

Drop Down Menu with images in Muse and Animate

Hello,
i am trying to create a drop down menu with images as you can see on this website:
http://www.kadewe.de/
In Adobe Muse the menu with all pages in it doesn't let me insert pictures.
With the empty composition widget i archived something similar but when once activated the action it doesn't close.
My last try was to build a menu in Edge Animate. The Problem i had was that when i used the action click, open URL.
Inserted in Muse the new page opens in the created animation and not on the same page fullscreen.
What have i done wrong?
Thank you for your answers.

I am having a similar problem. I have multiple widgets on a page -- menus, accordions, tooltips, slideshows. As soon as I 'activate' a widget (eg: expand an accordion or play a slideshow) it disables all the triggers below it, as well as all the hyperlinks. This seems like a bug... I hope there's a workaround?

I have created two related books in Lightroom 5 (Volumes 1 and 2) but my balance of page numbers is off. So I'd like to take some pages out of one book (complete with images) and paste them into the other. Is this possible?

I have created two related Blurb books in Lightroom 5 (Volumes 1 and 2) but my balance of page numbers is off. So I'd like to take some pages out of one book (complete with images) and paste them into the other. Is this possible?

Can you zip up a few of your GoPro images, upload them to dropbox.com and post a share link, here, so others can experiment with them, or do you mean this issue is global to all camera models?

What's the best method for a nav menu with image rollover for all visitors?

Hi.
First, thanks for reading this.
What's the best method for a nav menu with image rollovers for all visitors, including PDAs? I've used JavaScript rollovers for years because the majority of my customers' visitors use some version of IE (past 7.0) but I'm building a new site that has to display properly for the widest range of visitors imaginable. (I also know that I need to use a more modern method for everyone and this is my excuse to start).
Finally, using images is critical. I apologize ahead of time to anyone I offend, but I have never seen a nav menu without images that doesn't look just plain terrible.
Thanks.
Fitz21

If you want the best menus possible for Dreamweaver look no further than Project Seven:
http://projectseven.com/
They have all kinds of menus and other extensions available for purchase. Easy to use and they work as advertised. I personally use Pop Menu Magic and Tab Panel magic myself. I could go on and on, but I guarantee that if others respond they will echo the same sentiment for Project Seven.

Online banking site now shows login page as text-only; on different computer it still shows page with images and clickables -- is there a fix?

Previously when I logged in to my INGdirect online bank account, the login window came up showing images and clickable hotspots. Recently, the login window changed to a text-only version. On two different computers running Firefox, the login comes up in the previous version, with images and clickable hotspots. I'm unaware of having done anything to change my settings either in Firefox or on the banking website. Because it seems to be localized on this computer, I've tried downloading latest version of Firefox, but got no change, login still comes up in text-only format.

Try clearing your browser cache.
Tools > Clear Recent History... - hit Details and make sure only Cache is selected, then select Everything and hit the Clear Now button.

Printing from web pages is excruciatingly slow with most recent upgrades of Firefox .Use an iMac and an HP officejet printer. Printer works fine with Safari and woodprocessed files, but not with Firefox and web pages.

Printing from web pages is excruciatingly slow since downloading most recent upgrades of Firefox Mozilla. I have a desktop iMac, OS 10.6.8, and an HP officejet printer 4500 G510n. The printer works fine with the Safari Browser and with woodprocessed files, but not with Firefox and web pages. Help please! It used to print fast with earlier versions of Firefox.

Hello and welcome to the Apple Discussions Forum.
I have hardly any experience with HP printers but since your posting has not been replied to yet I thought I'd offer some assistance.
With the printer status and ink levels working, it shows that you have a connection to the printer. So I would look at the issue being with the protocol being used for the print queue on the Mac.
Since you have XP and Vista working, I would check the printer queue configuration on either box. In XP, go to the Properties and select Ports. Click the Configure Port tab to view the connection. If you are using RAW, then this is known as HP Jetdirect-Socket on OS X. So if you are not sure what protocol was used before I would create another printer queue, this time selecting IP > HP Jetdirect-Socket. Then enter your IP address and select the K5400dn from the Print Using menu.
If this still fails to print then please reply. There may be limitations with adding the HP driver this way that I am not aware of. There may also be other driver options you can look at, such as HPIJS. If Greg Sahli reads this posting he has expert knowledge on this matter and will be able to offer some guidance.
PaHu

Quick Look PDF with vertical and horizontal pages

Is there any way to make Quick Look preview a PDF file with vertical and horizontal pages without adding white padding and retaining the aspect ratio?
Now, if I have a PDF with page 1 vertical and the other pages horizontal QL shows the latter also with the ratio of a vertical page and adds white padding at their top and bottom. You get the inverse output if the first page is horizontally oriented, but the rest are vertical.

Word renders print jobs that change the orientation as separate print jobs. So, each print job becomes its own PDF.
You can make an Automator workflow to combine PDFs. I’m not sure how it decides the order it combines them, so you’d have to experiment.
This is built as an Application where you’d drop all of the PDFs onto the App icon and it will open the combined PDF where you can edit, name, and save.

HTML content with images and links blocked

Hello,
I very much need some help here because my company needs to send out newsletters to our clients in HTML format soon and so far the email with HTML content is being blocked as spam while text content works fine. Specifically, whenever I add a link or an image in HTML content, the email doesn't go through. I tried sending in multipart format but it is also not sending HTML with images and links. Here is my attempt:
                                props.setProperty("mail.transport.protocol", "smtp");
                                 props.setProperty("mail.host", "mail.server.com");
                                 props.setProperty("mail.user", "joeuser");
                                 Session mailSession = Session.getDefaultInstance(props, null);
                                 mailSession.setDebug(true);
                                 Transport transport = mailSession.getTransport();
                                 MimeMultipart mp = new MimeMultipart("alternative");
                                 MimeBodyPart htmlPart = new MimeBodyPart();
                                 MimeBodyPart textPart = new MimeBodyPart();
                                 textPart.setText("Just to make it multipart");
                                 htmlPart.setHeader("MIME-Version", "1.0");
                                 htmlPart.setHeader("Content-Type", htmlPart.getContentType());
                                 htmlPart.setContent(strHtmlMessage, "text/html");
                                 mp.addBodyPart(textPart);
                                 mp.addBodyPart(htmlPart);
                                 MimeMessage message = new MimeMessage(mailSession);
                                 message.setHeader("MIME-Version", "1.0");
                                 message.setHeader("Content-Type", mp.getContentType());
                                 message.setHeader("X-Mailer", "Recommend-It Mailer V2.03c02");
                                 message.setContent(mp);
                                 message.setSubject(strSubject);
                                 message.setFrom(new InternetAddress("[email protected]"));
                                 message.addRecipient(Message.RecipientType.TO,
                                         new InternetAddress("[email protected]"));
                                         transport.connect();
                                         transport.sendMessage(message,
                                         message.getRecipients(Message.RecipientType.TO));
                                 transport.close();This code is one of my numerous attempts to make HTML send images and links. Please, let me know if there is a workaround way to make JavaMail send HTML with links and images in the message body. Your help will be greatly appreciated.

The JavaMail FAQ has information on creating HTML messages, including
messages with both plain text and HTML. Did you find it?
BTW, your code has many unnecessary statements, such as setting
the Mime-Version header, which JavaMail will do for you, and setting
the Content-Type header, which JavaMail does as a side-effect of the
setContent or setText calls.
Other than that, it looks like your code should be correctly creating a
multipart/alternative message. If the recipient is still rejecting it you
need to figure out what it is about the message that makes the recipient
think it's spam. Can you send a similar message using another mailer?
Can you send the message to a different recipient?

How to modified automatic batch number with plant and current year details

hi all,
i want tomodify automatic batch number with plant and current year details. if any one understand plz explain.
thanks,
radhakrishna.

Hi,
I am not clear what is u r requirement exactly?
I mean you don't want automatic batch no or modify the batch no. with plant means and Current year details means. Can give details more
Regards
Ganesh

Actions menu wheel image and Go button image

Hello ,
In APEX 4 Interactive Reports, the actions menu wheel image and the go button are coming as html buttons instead of the wheel image and go button image.
Is there a way I can rever to the old wheel img and go button .
Thanks,
Dippy

Within the IR, under Search Bar, you can set Actions Menu Image to '/i/ws/action_32x24.gif' - this is the green wheel but does not have little arrow. I will contact our image guru and see if the old one is sitting somewhere. As for 'Go', this does not support an image but you can change the word if you need to (using Search Button Label) and set a button template to match your application.
-- Sharon

How do i send an html file exported from muse as email blast with images and live links?

My question it:
How do i send an html file exported from muse as email blast with images and live links?
I have designed a "website" in adobe muse and exported it as an html file. I am not sure how to send my .html file in an email!
Best,
Nicole

Unfortunately, the answer is, you don't. The requirements for HTML displayed in an e-mail reader are very different than those for HTML displayed in a browser. The output of Muse won't work as an HTML e-mail. You could upload the Muse site as a website and provide a link to it in an e-mail, but the HTML generated by Muse is not suitable for direct display by an e-mail program.

Is it possible to tell me how i can make program in labview that take pixels of black and withe image and give coordinate of black or white pixels back to me.

hello everybody
is it possible to tell me how i can make program in labview that take pixels of black and withe image and give coordinate of black or white pixels back to me.
Solved!
Go to Solution.

Here's a slightly simpler version.
(Depending how you want to process the output, you might not need to traspose and/or reverse. Boolean to 0,1 works directly on the 2D array if needed )
amkamyab wrote:
it is good. i could enter 1bit image in and show it in array. now i want to take pixels coordinates. i meen i want to have (x,y) of each pixel to send it pixel coordinate to another program i wrote for steppers motor.
Can you be a bit more specific on how the output is supposed to look like? Initially you wrote "black or white", and since all pixels are either black or white, do you want to send all pixels? In what format? In what order? Please clarify?
LabVIEW Champion . Do more with less code and in less time .
Attachments:
BW-Pix.png ‏8 KB

How to copy and paste manual menu with hyperlinks from one page to another?

Copy paste does not duplicate hyperlinks. Neither does putting it in the library. Both erases links. This is a general menu that will be on every page of the site, do I really have to hyperlink all 40 buttons in accordion menu again?
There has to be a way to copy the accordion with inset vertical menu with the hyperlinks for each button of menu?!?!?

Use a Master Page and create the links on that. (Use A-Master if that will work for your site, but otherwise create a B-Master page (with A-Master as its master - again if that works for your site)). You can then add the hyperlinks once to your new master page and use it for each for each of your other pages. (The new master page is added at the bottom of the "Plan" view of the site and once created you just drag and drop onto the other pages to apply it to them. Hope that all makes sense - it should be pretty easy to do what you want to achieve.

Search rollover page number not consistent with thumb and pdf page number

Please respond by e-mail to
[email protected]
Adobe Reader 9.0 and 8.1.2.
Mac OS X 10.4.11
Mac PowerPC G4
640 MB SDRAM
Does Adobe Reader have a search window phrase rollover, yellow-highlighted pop up page number bug displaying the wrong page in some circumstances?
If Yes, how do I report that bug to get Adobe to fix it?
Viewing the same PDF:
MacPreview does not have the problem described below,
Adobe Reader does have the problem.
Adobe Reader, search phrase rollover, pops up a page number that is yellow-highlighted, e.g., p# 29, and is wrong, whereas the page number for the thumb and PDF are both the same and are correct.
My PDF has been set on Acrobat Pro to properly paginate the first eight pages in lowercase Roman numerals (i, ii, iii, iv, v, vi, vii, viii) followed by Arabic numerals (1, 2, etc.). My PDF uses an AcrobatPro special setting to properly handle this pagination scheme. The search phrase rollover pops up a yellow-highlighted page number that wrongly adds 8 pages to the page number for the thumb and for the PDF page. Suspiciously, we have 8 pages with lowercase Roman numbers. Remember, viewing the same PDF, MacPreview works perfectly, producing identical and correct page numbers for the phrase, thumb, and PDF.

the method u followed is fine as need a page number staring from a specify value which u input.
@section is only for resetting page number to 1 for every group and for that pdf and ppt will be fine but only for rtf u need to use that ( pressing F9).
u can use @section and initial page number combined but they give u same output as get now. rtf output wont support it will only reset 1 every time
What ever u do rtf output wont support initial page number code ..........
i mentioned that F9 work around to mention that it is the only work around u have upto now to control rtf output with regards to page number.
Guru's correct me if i am wrong. wait for a day or two if some one from guru's confirm it .
If u need real confirmation raise an SR oracle will let u know .

CSS Rollover Menu with Images and Current Page Indicator

Similar Messages

Maybe you are looking for