Fading an overlay? - Teh Forum

<body> <div id="header"> <span class="left"> <span class="back"><a href="lthread_list.php?webtag=DEFAULT"><span class="image mobile_back" title="Back"></span></a></span> <span class="image mobile_logo" title="Beehive Forum Logo"></span> </span> <ul> <li> <a class="reply_all" href="lpost.php?webtag=DEFAULT&reply_to=42018.0&return_msg=42018.1"> <span class="image mobile_reply_all"></span><span class="text">Reply to All</span> </a> </li> <li> <a class="navigation" href="#"> <span class="image mobile_navigation"></span><span class="text">Show messages</span> </a> </li> <li> <a class="main" href="#"><span class="image mobile_menu" title="Menu"></span> </a> </li> </ul> </div> <div class="menu main"> <ul> <li><a href="lthread_list.php?webtag=DEFAULT">Messages</a></li> <li><a href="lpm.php?webtag=DEFAULT">Inbox</a></li> <li><a href="lsearch.php?webtag=DEFAULT">Search</a></li> <li><a href="llogon.php?webtag=DEFAULT">Login</a></li> </ul> </div> <div class="menu navigation"><a href="lmessages.php?webtag=DEFAULT&msg=42018.1">1–7</a></div> <div id="page_content"> <h3 class="thread_title"><a href="index.php?webtag=DEFAULT&amp;msg=42018.1">Fading an overlay?</a> </h3> <div id="messages" data-navigation="42018_1_7_10"> <a name="a42018_1"></a><div class="message" id="message_42018_1"> <div class="message_header"> <div class="message_from"> From: JonCooper<span class="message_time"> 4 Sep 2017 20:35</span> <div class="clearer"></div> </div><div class="message_to">To: ALL<span class="message_count">1 of 7</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=42018.1">42018.1</a></div> <div class="message_body"> I have a map, and I want to overlay an image in such a way that I can fade the image from clear to opaque and back at will (like some weather sites do with radar information etc)<br /><br /> I started off thinking I needed to look at how the Z index can be messed with, but now I think I may be up the wrong creek.<br /><br /> Anyone care to point in the right direction?</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=42018.1&return_msg=42018.1" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="42018.1"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a42018_2"></a><div class="message" id="message_42018_2"> <div class="message_header"> <div class="message_from"> From: graphitone<span class="message_time"> 4 Sep 2017 20:44</span> <div class="clearer"></div> </div><div class="message_to">To: JonCooper <span><span class="image post_read" title="Read: 4 Sep 2017 20:50"></span></span> <span class="message_count">2 of 7</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=42018.2">42018.2</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=42018.1#a42018_1" target="_self">42018.1</a></div> <div class="message_body"> Is this for a display, or going somewhere you won't have the convenience of having the thing in front of you to twiddle? 'Cos Photoshop'll let you do that.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=42018.2&return_msg=42018.1" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="42018.2"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a42018_3"></a><div class="message" id="message_42018_3"> <div class="message_header"> <div class="message_from"> From: JonCooper<span class="message_time"> 4 Sep 2017 20:52</span> <div class="clearer"></div> </div><div class="message_to">To: graphitone <span><span class="image post_read" title="Read: 5 Sep 2017 09:48"></span></span> <span class="message_count">3 of 7</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=42018.3">42018.3</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=42018.1#a42018_2" target="_self">42018.2</a></div> <div class="message_body"> Ideally I'd like it on a webpage, though it's just for family<br /> Photoshop would do at a pinch though, thanks</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=42018.3&return_msg=42018.1" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="42018.3"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a42018_4"></a><div class="message" id="message_42018_4"> <div class="message_header"> <div class="message_from"> From: CHYRON (DSMITHHFX)<span class="message_time"> 4 Sep 2017 22:00</span> <div class="clearer"></div> </div><div class="message_to">To: JonCooper <span><span class="image post_read" title="Read: 4 Sep 2017 22:25"></span></span> <span class="message_count">4 of 7</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=42018.4">42018.4</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=42018.1#a42018_1" target="_self">42018.1</a></div> <div class="message_body"> jquery fadeIn() and fadeOut() ? also you can animate the css opacity attribute.<div class="edit_text">EDITED: 4 Sep 2017 22:01 by DSMITHHFX</div> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=42018.4&return_msg=42018.1" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="42018.4"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a42018_5"></a><div class="message" id="message_42018_5"> <div class="message_header"> <div class="message_from"> From: JonCooper<span class="message_time"> 4 Sep 2017 22:26</span> <div class="clearer"></div> </div><div class="message_to">To: CHYRON (DSMITHHFX) <span><span class="image post_read" title="Read: 4 Sep 2017 22:28"></span></span> <span class="message_count">5 of 7</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=42018.5">42018.5</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=42018.1#a42018_4" target="_self">42018.4</a></div> <div class="message_body"> thanks, I'll have a look</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=42018.5&return_msg=42018.1" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="42018.5"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a42018_6"></a><div class="message" id="message_42018_6"> <div class="message_header"> <div class="message_from"> From: Manthorp<span class="message_time"> 5 Sep 2017 07:24</span> <div class="clearer"></div> </div><div class="message_to">To: JonCooper <span><span class="image post_read" title="Read: 5 Sep 2017 08:13"></span></span> <span class="message_count">6 of 7</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=42018.6">42018.6</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=42018.1#a42018_1" target="_self">42018.1</a></div> <div class="message_body"> Are you wanting visitors to be able to do it in real time with a slider? Or is it a cycling slideshow effect?</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=42018.6&return_msg=42018.1" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="42018.6"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a42018_7"></a><div class="message" id="message_42018_7"> <div class="message_header"> <div class="message_from"> From: JonCooper<span class="message_time"> 5 Sep 2017 08:14</span> <div class="clearer"></div> </div><div class="message_to">To: Manthorp <span><span class="image post_read" title="Read: 5 Sep 2017 16:08"></span></span> <span class="message_count">7 of 7</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=42018.7">42018.7</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=42018.1#a42018_6" target="_self">42018.6</a></div> <div class="message_body"> real time with a slider would be perfect.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=42018.7&return_msg=42018.1" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="42018.7"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div></div> </div> </body>