SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing CSS values via JavaScript?

    Hi everyone! I'm hoping someone can help me out here with the desired effect that I am looking for.

    I'm not 100% sure the CSS works but I know how to fix that easy enough.

    The JavaScript is what I don't know. The desired effect I'm looking for is when the mouse hovers over one of the "navigation's" main categories it will position the background image to -145px. When it mouses out it will return the background image back to it's original state.

    As you can see by the JavaScript below it definitly won't work as it is looking for an image. Is there a way to have JavaScript to move the background image that is in CSS -145px in order to get the desired effect I'm looking for?

    To get a visual of the navigation I'm currently using visit www.dvdfuture.com and you'll see it.

    What I am trying to do exactly is when you mouse over a main category the background image will change from gray to white and the submenu will also change according to what main category you are over. When moused out it will remain on the last moused over object.

    Is there anyway to do this? I think I've got the submenu working alright but the main navigation has got me confused.

    Thanks for any help! Code is below.

    JS
    Code:
    // Function which actually swaps tabs
     function changeColoredTab (tabname) {
     	document.getElementById('tab_home').style.display = 'none';
     	document.getElementById('tab_news').style.display = 'none';
     	document.getElementById('tab_reviews').style.display = 'none';
     	document.getElementById('tab_features').style.display = 'none';
     	document.getElementById('tab_forum').style.display = 'none';
     	document.getElementById('tab_aboutus').style.display = 'none';
     	document.getElementById('tab_search').style.display = 'none';
     	document.getElementById('tab_'+tabname).style.display = 'block';
     
     	// Some how I have to change the position of the background image in CSS
     	// in order to do the roll overs for the desired effect
     	document.getElementById('tabnav_home').src = 'http://http://www.dvdfuture.com/images/nav_windows_off.gif';
     	document.getElementById('tabnav_news').src = 'http://www.dvdfuture.com/images/nav_software_off.gif';
     	document.getElementById('tabnav_reviews').src = 'http://www.dvdfuture.com/images/nav_hardware_off.gif';
     	document.getElementById('tabnav_features').src = 'http://www.dvdfuture.com/images/nav_security_off.gif';
     	document.getElementById('tabnav_forum').src = 'http://www.dvdfuture.com/images/nav_outsourcing_off.gif';
     	document.getElementById('tabnav_aboutus').src = 'http://www.dvdfuture.com/images/nav_management_off.gif';
     	document.getElementById('tabnav_search').src = 'http://www.dvdfuture.com/images/nav_industries_off.gif';
     
     	document.getElementById('tabnav_'+tabname).src = 'http://www.dvdfuture.com/images/nav_'+tabname+'_on.gif';
     
     }
    CSS
    Code:
    <!--
     #header {
     	top: 0px;
     	width: 770px;
     	height: 100px;
     	z-index: 10;
     	background: url("http://www.dvdfuture.com/images/background/header0.jpg") no-repeat top;
     	padding: 0 0 0 0;
     	margin: 0 0 0 0;
     }
     
     #navigation {
     	  float:left;
     	  width:100%;
     	  background: url("http://www.dvdfuture.com/images/nav-bg.gif") no-repeat bottom;
     	  /*font-size:93%;*/
     	  line-height:normal;
     
     	font-size:10px;
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	line-height:normal;
     	overflow: hidden;
     	z-index: 20;
     	position: relative;
     	top: 78px;
     	vertical-align: bottom;
     }
     
     #navigation ul {
     	  margin:0;
     	  padding:0;
     	  list-style:none;
     }
     
     #navigation li {
     	  display:inline;
     	  margin:0;
     	  padding:0;
     }
     
     #header #navigation ul li#tab_home, li#tab_reviews, li#tab_features, li#tab_forum, li#tab_aboutus, li#tab_search, a {
     	  float:left;
     	  background:url("http://www.dvdfuture.com/images/nav-left-both.gif") no-repeat left top;
     	  margin:0;
     	  padding:0 0 0 9px;
     	  border-bottom:1px solid #000000;
     	  text-decoration:none;
     }
     
     #header #navigation ul li#tab_home, li#tab_reviews, li#tab_features, li#tab_forum, li#tab_aboutus, li#tab_search, a span {
     	  float:left;
     	  display:block;
     	  background:url("http://www.dvdfuture.com/images/nav-right-both.gif") no-repeat right top;
     	  padding:5px 15px 4px 6px;
     	  font-weight:bold;
     	  color:#999999;
     }
     
     /* Commented Backslash Hack hides rule from IE5-Mac \*/
     #navigation a span {float:none;}
     /* End IE5-Mac hack */
     
     #navigation a:hover span {
     	  color:#000000;
     }
     
     #header #navigation ul li#tab_home, li#tab_reviews, li#tab_features, li#tab_forum, li#tab_aboutus, li#tab_search, #current a {
     	  background-position:0 -145px;
     	  border-width:0;
     }
     
     #header #navigation ul li#tab_home, li#tab_reviews, li#tab_features, li#tab_forum, li#tab_aboutus, li#tab_search, #current a span {
     	  background-position:100% -145px;
     	  padding-bottom:5px;
     	  color:#000000;
     }
     
     #header #navigation ul li#tab_home, li#tab_reviews, li#tab_features, li#tab_forum, li#tab_aboutus, li#tab_search, #current a:hover {
     	  background-position:0% -145px;
     }
     
     #header #navigation ul li#tab_home, li#tab_reviews, li#tab_features, li#tab_forum, li#tab_aboutus, li#tab_search, #current a:hover span {
     	  background-position:100% -145px;
     }
     
     #subnavigation {
     	position: relative;
     	/*top: -25px;*/
     	/*z-index: 20;*/
     	width: 770px;
     	height: 30px;
     	background: url("http://www.dvdfuture.com/images/background/sub-nav-bg0.jpg") no-repeat top;
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 7pt;
     	font-weight: bold;
     	color: #FFFFFF;
     	margin: 0;
     	padding: 0px 0px 0px 0px;
     	clear: both;
     	/*border-style: solid;
     	border-width: 1px;
     	border-color: red;*/
     }
     
     #subnavigation a {
     	text-decoration: none;
     	color: #FFFFFF;
     }
     
     #subnavigation a:hover {
     	text-decoration: underline;
     	color: #FF9900;
     }
     
     #subnavleft {
     	float: left;
     	width: 475px;
     	text-align: left;
     	padding: 8px;
     }
     
     #subnavright {
     	float: right;
     	width: 250px;
     	text-align: right;
     	padding: 8px;
     }
     	  
      -->
    HTML
    Code:
    <!-- header -->
     <div id="header">
     	<!-- navigation -->
     	<div id="navigation">
     		<ul>
     			<li id="tab_home"><a href="index.php" onmouseOver="changeColoredTab('home');return false;"><span>Home</span></a></li>
     			<li id="tab_mews"><a href="news.php" onmouseOver="changeColoredTab('news');return false;"><span>News</span></a></li>
     			<li id="tab_reviews"><a href="review.php" onmouseOver="changeColoredTab('review');return false;"><span>Reviews</span></a></li>
     			<li id="tab_features"><a href="features.php" onmouseOver="changeColoredTab('features');return false;"><span>Features</span></a></li>
     			<li id="tab_forum"><a href="phpBB2/" onmouseOver="changeColoredTab('forum');return false;"><span>Forum</span></a></li>
     			<li id="tab_aboutus"><a href="about_us.php" onmouseOver="changeColoredTab('aboutus');return false;"><span>About Us</span></a></li>
     			<li id="tab_search><a href="#" onmouseOver="changeColoredTab('search');return false;"><span>Search</span></a></li>
     		</ul>
     	</div>
     	<!-- /navigation -->	
     </div>
     <!-- /header -->
     	
     <!-- subnavigation -->
     <div id="subnavigation">
     	<div id="tab_home" style="display: none;"><div id="subnavleft"><a href="/frs.php">Front Row, Sofa!</a> | <a href="fs.php">Film Stripped</a> | <a href="/review.php?searchtype=top50">Top 50 Reviews</a> | <a href="/review.php?searchtype=top10">Top 10 Weekly Reviews</a> | <a href="/news.php?searchtype=siteupdates">Site Updates</a></div></div>
     	<div id="tab_news" style="display: none;"><div id="subnavleft"><a href="/frs.php">Front Row, Sofa!1</a> | <a href="fs.php">Film Stripped</a> | <a href="/review.php?searchtype=top50">Top 50 Reviews</a> | <a href="/review.php?searchtype=top10">Top 10 Weekly Reviews</a> | <a href="/news.php?searchtype=siteupdates">Site Updates</a></div></div>
     	<div id="tab_reviews" style="display: none;"><div id="subnavleft"><a href="/frs.php">Front Row, Sofa!2</a> | <a href="fs.php">Film Stripped</a> | <a href="/review.php?searchtype=top50">Top 50 Reviews</a> | <a href="/review.php?searchtype=top10">Top 10 Weekly Reviews</a> | <a href="/news.php?searchtype=siteupdates">Site Updates</a></div></div>
     	<div id="tab_features" style="display: none;"><div id="subnavleft"><a href="/frs.php">Front Row, Sofa!3</a> | <a href="fs.php">Film Stripped</a> | <a href="/review.php?searchtype=top50">Top 50 Reviews</a> | <a href="/review.php?searchtype=top10">Top 10 Weekly Reviews</a> | <a href="/news.php?searchtype=siteupdates">Site Updates</a></div></div>
     	<div id="tab_forum" style="display: none;"><div id="subnavleft"><a href="/frs.php">Front Row, Sofa!4</a> | <a href="fs.php">Film Stripped</a> | <a href="/review.php?searchtype=top50">Top 50 Reviews</a> | <a href="/review.php?searchtype=top10">Top 10 Weekly Reviews</a> | <a href="/news.php?searchtype=siteupdates">Site Updates</a></div></div>
     	<div id="tab_search" style="display: none;"><div id="subnavleft"><a href="/frs.php">Front Row, Sofa!5</a> | <a href="fs.php">Film Stripped</a> | <a href="/review.php?searchtype=top50">Top 50 Reviews</a> | <a href="/review.php?searchtype=top10">Top 10 Weekly Reviews</a> | <a href="/news.php?searchtype=siteupdates">Site Updates</a></div></div>
     	
     	<div id="subnavright"><a href="#" title="Help">Help</a> | <a href="/contests.php" title="Contests">Contests</a> | First time visitor? <a href="#" title="First time visitor?">Click Here</a>.</div>
     </div>
     <!-- /subnavigation -->

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You can use the onmouseover and onmouseout event handlers to change the CSS class of an element. In that way, you can change to a class with the background-image positioned differently. The .className property of an element is what you use to change the class name. The following is an example in which I used an image that was approximately 500 pixels wide with solid blue on the left half of the image and solid black on the right half of the image. When the user mouses over the <div>, the background slides over to the left changing the color of the background from blue to black; when the user mouses out, the image slides back to original position revealing a blue background.
    Code:
    <style type="text/css">
    <!-- 
    
    .s1{
    	color:white;
    	width: 245px;
    	background-image: url(blue_black.jpg);
    	background-repeat: no-repeat;
    }
    .s2{
    	color:white;
    	width: 245px;
    	background-image: url(blue_black.jpg);
    	background-repeat: no-repeat;
    	background-position: -250px;
    
    
    -->
    </style>
    </head>
    <body>
    
    <div class="s1" id="d" onmouseover="this.className='s2'" onmouseout="this.className='s1'">some text</div>
    
    </body>
    </html>
    However, if you are using solid colors, there is no reason to be sliding an image around. Instead, you can just change the CSS background-color of the element:
    Code:
    <head>
    <style type="text/css">
    <!-- 
    
    .s1{
    	color: white;
    	width: 250px;
    	background-color: blue;
    }
    
    -->
    </style>
    </head>
    <body>
    
    <div class="s1" id="d" onmouseover="this.style.backgroundColor='black'" onmouseout="this.style.backgroundColor='blue'">some text</div>
    
    </body>
    </html>


Bookmarks

Posting Permissions

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