PDA

View Full Version : holy rollovers batman!



lmorales
May 30th, 2012, 04:36 PM
I have a test site up at cortesenterprises.com/test/index.html

The goal is to have an image pop up in the middle of the page upon rolling over the logos, something happened where the left side works ( although the images shift a bit, im not sure why) but the right side works all funky or not at all..

I have validated it in dreamweaver but none of the errors Im getting make sense..
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>
<title>Cortes Entertainment Companies</title>
<link rel="icon"
type="image/ico"
href="images/favicon.ico"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23435708-4']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

</head>

<body>
<div id="container">

<img src="images/cortes.jpg" width="1000px" id="panel" />
<div id="content">
<div class="column1">

<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>
<ul class="work">
<li> <a href="http://www.overdrivedirect.net" target="_blank" border="0" onmouseover="ShowPicture('Style',1)" onmouseout="ShowPicture('Style',0)">
<img src="images/overdrive.jpg" width="200px"/></a>
</li>
<div id="Style"><img src="images/overhov.png" /></div>

<li> <a href="#" target="_blank" border="0" onmouseover="ShowPicture('Style4',1)" onmouseout="ShowPicture('Style4',0)">
<img src="images/honeys.jpg" width="230px" /></a>

<div id="Style4"><img src="images/honeyhov.png" /></div>
</li>
<li> <a href="http://www.dtentertainmentdistrict.com" target="_blank" border="0" onmouseover="ShowPicture('Style5',1)" onmouseout="ShowPicture('Style5',0)">
<img src="images/district.jpg" width="200px"/></a>

<div id="Style5"><img src="" /></div>
</li>
<li> <a href="http://www.blackumbrellacocktails.com" target="_blank" border="0" onmouseover="ShowPicture('Style6',1)" onmouseout="ShowPicture('Style6',0)">
<img src="images/black.jpg" width="200px"/></a>

<div id="Style6"><img src="images/blackhov.png" /></div>
</li>
<li> <a href="#" target="_blank" border="0" onmouseover="ShowPicture('Style7',1)" onmouseout="ShowPicture('Style7',0)">
<img src="images/brick.jpg" width="200px"/></a>

<div id="Style7"><img src="images/brickhov.png" /></div>
</li>
<li> <a href="#" target="_blank" border="0" onmouseover="ShowPicture('Style8',1)" onmouseout="ShowPicture('Style8',0)">
<img src="images/trend.jpg" width="200px"/></a>

<div id="Style8"><img src="images/trendhov.png" /></div>
</li>

</ul>
</div>



<div class="column3">
<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>
<ul class="work">
<li> <a href="http://www.62music.com" target="_blank" border="0" onmouseover="ShowPicture('Style2',1)" onmouseout="ShowPicture('Style2',0)">
<img src="images/62.jpg" width="250px"/></a>
</li>
<div id="Style2"><img src="images/62hov.png" /></div>

<li> <a href="http://www.terrace390.com" target="_blank" border="0" onmouseover="ShowPicture('Style3',1)" onmouseout="ShowPicture('Style3',0)">
<img src="images/terrace.jpg" width="250px"/></a>

<div id="Style3"><img src="images/terracehov.png" /></div>
</li>
<li> <a href="http://www.americanmudder.com" target="_blank" border="0" onmouseover="ShowPicture('Style9',1)" onmouseout="ShowPicture('Style9',0)">
<img src="images/mudder.jpg" width="200px"/></a>
<div id="Style9"><img src="images/mudderhov.png" /></div>
</li>
<li><a href="http://www.mooseheadmedia.com" target="_blank" border="0" onmouseover="ShowPicture('Style10',1)" onmouseout="ShowPicture('Style10',0)"><img src="images/moose.jpg" width="200px" /></a>
<div id="Style10"><img src="" /></div>
</li>
<li> <a href="#" target="_blank" border="0" onmouseover="ShowPicture('Style11',1)" onmouseout="ShowPicture('Style11',0)">
<img src="images/pub.jpg" /></a>
</a>
<div id="Style11"><img src="" /></div>
</li>

