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 14 of 14
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background in div tag on rollover

    hi everyone
    i am trying to change the background on rollover

    i have tried .wrap:hover {background:url(header2.jpg) no-repeat;} but it didnt work
    nothing important but would be nice to get it working

    this is in the css file - in .wrap i want the background to be header2.jpg after rollover

    Code:
    body {
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 9pt; 
    color: #000000; 
    background: #B4B8B7;
    margin:10px 0 0 0;
    padding:0 0 0 0;
    background: #8E979C url(images/bg.gif);
    text-align:center;
    }
    
    .wrap {
    position:relative;
    width:780px;
    margin:0 auto;
    padding:0 0 0 0;
    text-align:center;
    background: #ffffff url(header1.jpg) no-repeat;
    border-left:1px solid #5d6e75;
    border-right:1px solid #5d6e75;
    border-top:1px solid #5d6e75;
    }
    .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    .clearfix {display: inline-table;}
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    etc
    in the html page i have
    Code:
    <div class="wrap clearfix">

    tnx

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Right and we are supposed to know what your background image looks like how? It could also be some other problems in your code. You are going to need to be more specific if you want help meaning post a link to your page or at least show us the code and give us a location to your images.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    :hover will only work in IE on links (<a> tags), you'll need to either make an <a> behave like a div (display:block etc., which is a rather messy solution) or use javascript's onmouseover and onmouseout

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh sorry
    it is this layout - http://www.dbfnetwork.info/culturesh...zac_afternoon/
    here is the code in my pages

    html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <script LANGUAGE="JavaScript" src="ajax.js"></script>
    </head>
    <body>
    <div class="wrap clearfix">
      <div class="header"><img border="0" src="bandwidth.php"><strong><?php include "conf.php";
      $startTime = array_sum(explode(" ",microtime()));
    echo '  '.$bandwidth_used.'%';?> Bandwidth used today</strong></div>
      <div class="topnav" id="nav">
        <ul>
    	<li><li><a href="index.php">Home</a></li><?php 
    
    //select the table
    $result = mysql_query("SELECT DISTINCT movie, imdb FROM files");
    //grab all the content
    while($row=mysql_fetch_array($result))
    {	
      $movie = $row["movie"];
      $imdb = $row['imdb'];
    	  $str = '<li><a href="?id='.$imdb.'">'.$movie.'</a></li>';
    echo $str;
    }
    ?></li>
        </ul>
      </div>
      <div class="container clearfix">
        <div class="news_right clearfix" id="news">
          <div class="news_cnr_top"><img src="images/cnr_tl.gif" alt="corner" width="8" height="8" class="cnr" style="display: none" /></div>
          
          <p><div id="ajaxTest" align="center"><p align="center"><span class="news_title">Your download will appear here</span><br />	<p style="margin-top: 0; margin-bottom: 0"><font face="Tahoma" size="1">You must select a video on the left first</font></p>
    	</div></p>
          <div class="news_cnr_bottom"><img src="images/cnr_bl.gif" alt="corner" width="8" height="8" class="cnr" style="display: none" /></div>
        </div><?php include "conf.php";
      	if ($_SERVER['REQUEST_METHOD'] == 'GET' && count($_GET) > 0){
    			
      $idfilme = @$_GET['id'] ;
    
    		$imdb_url = "http://imdb.com/title/".$idfilme."/";
    	  
    		$imdb = @fopen($imdb_url, "r");
    		//if ($imdb == FALSE) { echo 'imdb_invalido'; return; }
    		/*while (!feof($imdb))
    			$imdb_raw .= fgets($imdb, 4096);
    		fclose($imdb);
    		*/
    			$imdb_raw = file_get_contents($imdb_url);
    			  preg_match ( "'<h1><strong class=\"title\">(.*?)</strong></h1>'s" , $imdb_raw , $title );			
    			$title = str_replace("\n"," ", trim(strip_tags($title[1])));
    			
    			  preg_match ( "'Genre:</b>\\n(.*?)(\(more\)|\\n)'" , $imdb_raw , $genre );			
    			$genre = @strip_tags($genre[1]);
    			  preg_match ( "'Tagline:</b> (.*?)( <a href|\\n)'" , $imdb_raw , $tagline );			
    			$tagline = @$tagline[1];
    			  preg_match ( "'Plot (Outline|Summary):</b> (.*?)( <a href=|\\n)'" , $imdb_raw , $plot );		
    			$plot = @$plot[2];
    			  preg_match ( "'Runtime:</b>\\n(.*?)\\n<br>'" , $imdb_raw , $runtime );		
    			$runtime = @$runtime[1];
    			if (strlen($runtime) > 50) $runtime = substr($runtime,0,50)."...";
    			  preg_match ( "'User Rating:(.*?)\\n\\n(.*?)\\n(.*?)\\n<b>(.*?)/10</b> \((.*?) votes\)\\n'" , $imdb_raw , $vote );					
    			$votes = @$vote[5]; 
    			$vote = @$vote[4];
    			if ($vote >= 0) $cor = 'red';
    			if ($vote >= 4) $cor = '#C8C800';
    			if ($vote >= 8) $cor = 'green';
    			$voteimg = 4 + $vote * 9 + log10($vote) ;
    			$voteimg = '<span style="position:relative; font-size: 16px; background: url(\'images/icons/imdb_rate_full.gif\')"><img width="'.($voteimg - 1).'" height="16" src="images/icons/tp.gif"></span><span style="font-size: 16px; background: url(\'images/icons/imdb_rate_none.gif\') right"><img width="'.(101 - $voteimg).'" height="16" src="images/icons/tp.gif"></span>';
    			  preg_match ( "'top 250: (.*?)</a>'" , $imdb_raw , $top );	
    			$top = @strip_tags($top[0]);
    			if (isset($top)) $top = '<a href=http://imdb.com/chart/top]'.$top.'</a>';
    			  preg_match ( "'Awards:</b> \\n(.*?)\\n<a href's" , $imdb_raw , $awards );		
    			$awards = @str_replace("\n"," ",$awards[1]);			
    			  preg_match ( "'(Cast overview,|Complete credited cast|Credited cast)(.*?)<a href=\"(.*?)\">(.*?)</a>(.*?)<a href=\"(.*?)\">(.*?)</a>(.*?)<a href=\"(.*?)\">(.*?)</a>(.*?)<a href=\"(.*?)\">(.*?)</a>(.*?)<a href=\"(.*?)\">(.*?)</a>(.*?)'s" , $imdb_raw , $actors ); 
    			$actors = "<a href=http://imdb.com".@$actors[3].">$actors[4]</a>, ".
    					   "<a href=http://imdb.com".@$actors[6].">$actors[7]</a>, ".
    					   "<a href=http://imdb.com".@$actors[9].">$actors[10]</a>, ".
    					   "<a href=http://imdb.com".@$actors[12].">$actors[13]</a>, ".
    					   "<a href=http://imdb.com".@$actors[15].">$actors[16]</a>";
    					    
    
    					  	echo '<p class="page_title"><b><font size="6">' . $title . '</font></b></p><br>';
    
    		echo '<div align="center"><table width="500">	<tr>
    		<td colspan="2">
    	<p class="eua"><b>Tagline</b>: ' . $tagline . '<br>
    <b>Plot Outline</b>: ' . $plot . '<br>
    <b>User Rating</b>: ' . $voteimg . '<br>
    <b>Runtime</b>: ' . $runtime . '<br>
    <b>Awards</b>: ' . $awards . '<br>
    <b>Cast</b> <font size="1">1&gt;<i>(first 5)</i></font>: ' . $actors . '</p></td></tr>';
    
     echo '<tr>
    		<td width="240" bgcolor="#000000"><b><font color="#FFFFFF">Filename</font></b></td>
    		<td width="60" bgcolor="#000000"><b><font color="#FFFFFF">Count</font></b></td>
    	</tr>';
    //select the table
    $result = mysql_query("SELECT *  FROM `files` WHERE `imdb` = '$idfilme'");
    //grab all the content
    while($row=mysql_fetch_array($result))
    {	
     $id=$row["id"];
     $filename=$row["filename"];
     $movie=$row["movie"];
       $date=$row["date"];
     $count=$row["count"];
     $fname=str_replace('_'," ",$filename);
     $fname=str_replace('.zip',"",$fname);
      $fname=str_replace('/a-z/',"/A-Z/",$fname);
      $tname=str_replace('.zip',".jpg",$filename);
          $idc = "'";
    	$idt = $idc.''.$id.''.$idc.'';
    	 // $str = '<p onClick="sendRequest('.$idt.')">'.$fname.'</p>';
          //display the row
    	      ?>
    	<tr onMouseOver="this.bgColor = '#7DA7D9'" onclick="sendRequest(<?php echo ''.$idt.''?>)"
        onMouseOut ="this.bgColor = '#FFFFFF'"
        bgcolor="#FFFFFF">
    	<?php
     echo '
    		<td width="240"><a href="javascript:sendRequest('.$idt.');"><font color="#000000">
    <span style="text-decoration: none">'.$fname.'</span></font></a></td>
    		<td width="60">'.$count.'</td>
    	</tr>';
    }
    
     echo '</table></div>';
     	}
    	else {
    	 echo '<p class="page_title"><b><font size="5">Latest videos</font></b></p></br>';
    	
    $result = mysql_query("SELECT *  FROM `files` order by id desc limit 5 ");
    //grab all the content
    while($row=mysql_fetch_array($result))
    {	
     $id=$row["id"];
     $filename=$row["filename"];
     $movie=$row["movie"];
       $date=$row["date"];
     $count=$row["count"];
     $fname=str_replace('_'," ",$filename);
     $fname=str_replace('.zip',"",$fname);
      $fname=str_replace('/a-z/',"/A-Z/",$fname);
            $idc = "'";
    	$idt = $idc.''.$id.''.$idc.'';
      echo '<p onClick="sendRequest('.$idt.')" class="page_title" align="left" style="margin-top: 0; margin-bottom: 0"><font size="4"><b>'.$fname.'<b></font></p>
      <p onClick="sendRequest('.$idt.')" align="left" style="margin-top: 0; margin-bottom: 0"><font size="3">From movie - '.$movie.'</font></p></br>';
    }
    
    	}
    
    
    ?>  
      </div>
    
      <div class="footer" id="footer">
    	Time taken to load page - <?php echo round((array_sum(explode(" ",microtime())) - $startTime),4).' sec';?> </div>
    </div></br>
    </body>
    </html>
    css
    Code:
    /* culture shock: prozac afternoon by pogy366 - Sept. 2005 */
    
    /******* structure and layout *******/
    body {
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 9pt; 
    color: #000000; 
    background: #B4B8B7;
    margin:10px 0 0 0;
    padding:0 0 0 0;
    background: #8E979C url(images/bg.gif);
    text-align:center;
    }
    
    .wrap {
    position:relative;
    width:780px;
    margin:0 auto;
    padding:0 0 0 0;
    text-align:center;
    background: #ffffff url(images/header1.jpg) no-repeat;
    border-left:1px solid #5d6e75;
    border-right:1px solid #5d6e75;
    border-top:1px solid #5d6e75;
    }
    .wrap.rollover {
    color:#0000ff;
    background: #ffffff url(images/header2.jpg) no-repeat;
    text-decoration: none;
    }
    .wrap.rollover:hover {
    color:#0000ff;
    background: #ffffff url(images/header2.jpg) no-repeat;
    text-decoration: none;
    }
    
    .header {
    position:relative;
    clear:none;
    width:770px;
    height:25px;
    margin:100px 0 0 0;
    padding:0 0 0 0;
    background:transparent;
    color:#ffffff;
    text-align:right;
    }
    
    .topnav {
    position:relative;
    clear:both;
    width:780px;
    height:21px;
    margin:0 0 0 0;
    padding:0 0 0 0;
    background:#cccccc;
    font-size:8pt;
    }
    
    .container {
    position:relative;
    clear:both;
    width:760px;
    margin:10px 10px 0 10px;
    padding:0 0 0 0;
    background:#ffffff;
    color:#000000;
    text-align:left;
    }
    
    .news_right {
    position:relative;
    float:right;
    clear:both;
    width:200px;
    margin:0 0 5px 10px;
    padding:0 10px 0 10px;
    background:#F1F8FE;
    color:#465670;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;
    }
    
    .news p {
    margin:10px 10px;
    }
    
    .news_cnr_top {
    background:url(images/cnr_tr.gif) no-repeat top right;
    margin:0 -10px 0 -10px;
    }
    
    .news_cnr_bottom {
    background:url(images/cnr_br.gif) no-repeat top right;
    margin:0 -10px 0 -10px;
    }
    
    img.cnr {
    width:8px;
    height:8px;
    border:none;
    display: block !important;
    }
    
    .footer {
    position:relative;
    clear:both;
    width:780px;
    margin:20px 0 0 0;
    padding:4px 0 4px 0;
    background:#ffffff;
    font-size:8pt;
    text-align:center;
    border-top:1px solid #5d6e75;
    border-bottom:1px solid #5d6e75;
    }
    
    
    /******* top navigation *******/
    #nav ul{
    padding:0 0 0 0;
    margin:0 0 0 0;
    white-space: nowrap;
    font-size:8pt;
    color:#ffffff;
    float:left;
    width:100%;
    background:#ffffff url(images/topnav_bg_grey.gif);
    list-style:none;
    }
    
    #nav ul li{
    display:inline;
    list-style:none;
    }
    
    #nav ul li a{
    margin: 0 0 0 0;
    padding: .25em 2em .3em 1em;
    background:#ffffff url(images/topnav_bg_grey.gif);
    color: #000000;
    text-decoration:none;
    float: left;
    border-right:1px solid #cccccc;
    }
    
    #nav ul li a:hover{
    background:#8DA8D5 url(images/topnav_bg.gif);
    color: #ffffff;
    text-decoration:none;
    border-right:1px solid #cccccc;
    }
    
    
    
    
    /******* links *******/
    
    a {
    color:#7DA7D9;
    text-decoration:underline;
    }
    
    a:hover {
    color:#E39243;
    text-decoration:none;
    }
    
    #news a {
    color:#D3812D;
    text-decoration:underline;
    }
    
    #news a:hover {
    color:#E39243;
    text-decoration:none;
    }
    
    #footer a {
    color:#5d6e75;
    text-decoration:none;
    }
    
    #footer a:hover {
    color:#D3812D;
    text-decoration:none;
    }
    
    /******* fonts and colors *******/
    
    .header strong {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#ffffff;
    font-size:13pt;
    letter-spacing:.7em;
    }
    
    .news_title {
    font-family:Arial, Helvetica, sans-serif;
    color:#465670;
    font-size:10pt;
    font-weight:bold;
    }
    
    .page_title {
    font-family:Arial, Helvetica, sans-serif;
    color:#4669A4;
    font-size:10pt;
    font-weight:bold;
    padding: 0 0 0 0;
    margin: 0 0 -8px 0;
    }
    
    
    /******* images *******/
    
    img {
    border:none;
    }
    
    .right img{
    position:relative;
    float:right;
    padding:0 0 0 0;
    margin:5px 2px 2px 5px;
    }
    
    .left img{
    position:relative;
    float:left;
    padding:0 0 0 0;
    margin:0 5px 0 2px;
    }
    
    
    
    /******* workarounds and hacks *******/
    .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    .clearfix {display: inline-table;}
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    aah posted same time as GJay - tnx 4 the reply i guess it wont work -doesnt matter
    Last edited by mobilehell; 04-29-2006 at 06:00 PM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Umm did you even upload the header1.jpg and header2.jpg image? Are you just trying to change the header image on your current header?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Aug 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    both images are on my harddisk and they are in the right locations - i checked

    see on http://www.dbfnetwork.info/culturesh...zac_afternoon/ i am trying to change the cloud image to something else on rollover and back to the cloud image when the mouse doesnt hover over it

    tnx 4 helping

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Umm yeah it would help if you actually uploaded those pictures as some people (like me) actually test things before a solution is given.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Aug 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    lol tnx dude
    i attached it
    Attached Thumbnails Attached Thumbnails background in div tag on rollover-header1.jpg   background in div tag on rollover-header2.jpg  

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    .header_text {
    height:125px;
    }
    .header_text a {
    display:block;
    height:55px;
    background:#FFF url(header1.jpg) no-repeat;
    color:#000;
    width:760px;
    padding-right:20px;
    padding-top:70px;
    text-align:right;
    text-decoration:none;
    color:#FFF;
    }
    .header_text a:hover {
    background:#000 url(header2.jpg) no-repeat;
    color:#FFF;
    }
    h1 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#ffffff;
    font-size:2em;
    letter-spacing:.5em;
    text-transform:lowercase;
    margin:0;
    padding:0;
    }
    </style>
    </head>
    <body>
    <div class="header_text"><h1><a href="#">culture shock</a></h1></div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Aug 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thnx man - appreciate it

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Try: <TAG onmouseover="this.style.background = 'NEW BG CSS';" onmouseout="this.style.background = 'OLD BG CSS';"></TAG>

    Replace everything in capital letters as necessary. It's inline JavaScript; not the most efficient thing but it should work.

    Example: <div onmouseover="this.style.background = '#000 url(bg2.png) no-repeat';" onmouseout="this.style.background = '#000 url(bg1.png) no-repeat';"></div>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    New Coder
    Join Date
    Aug 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cool that worked fine

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I don't give javascript solutions if I know of a CSS one. I personally browse with JS disabled by default.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by _Aerospace_Eng_
    I don't give javascript solutions if I know of a CSS one. I personally browse with JS disabled by default.
    Unfortunately that CSS solution is limited in that it doesn't work on non-anchor tags in Internet Explorer; I believe the request was for a hover on a background image for a div and didn't assume the want for an anchor tag. That PHP stuff is just a jumble of symbols to me though so I could be in error.

    JavaScript being enabled is also a limiting factor however I think that people who purposely disable their JRE or lack this functionality are in the minority. Of course, you could also hit me with "but so are standards browser users" but that's a different story entirely. :p
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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