SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Div rollover, Div Animate?

    Hello all,

    I would like to use a DIV and css for a action of a sort.

    You click on the DIV and another DIV appears with a form in it or some pictures or text and links. Is this possible? How do I show hide the different info in the div?

    Thanks.
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi, you should use javascript for that. CSS isn't really built for behavioral tasks.

  3. #3
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok.

    Quick side note...

    I have a fix in IE for the PNG problem. However, it is not working with a div bg I have. Any clues to why not? check out SKI in IE and click on a black box on the right.

    Here is my css:
    Code:
    /*MAIN HTML CSS*/
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 101%;
    	color: #333333;
    	text-decoration: none;
    	background-attachment: scroll;
    	background-color: #FFFFFF;
    	background-image: url(images/bg_blk_wht_fade.gif);
    	background-repeat: repeat-x;
    	background-position: left top;
    	margin: 0px;
    	padding: 0px;
    }
    img {
    	behavior: url(pngHack.htc); /*IE PNG HACK*/
    }
    img.xray{
    	filter: Invert;
    }
    img.left{
    	float:left;
    	padding-right: 8px;
    	padding-bottom: 2px;
    }
    /*LAYOUT SECTION*/
    #wrapper {
    	background-image: url(images/header700x400.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	padding: 0px;
    	height: 400px;
    	width: 700px;
    	margin-right:auto;
    	margin-left:auto;
    }
    #box1 {
    	height: 66px;
    	width: 50px;
    	position:absolute;
    	margin-top: 300px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 620px;
    }
    #box2 {
    	height: 66px;
    	width: 50px;
    	position:absolute;
    	margin-top: 300px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 554px;
    }
    #box3 {
    	height: 66px;
    	width: 50px;
    	position:absolute;
    	margin-top: 300px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 488px;
    }
    #box1_info{
    	position:absolute;
    	background-image: url(images/box1_div.png);
    	background-repeat: no-repeat;
    	height: 284px;
    	width: 278px;
    	margin-left: 402px;
    	margin-top: 20px;
    	visibility: hidden;
    }
    #box1_info .hide{
    	position:absolute;
    	margin-left: 245px;
    	margin-top: 10px;
    }
    #box1_info .text{
    	margin: 10px 10px 10px 10px;
    	font-family: "Courier New", Courier, mono;
    	font-size: 14px;
    	font-weight: bold;
    	color: #333333;
    	text-decoration: none;
    }
    .html #box1_info .text{
    	margin-top: 50px;
    	margin-right: 10px;
    	margin-bottom: 0px;
    	margin-left: 10px;
    }
    #box2_info{
    	position:absolute;
    	background-image: url(images/box2_div.png);
    	background-repeat: no-repeat;
    	height: 284px;
    	width: 278px;
    	margin-left: 402px;
    	margin-top: 20px;
    	visibility: hidden;
    
    }
    #box2_info .hide{
    	position:absolute;
    	margin-left: 245px;
    	margin-top: 10px;
    }
    #box2_info .text{
    	margin: 10px 10px 10px 10px;
    	font-family: "Courier New", Courier, mono;
    	font-size: 14px;
    	font-weight: bold;
    	color: #333333;
    	text-decoration: none;
    }
    #box3_info{
    	position:absolute;
    	background-image: url(images/box3_div.png);
    	background-repeat: no-repeat;
    	height: 284px;
    	width: 278px;
    	margin-left: 402px;
    	margin-top: 20px;
    	visibility: hidden;
    }
    #box3_info .hide{
    	position:absolute;
    	margin-left: 245px;
    	margin-top: 10px;
    }
    #box3_info .form{
    	padding: 0px 25px 25px 25px; 
    	font-family: "Courier New", Courier, mono;
    	font-size: 16px;
    	font-weight: bold;
    	color: #333333;
    	text-decoration: none;
    }
    #box3_info .form input {
    	font-family: "Courier New", Courier, mono;
    	font-size: 16px;
    	font-weight: bold;
    	color: #333333;
    	text-decoration: none;
    }
    #box3_info .form .submit {
    	font-family: "Courier New", Courier, mono;
    	font-size: 16px;
    	font-weight: bold;
    	color: #333333;
    	text-decoration: none;
    	background-color: #FFCC33;
    	padding: 1px;
    	border: 1px dashed #333333;
    	cursor:pointer;
    }
    #box3_info .form .red {
    	color: #FF0000;
    	text-align: justify;
    }
    #logo{
    	height: 195px;
    	width: 179px;
    	position:absolute;
    	margin-top: 215px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 20px;
    }
    #content{
    	font-family: Arial, Helvetica, sans-serif, "Arial Rounded MT Bold";
    	font-size: 12px;
    	color: #333333;
    	position:absolute;
    	margin-top: 410px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	width: 700px;
    	height: auto;
    }
    #content h1 {
    	font-family: Arial, Helvetica, sans-serif, "Arial Rounded MT Bold";
    	font-size: 18px;
    	font-weight: bold;
    	color: #006699;
    	text-decoration: none;
    }
    #content #footer{
    	position:absolute;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	width: 700px;
    	height: 40px;
    	font-size: 10px;
    	font-weight: bold;
    	text-decoration: none;
    	color: #000000;
    	text-align: left;
    	padding: 0px;
    	border-bottom-width: 5px;
    	border-bottom-style: solid;
    	border-bottom-color: #7AA0F1;
    }
    #content #footer #text{
    	float: left;
    	margin-top:25px;
    }
    #content #footer #mtns{
    	float: right;
    }
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>praXis Ski Company - Donner Summit California</title>
    <link href="ski.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    
    function MM_showHideLayers() { //v6.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
    }
    //-->
    </script>
    </head>
    
    <body onload="MM_preloadImages('images/box_skis.png','images/box_contact.png','images/box_about.png','images/close_over.png','images/box1_div.png','images/box2_div.png','images/box3_div.png','images/mtns.png')">
    <div id="wrapper">
    <div id="box1_info">
      <div class="hide">
      <a href="#" onclick="MM_showHideLayers('box1_info','','hide')" onmouseover="MM_swapImage('box1_close','','images/close_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/close.png" alt="Close Praxis Contact Form" name="box1_close" width="15" height="15" border="0" id="box1_close" /></a></div><!--BOX 1 HIDE-->
      <div class="text"><img src="images/ski.png" alt="PraXis Skis Donner Summit California" longdesc="http://www.praxisskis.com" class="left"/><br />
    PraXis Skis for the Future Skoolers today. Slide rocks, jibb the cod, one up your bros, throw corked 7's off 50 footers, or just slay 3000' of AK pow on your first heli trip. Whatever the case. PraXis.</div>
    </div><!--box1-->
    <div id="box2_info">
    <div class="hide">
      <a href="#" onclick="MM_showHideLayers('box2_info','','hide')" onmouseover="MM_swapImage('box2_close','','images/close_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/close.png" alt="Close Praxis About Us Window" name="box2_close" width="15" height="15" border="0" id="box2_close" /></a></div><!--BOX 2 HIDE-->
        <div class="text"><img src="images/praxis_png_sm.png" alt="Praxis Skis Donner Summit California" longdesc="http://www.praxisskis.com" class="left"/><br />
    PraXis Skis came out of the mind of Keith O'Meara early in his ski bum life. How else can you ski on what you like without building it yourself? Making his own press and getting forms drawn up and cut by fabricators, the project was on. Orders are flying out the doors, the skis are destroying the mountain, and praXis is making a name for itself in the new market. [<a href="#">more</a>]</div>
    </div><!--box 2-->
    <div id="box3_info">
    <div class="hide">
      <a href="#" onclick="MM_showHideLayers('box3_info','','hide')" onmouseover="MM_swapImage('box3_close','','images/close_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/close.png" alt="Close Praxis Skis Window" name="box3_close" width="15" height="15" border="0" id="box3_close" /></a>
    </div><!--BOX 3 HIDE-->
    <div class="form">
    <form action="" method="post" name="contact">
    <p><span class="red">Send your questions and comments.</span><br />
      Name<br />
          <input name="name" type="text" id="name" size="20" />
          <br />
        Email <br />
      <input name="email" type="text" id="email" size="20" />
      <br />
        Comment<br />
      <textarea name="comment" cols="24" id="comment"></textarea>
      </p>
      <p>
        <input name="submit" type="submit" class="submit" id="submit" tabindex="4" value="Submit" />
        </p>
    </form>
    </div><!--BOX 1 FORM-->
    </div><!--box 3-->
      <div id="logo"><img src="images/praxis_logo_png.png" alt="Praxis Ski Company - Souplush Ride Get it Now!" name="xray" width="190" height="174" /></div>
      <div id="box3"><a href="#" onclick="MM_showHideLayers('box1_info','','show','box2_info','','hide','box3_info','','hide')" onmouseover="MM_swapImage('praxis skis','','images/box_skis.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/box.png" alt="Praxis Skis" name="praxis skis" width="50" height="66" border="0" id="praxis skis" /></a></div>
      <div id="box2"><a href="#" onclick="MM_showHideLayers('box1_info','','hide','box2_info','','show','box3_info','','hide')" onmouseover="MM_swapImage('about','','images/box_about.png',0)" onmouseout="MM_swapImgRestore()"><img src="images/box.png" alt="About praXis Skis" name="about" width="50" height="66" border="0" id="about" onclick="MM_showHideLayers('box1_info','','hide','box2_info','','show','box3_info','','hide')" /></a></div>
      <div id="box1"><a href="#" onclick="MM_showHideLayers('box1_info','','hide','box2_info','','hide','box3_info','','show')" onmouseover="MM_swapImage('Contact Praxis Skis','','images/box_contact.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/box.png" alt="Contact praXis ski Company" name="Contact Praxis Skis" width="50" height="66" border="0" id="Contact Praxis Skis" /></a></div>
      <div id="content"> 
        <h1>Welcome to PraXis Skis.com</h1>
        <p><img src="images/firstaid.png" alt="Handbuilt Skis for Freeride Xcellence" name="Handbuilt" width="40" height="39" class="left" id="Handbuilt" longdesc="http://www.praxisskis.com" />Hand-built, solid, freeride skis. Tried and tested. Taking 1st place, day 
          1, at the Snowbird US Freeskiing Comp. Stay tuned to more and more as the 
          progression continues... </p>
        <p>&nbsp;</p>
        <h1>Season off to Slower Start </h1>
        <p><img src="images/slowstart.png" alt="Lake Tahoe Snow Conditions Skiing" width="40" height="39" class="left" />The Ski Season in Lake Tahoe is off to a bit of a slower start this year. Catch a ride up to Mt. Baker or Whistler for 13' of the fresh white goods. It's coming... but I'd still take the trip if I was you. </p>
        <p>&nbsp;</p>
    	<div id="footer">
    	<div id="text">praXis skis 2006 | donner summit california | handbuilt | highest quality | local</div>
    	<div id="mtns"><img src="images/mtns.png" alt="PraXis Skis Destroy Mountains" width="180" height="40" longdesc="http://www.praxisskis.com" /></div>
    	</div>
    	  </div><!--content end-->
    </div>
    </body>
    </html>
    Do I need to apply the PNG fix some other way????
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!


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
  •