Newsbox as CSS-Popup

In this example there are 3 flags for Austria (at.gif related to Newsbox News10 and linked to whatyouwant), Germany (de.gif related to Newsbox News11 and linked to whatyouwant) and United Kingdom (uk.gif related to Newsbox News12 and linked to whatyouwant). If you hover about the image-flags, a css-frame pops up with additional infos. You can change the content of these popups by simply change the content of the related newxsboxes. If you click on the image-flags, the usual event after clicking on a link happens.

I've tested it with current Versions of Opera, Firefox, MSIE 7+8, You can see it in action : http://nff.cvb-schule.de

In the ../templates/yourtemplate/template.htm insert at your favourite position :

<div id="headerimagebox3">
  <!-- Wien -->
  <a class="popup" href="http://link_to_at">
    <img src="<?=$pth['folder']['templateimages']?>at.gif" alt="Wien" title="Wien - Österreich" />
    <span class="outer">
      <div class="inner">
        <?php echo newsbox('News10');?>
      </div>
    </span></a>
  <!-- Uffenheim -->
  <a class="popup" href="http://link_to_de">
    <img src="<?=$pth['folder']['templateimages']?>de.gif" alt="Uffenheim" title="Uffenheim - Deutschland" />
    <span class="outer">
      <div class="inner">
        <?php echo newsbox('News11');?>
      </div>
    </span></a>
  <!-- Lincoln -->
  <a class="popup" href="http://link_to_uk">
    <img src="<?=$pth['folder']['templateimages']?>uk.gif" alt="Lincoln" title="Lincoln - England" />
    <span class="outer">
      <div class="inner">
        <?php echo newsbox('News12');?>
      </div>
    </span></a>
  <div style="clear: both;">
  </div>
</div>

Add at end of the …/templates/yourtemplate/stylesheet.css

#headerimagebox3 {margin-top:20px;float:left;}
 a.popup {
   position:relative;
   height:1.0em;
   margin-left:30px;
   text-decoration:none;
 }
 a.popup span {
   visibility:hidden;
   margin:0;
   font-size:11px;
   line-height:1.1em;
   top:40px;
   left:-196px;
   width:250px;
 }
 span.outer {
   position:absolute;
   padding:0;
 }
 div.inner {
   position:relative;
   display:block;
   padding:0 8px 8px 8px;
   margin:65px 0 0 0;
 }
 a.popup:hover {
   border:none;
   text-decoration:none;
 }
 a.popup:hover span {
   visibility:visible;
   background:url(images/bubble_top.gif) top no-repeat;
 }
 a.popup:hover div {
   background:#EFEFE4 url(images/bubble_bottom.gif) bottom no-repeat;
   color:#444;
 }
a.extlink {
   border:none;
   text-decoration:none;
 }

Just as eyecandy I used bubble_top.gif, bubble_bottom.gif at the top/bottom of the popup-frames.

tips_and_tricks/newsboxes_as_css-popups.txt · Last modified: 2018/04/05 14:48 (external edit)
Webdesign: NMuD chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0