Thanks guys, but this was ingo's idea!
I was just helping him get it working.
As far as details... absolutely!
How it works: this method displays two images... one remains in-line with your page, the other is set on a separate z-index (layer) when the user hovers over it.
Here is the CSS code to place at the
end of your
style.css file:
/* Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox {cursor: default; list-style: none; }
.hoverbox a { cursor: default; }
.hoverbox a .preview { display: none; }
.hoverbox a:hover .preview { display: block; position: absolute; top: -50px; left: -70px; z-index: 1; }
.hoverbox img { background: #fff; color: inherit; padding: 2px; vertical-align: top; width: 100px; height: 75px; }
.hoverbox li { background: #eee; color: inherit; display: inline; float: left; margin: 1px; padding: 1px; position: relative; }
.hoverbox .preview { border-color: #000; width: 240px; height: 200px; }Here is a very simplistic HTML code showing the basics of what's needed:
<ul class="hoverbox">
<li>
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>
</li></ul>And here is an actual code example from the file
main.php, Latest Ads section, using BCute theme:
<td class="photo">
<ul class="hoverbox"><li>
<?php if( osc_item_is_premium() ){ ?>
<div id="premium_img"></div>
<?php }?>
<?php if( osc_count_item_resources() ) { ?>
<a href="<?php echo osc_item_url() ; ?>">
<img src="<?php echo osc_resource_thumbnail_url() ; ?>" width="75px" height="56px" title="" alt="" />
<img src="<?php echo osc_resource_thumbnail_url() ; ?>" width="75px" height="56px" title="" alt="" class="preview" />
</a>
<?php } else { ?>
<img src="<?php echo osc_current_web_theme_url('images/no_photo.gif') ; ?>" alt="" title=""/>
<?php } ?>
</li></ul>
</td>
