Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...How Do I Create a Swap Image on Menu Rollover?How Do I Create a Swap Image on Menu Rollover?
Previous
 
Next
New Post
5/10/2012 5:07 PM
 

I do not see this done very often with DNN but i'm converting an old Web Site created with Adobe Fireworks where the previous designer went nuts with what is called Menu Swap Images...

Is there a way i can do this with the current menu DNN 5.6.3 via CSS?

All i'm trying to do is reproduce when a user hovers over a dnn menu item, then the CSS calls an image in the "feature window" upon rollover.

A code sample would be great to get me started.... I've been sitting with Mozillas FireFox's firebug to try to reproduce or capture the CSS hover with little success.

Thanks,  An actual solution with a sample CSS, or link to somewhere  would be great...

 
New Post
5/11/2012 1:06 AM
 
Here is a link that should give you what you want.

Hope that helps.
 
New Post
5/11/2012 1:21 AM
 

Hi  jacton...   I'm sorry... but did we miss the link? Looks like your link did not show up in your post? Will this work for DNN menu rollover?

Still eagerly awaiting.

 
New Post
5/11/2012 9:19 AM
 
Oops, sorry about that. Here is a link to show an example of this:

http://kyleschaeffer.com/best-practices/pure-css-image-hover/

If you have any trouble shot me a link to the site you're working on and I'll have a look at it.
 
New Post
5/11/2012 10:55 AM
 

Ah Yes, i've actually seen that link and have it in my Database of useful links... but what i'm trying to do is incorporate this into the native DNN menu CSS programatically.   So that when the user hover's over the root DNN Menu item, the Main Feature window located in the skin will swap an image.

I don't have a live good example site of what i'm trying to explain. I had to download the site on to my internal box.

Although I do have a link to a tutorial where Fireworks was used to create a Menu Swap Image effect.
Take a look at http://www.smartwebby.com/web_site_design/swap_images.asp

Scroll down about mid way look for "Create the Image Swap Effect" And take a look at the right hand side vertical demo menu. What i am trying to do is very similar but i'm trying to associate the DNN menu to do this and my attempts have been futile at reproducing this old "Fireworks" swap image effect in
the native DNN menu.

If you wanted to test this, try a normal DNN install say DNN 5.6.X and hover over the root menu item. The trick is i'm trying to make an alternate feature image actually swap images in a feature window of the skin just like the fireworks effect... only I 'm trying to do it with DNN as i rebuild and convert an old Forworks site to DNN

Perhaps with the example i provided it now makes sense?
Just trying to get the hover effect to display the swap image in the skin is proving to be a challenge with the DNN Menu.

If you have a CSS sample test that worked with DNN to share that would be great... but i'm starting to think this may not be possible?

Thoughts about this?

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...How Do I Create a Swap Image on Menu Rollover?How Do I Create a Swap Image on Menu Rollover?


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out