0

Hi guru,

I looked up one of doctype's discussion - see link: http://doctype.com/any-way-create-animated-menu-rollover-without-flash

I have managed to create a CSS animation and been trying to find ways to make them linked so people can roll over the button and click to enter - see my sample: http://www.signvideo.co.uk/downloads/sv-bsl-direct-button.html

Here is the CSS stuff (of course, mostly written by Guillermo Esteves with bit of my tweaking)...

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SV BSL Direct Button Test</title>

    <style type="text/css">
    li {  
        list-style-type:none;  
        position:relative;  
        width:200px;  /* Gives the li the same height and width as the first frame */
        height:110px;  
        background:url('svbslbutt.png') top left no-repeat;  
        text-indent:-10000px;  /*Hides the menu item text way to the left*/
    }  

    li span {  /* Places the span of the same dimensions right on top of the li */
        display:block;  
        width:200px;  
        height:110px;  
        position:absolute;  
        top:0;  
        left:0;  
        background:url('svbslbutt.png') 0 -1100px no-repeat;  /* Offsets the image 1100px to the top, so it's actually the last frame in the image */
        z-index:1; 
        opacity:0; /* Makes it transparent until you hover over it */ 
        filter:alpha(opacity = 0);  /* For IE compatibility; it doesn't support opacity */
        -webkit-transition: opacity 0.25s linear;  /* Tells WebKit how you want the transition */
    }  

    li span:hover {  /* Makes the span visible when you hover it, animated according to the -webkit-transition property */
        filter: alpha(opacity = 100);  
        opacity:1;  
    }
    body {
    background-color: #023D8D;
}
    </style>

</head>
<body>
    <ul>
    <li>Menu item<span></span></li>
    </ul>
</body>
</html>

Can you please let me know what is the actual code to use to make the image linked (hyper-linked)?

Many thanks,

AussieBloke

1 answer

0
0
points

Not to worry guys, the problem have been solved as found resources and answer elsewhere.

Cheers.

Answered about 5 years ago by