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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    212
    Thanks
    10
    Thanked 1 Time in 1 Post

    Exclamation holy rollovers batman!

    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
    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>
    	<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
    Code:
    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 }

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    It does not look like the last 4 or so images have links.

    And what do you mean "works all funky"?

  • #3
    Regular Coder
    Join Date
    Mar 2011
    Posts
    212
    Thanks
    10
    Thanked 1 Time in 1 Post
    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.

  • #4
    Regular Coder
    Join Date
    Mar 2011
    Posts
    212
    Thanks
    10
    Thanked 1 Time in 1 Post
    Does anyone know whats going on with this page?

    cortesenterprises.com/test/index.html

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there lmorales,

    you page does not validate...


    Also the image hovering can be achieved with CSS...
    Code:
    <!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

  • Users who have thanked coothead for this post:

    lmorales (05-31-2012)

  • #6
    Regular Coder
    Join Date
    Mar 2011
    Posts
    212
    Thanks
    10
    Thanked 1 Time in 1 Post
    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?
    Last edited by lmorales; 05-31-2012 at 06:25 PM.

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there lmorales,

    this is the CSS that displays the images...
    Code:
    #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.

    coothead


  •  

    Posting Permissions

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