Hi, im new here. and im newbie too in web design. but i really interest with web design. so i tried to make my own site template with Photoshop, script with HTML and CSS. but i have a problem. i created my own button with flash 8, it works, looks cool and great. but when i put it in my site with dreamweaver using insert>media>flash, it little bit messed up. it looks like this.

 

its looks fine in dreamweaver

 

and when i open it in firefox

 

anyone know what kind of problem it is? please help. im very grateful if someone solve this problem.

Hi. Flash navigation really isn't a good idea. It won't show up on mobiles or tablets and some search engines won't be able to follow the links.

 

What effect were you trying to achieve?

just a fade in effect. so, its better to use rollover image in HTML? (sorry bad english)

You can do a fade-in with CSS transitions. It'll fall back to a plain rollover in older browsers. I do have a demo of this on JSfiddle, but the site's down at the moment - remind me and I'll link to it later.

Flash navigation really isn't a good idea.

You added a word...

You added a word...

 

Heh.

 

JSFiddle seems to be back up, here's the demo.

Just backing up Renaissance-Design, a flash navigation really isn't a good idea; especially for simple rollovers.

 

I want to add something though, as Renaissance-Design linked a regular rollover snippet; if what your wanting to do is have a more smooth rollover (like you would do with a Flash effect) you can use jQuery so that the hover fades.

 

 

This is off the top of my head, untested; from how my site does smooth hovering. It's actually really easy to do and a nice way to learn JavaScript get started with jQuery.

 

 

The way you do that is to have an image map with the regular state and hover state in it (a jpg or a png with a transparent background for example).

 

If you're learning it might be easier to have one map for each menu button; but if you get to grips with it like that try doing it from one map.

 

The map would be one image with the normal state image at the top and the hover state image right below it.

 

 

Then in your html you create your navigation, with the normal and hover state images applied via css (the hover state image is applied in the a tag, background position of the map image moved so the hover state is in focus and opacity set to 0).

 

<ul>
  <li>
     <a href="http://www.example.com" name="home" id="home" class="home">
        <div class="hover"><span class="displace">Home</span></div>
     </a>
  </li>
  <li>
     <a href="http://www.example.com/about" name="about" id="about" class="about">
        <div class="hover"><span class="displace">About</span></div>
     </a>
  </li>
</ul>

 

The ul tag sets the block that contain the navigation

The li tag is for each menu item

The a tag is each link (in its normal state)

Inside the a tag is a div with a hover class applied to it, this is for the hover state

Inside that is a span with class displace that wraps the navigation text, this is used to move the text off screen (as the images are what the user will see)

 

 

Onto the css:

 

You would add css to set the positioning of the ul and li's, and remove the list style from the li's

 

The link (a tags) would apply the button map for each link (in the normal state)

The hover class would apply the button map for each link (in the hover state) and set opacity to 0. Use background-position to align it, then set the opacity to 0.

The displace class would apply a text-indent (like -9000 to take it way off screen)

 

 

The CSS for the menu items would look something like this:

.ul li .home
{
width: 107px;
height: 45px;
background-image: url('http://www.example.com/maps/navigation-home.jpg');
background-position: 0px 0px;
float: left;
}

ul li .home .hover
{
width: 107px;
height: 45px;
background-image: url('http://www.example.com/maps/navigation-home.jpg');
background-position: 0px -45px;
float: left;
opacity: 0;
}


/* Displace Class */
.displace
{	
left: -9000px;
position: absolute;	
}

 

 

Then you need some javascript to handle the hovers:

 

1. jQuery (www.jquery.com)

2. jQuery Easing (http://gsgd.co.uk/sandbox/jquery/easing/)

 

Then a javascript file that looks something like this:

 

$(".home, .about").live("mouseover touchstart", function() 
{
  var $hover = $("> .hover", this);
 $hover.stop().fadeTo(600, 1, "easeOutQuad");
});

$(".home, .about").live("mouseout touchend", function() 
{
  var $hover = $("> .hover", this);
  $hover.stop().fadeTo(600, 0, "easeOutQuad");
});	

 

This handles the hover, each menu item class is listed in the first part (comma separated), the .hover is your hovering class.

Edited July 1, 201214 yr by FizixRichard