...

View Full Version : background in div tag on rollover



mobilehell
04-29-2006, 05:05 PM
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


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
<div class="wrap clearfix">


tnx

_Aerospace_Eng_
04-29-2006, 05:11 PM
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.

GJay
04-29-2006, 05:53 PM
: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

mobilehell
04-29-2006, 05:58 PM
oh sorry
it is this layout - http://www.dbfnetwork.info/cultureshock/prozac_afternoon/
here is the code in my pages

html

<!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

/* 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:)

_Aerospace_Eng_
04-29-2006, 06:08 PM
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?

mobilehell
04-29-2006, 06:17 PM
both images are on my harddisk and they are in the right locations - i checked

see on http://www.dbfnetwork.info/cultureshock/prozac_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

_Aerospace_Eng_
04-29-2006, 06:26 PM
Umm yeah it would help if you actually uploaded those pictures as some people (like me) actually test things before a solution is given.

mobilehell
04-29-2006, 06:34 PM
lol tnx dude
i attached it

_Aerospace_Eng_
04-29-2006, 06:50 PM
<!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>

mobilehell
04-29-2006, 07:02 PM
thnx man - appreciate it:thumbsup:

Arbitrator
04-29-2006, 07:40 PM
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>

mobilehell
04-30-2006, 08:55 PM
cool that worked fine :)

_Aerospace_Eng_
04-30-2006, 09:00 PM
I don't give javascript solutions if I know of a CSS one. I personally browse with JS disabled by default.

Arbitrator
04-30-2006, 10:37 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum