Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS Rollover text to show an image - help!

    Hi there,

    I am trying to create a horizontal list - with a rollover effect so that the individual words are replaced with thumbnail images when the curser is on them. i.e. "home" is replaced by an image of a house etc

    I have managed to get hold of the script to make this work, but the images are not showing up in the correct position. Rather they are appearing on top of eachother instead of as a replacement to the appropriate word.

    Please help! I think im going a little bit mad!

    Thank you in advance...

    My code is:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">


    <head>

    <link href='http://fonts.googleapis.com/css?family=Actor|Carme|Lato:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>In Point Productions - Filming & Editing</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

    <!--
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #`FFFFFF;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-color: #FFF;
    }
    #container {
    width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: none;
    padding-top: auto;
    font-family: 'lato', sans-serif;
    font-style: book300;
    }
    #header {
    background: #FFFFFF;
    padding: 30px 10px 0px 0px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    height: 60px;
    text-align: right;
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    font-family: 'Lato', sans-serif;
    font-style:normal;
    font-size:16px;
    }
    #menu{
    width: 100%;
    background-color: #FFFFFF;
    text-decoration: none;
    color: #333;
    background-color: #FFFFFF;
    color:#333;
    }
    #menu ul{
    margin: 0;
    padding: 0;
    float: right;
    }

    #menu ul li{
    display: inline;
    }

    #menu ul li a{
    padding: 15px 11px;
    }

    #menu ul li a:hover, .menu ul li .current{
    background-color:#FFFFFF;
    }

    #style {
    position:absolute;
    visibility:hidden;
    float: right;
    display: inline;
    }
    #style1 {
    position:absolute;
    visibility:hidden;
    float: right;
    display: inline;
    }
    #style2 {
    position:absolute;
    visibility:hidden;
    float: right;
    display: inline;
    }
    #style3 {
    position:absolute;
    visibility:hidden;
    float: right;
    display: inline;
    }
    #style4 {
    position:absolute;
    visibility:hidden;
    float: right;
    display: inline;
    }


    -->
    </style><!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->


    <script language="Javascript">
    <!--
    function ShowPicture(id,Source) {
    if (Source=="1"){
    if (document.layers) document.layers[''+id+''].visibility = "show"
    else if (document.all) document.all[''+id+''].style.visibility = "visible"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    else
    if (Source=="0"){
    if (document.layers) document.layers[''+id+''].visibility = "hide"
    else if (document.all) document.all[''+id+''].style.visibility = "hidden"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
    }
    //-->
    </script>
    </head>


    <div id="container">
    <div id="header">
    <div id="menu">
    <ul>
    <li><a href="index3.dwt" onMouseOver="ShowPicture('style',1)" onMouseOut="ShowPicture('style',0)">Home</a></li>
    <li><a href="#" onMouseOver="ShowPicture('style1',1)" onMouseOut="ShowPicture('style1',0)">Work</a></li>
    <li><a href="#" onMouseOver="ShowPicture('style2',1)" onMouseOut="ShowPicture('style2',0)">About</a></li>
    <li><a href="#" onMouseOver="ShowPicture('style3',1)" onMouseOut="ShowPicture('style3',0)">Services</a></li>
    <li><a href="#" onMouseOver="ShowPicture('style4',1)" onMouseOut="ShowPicture('style4',0)">Contact</a></li>
    </ul>
    </div>

    <div id="menu">
    <ul>
    <li><div id="style"><img src="images/locked/subheadings/home.png"/></div></li>
    <li><div id="style1"><img src="images/locked/subheadings/work.png"/></div></li>
    <li><div id="style2"><img src="images/locked/subheadings/about.png"/></div></li>
    <li><div id="style3"><img src="images/locked/subheadings/services.png"/></div></li>
    <li><div id="style4"><img src="images/locked/subheadings/contact.png"/></div></li>
    </ul>
    </div>
    <!-- end #header --></div>

    </body>
    </html>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Hello Spippa and Welcome to the Forums!

    The first step is to wrap your code in [code] code here [/code] tags

    All you need for this type of thing is css! Take a look at this code (which is wrapped in code tags) and tell me what you think!:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<style type="text/css">
    			ul, ol {
    				list-style: none;
    			}
    			.nav {
    				position: relative;
    			}
    			.nav li {
    				float: left;
    			}
    			.nav li a {
    				display: block;
    			}
    			.onHover li a {
    				width: 60px;
    				height: 32px;
    				line-height: 32px;
    				text-align: center;
    			}
    			.onHover li a:hover {
    				text-indent: -9999px;
    			}
    			.onHover .home a:hover {
    				background: url('http://cdn1.iconfinder.com/data/icons/woothemesiconset/32/home.png') no-repeat center center;
    			}
    			.onHover .work a:hover {
    				background: url('http://cdn1.iconfinder.com/data/icons/woocons1/Briefcase.png') no-repeat center center;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<div id="header">
    				<ul id="menu" class="onHover nav">
    					<li class="home"><a href="#">Home</a></li>
    					<li class="work"><a href="#">Work</a></li>
    				</ul>
    			</div>
    		</div>
    	</body>
    </html>
    Last edited by Sammy12; 11-26-2011 at 06:37 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •