2 Replies Latest reply on Aug 12, 2006 6:16 AM by eppo747

    changing channels

    eppo747 Level 1
      Hi,

      On the CSS Play site I saw an interesting example ( http://www.cssplay.co.uk/menu/mytv.html) that comes close to a construction I want to make. I stripped the code of the example down to the current code which I've attached to this post. It works fine but what I really want to accomplish is that when you move your mouse out of the link the image belonging to the just hovered link should stay on the 'tv screen' and preferrably the link should stay 'highlighted' . The 'mouse out' problem would normally be solved through a 'set text of layer' behaviour'. But I was wondering if it would be possible without javascript. Anyone?

        • 1. Re: changing channels
          Level 7
          Possible without javascript? I doubt it. In fact, I'm sure of it.

          By the way, that page will be rendered in quirks mode in IE because of the
          XML prolog. Pity.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "eppo747" <webforumsuser@macromedia.com> wrote in message
          news:ebkeoj$m9t$1@forums.macromedia.com...
          > Hi,
          >
          > On the CSS Play site I saw an interesting example
          > ( http://www.cssplay.co.uk/menu/mytv.html) that comes close to a
          > construction I
          > want to make. I stripped the code of the example down to the current code
          > which
          > I've attached to this post. It works fine but what I really want to
          > accomplish
          > is that when you move your mouse out of the link the image belonging to
          > the
          > just hovered link should stay on the 'tv screen' and preferrably the link
          > should stay 'highlighted' . The 'mouse out' problem would normally be
          > solved
          > through a 'set text of layer' behaviour'. But I was wondering if it would
          > be
          > possible without javascript. Anyone?
          >
          >
          >
          > <?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD
          > XHTML
          > 1.0 Strict//EN" " http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
          > <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">
          > <head>
          > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          > <title> Stu Nicholls | CSSplay | What's on TV</title>
          > <style type="text/css">
          > #container {
          > width:224px;
          > height:220px;
          > position:relative;
          > top: 50px;
          > }
          > #case {
          > width:255px;
          > height:170px;
          > position:relative;
          > background-color: #FFCC33;
          > }
          > #tvscreen {width:236px; height:152px; position:absolute; top:10px;
          > left:10px;
          > overflow:hidden; text-align:center; color:#ff0}
          >
          > #tvmenu {position:absolute; top:170px; left:50px; width:200px;
          > height:100px;
          > font-family:"courier new", monospace;}
          > #tvmenu:hover {background:transparent;}
          > #tvmenu a:visited {color:#fff; text-decoration:none; font-size:14px;
          > background:#000;}
          > #tvmenu a {color:#fff; text-decoration:none; font-size:14px;
          > background:#000;}
          > #tvmenu a:hover {color:#fff; background:#c00; text-decoration:none;}
          > #tvmenu a img {display:block; position:absolute; top:-84px; left:38px;
          > width:1px; height:1px; border:0px;}
          > #tvmenu a:hover img {display:block; position:absolute; top:-160px;
          > left:-40px;
          > width:236px; height:152px; border:0px;}
          >
          >
          > </style>
          > </head>
          >
          > <body bgcolor="#333333">
          > <div id="wrapper">
          > <div id="container">
          > <div id="case">
          > <div id="tvscreen"><img src="backgr.gif"></div>
          > </div>
          > <div id="tvmenu"> <a href="#nogo"> 1 <img src="black.gif"
          > alt=""
          > /></a>
          > <a href="#nogo"> 2 <img src="green.gif" alt="" /></a> <a
          > href="#nogo"> 3 <img src="red.gif" alt="" /></a>
          > </div>
          > </div>
          > </div>
          > </body>
          > </html>
          >


          • 2. Re: changing channels
            eppo747 Level 1
            Thanks Murray,

            I'll probably stick to the 'set text of layer' behaviour.