</ul>
</div>
<div style="clear:both"></div>
</div>
</div>
<div id="footer"><span id="footer_text"><img src="images/footer_logo.png" />Cortes Entertainment and Hospitality Group
&copy;<a href="http://www.cortesenterprises.com"> Cortes Enterprises</a> 2011 &bull; World Headquarters &bull; Orlando, FL&bull;• 1.877.888.9001 </span></div>
</div>
</body>
</html>


CSS

body {
margin:0px; padding:0px;
background-color:none;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}



#container {
background:none;
min-height:950px;
width:1000px;
position:relative;
margin-left: auto;
margin-right: auto;

}

/*
Logo / Menu / Panel Positioning
*/

#logo { position:absolute; top:0px; left:51px; }

#panel { position:absolute; top:0px; magin-left:auto;margin-right:auto; }

ul#menu {
margin:0px; padding:0px;
position:absolute; top:138px; left:0px;
}
ul#right_menu {
margin:0px;
padding:0px;
position:absolute;
top:138px;
right:110px;
width: 80px;
border:none;
}
ul#menu li, ul#right_menu li {
margin:0px; padding:0px;
list-style:none;
margin-right:10px;
font-size:9px;
text-transform:uppercase;
display:inline;
}
ul#menu li a, ul#right_menu li a {
text-decoration:none;
color:#000;
}
ul#menu li a:hover, ul#right_menu li a:hover {
text-decoration:none;
color:#FFF;
}


/*
Content
*/

#content {
padding-top:150px;
padding-left:0px;
margin-left:auto;
margin-right:auto;
width:1000px;
color:#666;
font-size:13px;
line-height:20px;
}
.column1 { float:left; width:250px; left:0;}

.column3 { float:right; width:270px; }

#content h2 {
font-family: Arial, Helvetica, sans-serif;
color:#999;
margin:0px 0px 20px 0px;
font-weight:normal;
}
#styledivs{width:200px;
margin-right:auto;
margin-left:auto;}

#Style {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}
#Style1 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style2 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}
#Style3 {
position:absolute;
visibility:hidden;
border:none;
padding:0px;
margin-right:500px;
top: 780px;
width:1000px;

}
#Style4 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}
#Style5 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}
#Style6 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style7{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style8{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style9{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style10{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style11{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}


ul.work {
margin:0px; padding:0px;
}
ul.work li {
list-style:none;
margin:0px; padding:0px;
clear:both;
}
ul.work li a {
color:#FFF;
display:block;
padding:5px 0px 5px 10px;
text-decoration:none;
font-size:10px;
}
ul.work li a img {
align:center;
margin-right:20px;
margin-bottom:20px;
}
ul.work li a h4 {
color:#666;
margin:0px;
font-weight:normal;
font-size:13px;
}
ul.work li a:hover, ul.work li a:hover h4 {
color:#ffffff;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}

/*
Footer
*/
#footer {
padding:10px 50px 0px 50px;
width:899px;

color:#000;
font-size:9px;
line-height:24px;
margin-left: auto;
margin-right: auto;
}
#footer img {
margin-left: auto;
margin-right: auto;

}
#footer span {
display:block;
width:899px;
margin-left: auto;
margin-right: auto;
}

#footer span_1 {
display:block;
margin-left: auto;
margin-right: auto;
width:300px;
}
#footer a {
color:#333;
text-decoration:none;
}
#footer a:hover { color:#F00; }




/*
General Styles
*/

a img { border:0px }

chrisf
May 30th, 2012, 06:25 PM
It does not look like the last 4 or so images have links.

And what do you mean "works all funky"?

lmorales
May 30th, 2012, 06:54 PM
I was able to fix a few issues, and yes some are missing images, because I havent recieved them yet. Whats wrong is that the right column shows the rollovers on the right, rather than dead center, and I have no clueeee why. My validation is also giving me weird errors like " The tag: "a" doesn't have an attribute: "border" in currently active versions."

The tag:"div" is not allowed within: "ul" It is only allowed within: applet, blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins, li, map, noframes, noscript, object, td, th.

tag: " body" allows optional closing tag. closing tag: "div" closes "body" context. Validation will proceed as if context is closed.

tag: " li" allows optional closing tag. closing tag: "a" closes "li" context. Validation will proceed as if context is closed.

lmorales
May 31st, 2012, 03:56 PM
Does anyone know whats going on with this page?

cortesenterprises.com/test/index.html

coothead
May 31st, 2012, 06:39 PM
Hi there lmorales,

you page does not validate...
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.cortesenterprises.com%2Ftest%2Findex.html

Also the image hovering can be achieved with CSS...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://www.cortesenterprises.com/test/">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Cortes Companies</title>

<link rel="icon" type="image/ico" href="images/favicon.ico">

<style type="text/css">
body {
font-family:arial,helvetica,sans-serif;
overflow-y:scroll;
}
#container {
width:1000px;
padding-top:111px;
margin:auto;
background-image:url(images/cortes.jpg);
background-repeat:no-repeat;
background-position:center top;
}
#left, #right {
position:relative;
float:left;
width:230px;
padding:0;
margin:0;
list-style-type:none;
}
#right {
float:right;
width:250px;
}
#left li,#right li{
margin:15px 0;
}
#left li img,#right li img {
position:absolute;
display:none;
}
#left li:hover img {
display:block;
left:300px;
top:15px;
}
#right li:hover img {
display:block;
right:300px;
top:15px;
}
#left li a img,#right li a img {
position:static;
display:block;
border:0;
}
#footer {
padding:90px 0 20px;
clear:both;
font-size:9px;
text-align:center;
}
</style>

</head>
<body>

<div id="container">

<ul id="left">
<li><a href="http://www.overdrivedirect.net"><img src="images/overdrive.jpg" width="200" alt=""></a><img src="images/overhov.png" alt=""></li>
<li><a href="#"><img src="images/honeys.jpg" width="230" alt=""></a><img src="images/honeyhov.png" alt=""></li>
<li><a href="http://www.dtentertainmentdistrict.com"><img src="images/district.jpg" width="200" alt=""></a><img src="#" alt=""></li>
<li><a href="http://www.blackumbrellacocktails.com"><img src="images/black.jpg" width="200" alt=""></a><img src="images/blackhov.png" alt=""></li>
<li><a href="#"><img src="images/brick.jpg" width="200" alt=""></a><img src="images/brickhov.png" alt=""></li>
<li><a href="#"><img src="images/trend.jpg" width="200" alt=""></a><img src="images/trendhov.png" alt=""></li>
</ul>

<ul id="right">
<li><a href="http://www.62music.com"><img src="images/62.jpg" width="250" alt=""></a><img src="images/62hov.png" alt=""></li>
<li><a href="http://www.terrace390.com"><img src="images/terrace.jpg" width="250" alt=""></a><img src="images/terracehov.png" alt=""></li>
<li><a href="http://www.americanmudder.com"><img src="images/mudder.jpg" width="200" alt=""></a><img src="images/mudderhov.png" alt=""></li>
<li><a href="http://www.mooseheadmedia.com"><img src="images/moose.jpg" width="200" alt=""></a><img src="#" alt=""></li>
<li><a href="#"><img src="images/pub.jpg" alt=""></a><img src="#" alt=""></li>
</ul>

<div id="footer">
Corporate Headquarters &bull; 4700 L.B. Mcleod Rd. &bull; Suite 4 &bull; Orlando, FL 32811
</div>

</div><!-- end #container -->

</body>
</html>

coothead

lmorales
May 31st, 2012, 07:20 PM
WOAH! THAT IS AWESOME!!!! I had to do a similar site to this a while ago, and the only solution I had found was javascript, however in this application it got all buggy. Thank you SOOOO Much!!!!! How does that work though? I see the div for the hover state, but in the html how does adding an additional image at the end of the link call the properties of hover?

coothead
May 31st, 2012, 07:48 PM
Hi there lmorales,

this is the CSS that displays the images...

#left li:hover img {
display:block;
left:300px;
top:15px;
}
#right li:hover img {
display:block;
right:300px;
top:15px;
}

I forgot to mention that you should remove any unwanted images, as IE,
and possibly some other browsers, will display a red X for them on hover. :eek:

coothead