How do you have mouseover and a link at the same time?

xerox02 · February 28, 2011

Example Page: http://kian02.comlu.com/kian3.html

I want the Navi to have mouseover and also be a link

<style TYPE= "text/css"> 

#logo {  

    position: absolute;

    left: 17px;

    

} 



#footer { 

    width: 100%;

    height: 44px;

    background-color: #193bac; 

    color: #red; 

    

}



#navi   {

    height: 32px ;

    width: 100%;

    background-color: #193bac; 

    color: white;

    font-family: arial;  

}


   #navihome
{
display: block;
  width: 82px;
  height: 32px;
  background: url("http://img84.imageshack.us/img84/7207/oneu.gif") no-repeat 0 0;
  position: fixed;
  left: 57px;
}

#navihome:hover
{ 
  background-position: 0 -20px;
}

#navihome span
{
  position: absolute;
  top: -999em;
}

#naviart {

    height: 32px ;

    width: 82px; 

    position: absolute;

    left: 165px;

    background: url("http://img843.imageshack.us/img843/9916/twoo.gif") ;

}



#naviart:hover { background-position: 0 -95px; }



#navimusic {  height: 32px ;

    width: 82px; 

    position: absolute;

    left: 273px;

    background: url("http://img148.imageshack.us/img148/3972/threer.gif") ;

}



#navimusic:hover { background-position: 0 -95px; }





#navidance {  height: 32px ;

    width: 82px; 

    position: absolute;

    left: 381px;

    background: url("http://img573.imageshack.us/img573/6940/four.gif") ;

}



#navidance:hover { background-position: 0 -95px; }



#navicontact {  height: 32px ;

    width: 82px; 

    position: absolute;

    left: 489px;

    background: url("http://img33.imageshack.us/img33/513/fiveu.gif") ;

}



#navicontact:hover { background-position: 0 -95px; }


body {
    margin: 0;
    padding: 0;
}



</style>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">

<html>

    <head>


    </head>

    <body>

       

        

        <div id="footer">  

            <div id="logo"> <img src="http://img638.imageshack.us/img638/3509/logo4jf.gif"> </div> 

        </div>

        <div id= "navi"> 

            <div id="navihome"> <a id="navihome" href="http://kian02.comlu.com/kian3.html" title="Home"><span>Home</span></a> </div> 

            <div id="naviart"> </div> 

            <div id="navimusic">  </div>

            <div id="navidance">  </div> 

            <div id="navicontact"> </div>

        </div> 

        



      
    </body>

    

</html>

xerox02 · February 28, 2011

I wanted to make it more organized

CSS

<style TYPE= "text/css"> 

#logo {  

    position: absolute;
    left: 17px;
} 



#footer { 

    width: 100%;
    height: 44px;
    background-color: #193bac; 
    color: #red; 

}

#navi   {

    height: 32px ;
    width: 100%;
    background-color: #193bac; 
    color: white;
    font-family: arial;  

}

   #navihome
{
display: block;
  width: 82px;
  height: 32px;
  background: url("http://img84.imageshack.us/img84/7207/oneu.gif") no-repeat 0 0;
  position: fixed;
  left: 57px;
}

#navihome:hover
{ 
  background-position: 0 -20px;
}

#navihome span
{
  position: absolute;
  top: -999em;
}

#naviart {

    height: 32px ;
    width: 82px; 
    position: absolute;
    left: 165px;
    background: url("http://img843.imageshack.us/img843/9916/twoo.gif") ;

}

#naviart:hover { background-position: 0 -95px; }

#navimusic {  
    height: 32px ;
    width: 82px; 
    position: absolute;
    left: 273px;
    background: url("http://img148.imageshack.us/img148/3972/threer.gif") ;
}

#navimusic:hover { background-position: 0 -95px; }

#navidance { 
    height: 32px ;
    width: 82px; 
    position: absolute;
    left: 381px;
    background: url("http://img573.imageshack.us/img573/6940/four.gif") ;

}

#navidance:hover { background-position: 0 -95px; }

#navicontact {  height: 32px ;
    width: 82px; 
    position: absolute;
    left: 489px;
    background: url("http://img33.imageshack.us/img33/513/fiveu.gif") ;

}

#navicontact:hover { background-position: 0 -95px; }

body {
    margin: 0;
    padding: 0;
}

</style>

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
    <head>
    </head>
    <body>
            <div id="footer">  
            <div id="logo"> <img src="http://img638.imageshack.us/img638/3509/logo4jf.gif"> </div> 
        </div>

        <div id= "navi"> 
            <div id="navihome"> <a id="navihome" href="http://kian02.comlu.com/kian3.html" title="Home"><span>Home</span></a> </div> 
            <div id="naviart"> </div> 
            <div id="navimusic">  </div>
            <div id="navidance">  </div> 
            <div id="navicontact"> </div>

        </div> 

            </body>

</html>

flolam · February 28, 2011

<div id="navihome"> <a id="navihome" href="http://kian02.comlu.com/kian3.html" title="Home"><span>Home</span></a> </div>

Don't assign the same id to different elements

Sign In

How do you have mouseover and a link at the same time?

Recommended Posts

xerox02

Link to comment

Share on other sites

xerox02

Link to comment

Share on other sites

flolam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information