If those arrows are meant to fire something – such as run a trailer or just link to another page – you’re going to have to do a lot more than just drop an arrow image on top of the individual images (which is difficult enough).
esmi i want to make the trailerbg.png image to apear over post image only in front…..
this is the code…
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="front_trai">
<div class="fr">
<div class="trai">
<?php $homethumb = get_post_meta($post->ID,'homethumb', true); ?><a href=" <?php the_permalink() ?>" rel="bookmark" title="<?php printf(__(' %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/<? echo strtolower($homethumb); ?>.jpg" width="95" height="140" alt="" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>" /></td>
</div>
<div class="trai_link">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></td>
</div>
</div>
</div>
<?php endwhile; ?>
<?php if ($prev_link || $next_link): ?>
<div class="navigation">
<div class="alignleft"><?php echo $next_link; ?></div>
<div class="alignright"><?php echo $prev_link; ?></div>
</div>
<?php endif; ?>
<?php else : ?>
<h2 class="center"><?php _e('Not Found', 'kubrick'); ?></h2>
<p class="center"><?php _e('Sorry, but you are looking for something that isn’t here.', 'kubrick'); ?></p>
<?php if(function_exists('get_search_form')) get_search_form(); ?>
<?php endif; ?>
it is link tho the respective post
Frankly I don’t think that this can be done using PHP, XTML & CSS in any kind of reliable, cross-browser, manner. There might be a JavaScript method that can do it but I’m afraid I don’t know it. Sorry.
You are lucky I like these kind of problems 😉
I haven’t tested it in a WordPress environment since I cant be arsed to setup custom fields and such. But I tried it with pure HTML and it worked fine.
The cover is a normal image, but inside the link we have a SPAN tag that acts as the arrow-placeholder. It is set to position:absolute, and since the wrapper (A) is set to position:relative the arrow will align itself to it.
CSS:
.covers a { display:block; width:95px; height:140px; position:relative; }
.covers a span { width:100%; height:100%; display:inline-block; background:url('trailerbg.png') center center no-repeat; position:absolute; top:0; left:0; }
XHTML:
<div class="covers">
<?php $homethumb = get_post_meta($post->ID,'homethumb', true); ?>
<a href=""><span></span><img src="<?php bloginfo('url'); ?>/wp-content/uploads/<? echo strtolower($homethumb); ?>.jpg" alt="" width="95" height="140" /></a>
</div>
There are more ways to solve the problem, such as having the cover as a background-image, but I think using position is far easier.
That’s the kind of approach that I was thinking of but will it work with IE7 or below without seriously screwing the page up? IE is a right pain with positioning.
I checked it now in IE8, and it works fine, except it doesn’t show the “hand” when you hover over it. But you can just add .covers a span { cursor:hand; } and that will be fixed.
As for previous versions I can’t test on this computer. But you can just add some codes so those version ignore it if they can’t handle it.
i give it a try.. i will notice you if it work..
it show ok but way it show the tite duplicate in internet explorer?
<div class="trailere_t">TOP Trailere <div class="trailere_link"><a href="http://www.trailer-youtube.com" title="mai multe trailere">mai multe trailere</a></div></div>
<div class="art-Post-inner art-article">
<h2 class="art-PostHeaderIcon-wrapper">
<span class="art-PostHeader">
</a></span>
</h2>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="front_trai">
<div class="fr">
<div class="trai">
<div class="covers">
<?php $homethumb = get_post_meta($post->ID,'homethumb', true); ?><a href=" <?php the_permalink() ?>" rel="bookmark" title="<?php printf(__(' %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><span></span><img src="<?php bloginfo('url'); ?>/wp-content/uploads/<? echo strtolower($homethumb); ?>.jpg" width="95" height="140" alt="" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>" /></td>
</div>
</div>
<div class="trai_link">
<a href="<?php the_permalink()?>" rel="bookmark" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>"> <?php the_title(); ?></td>
</div>
</div>
</div>
<?php endwhile; ?>
<?php if ($prev_link || $next_link): ?>
<div class="navigation">
<div class="alignleft"><?php echo $next_link; ?></div>
<div class="alignright"><?php echo $prev_link; ?></div>
</div>
<?php endif; ?>
<?php else : ?>
<h2 class="center"><?php _e('Not Found', 'kubrick'); ?></h2>
<p class="center"><?php _e('Sorry, but you are looking for something that isn’t here.', 'kubrick'); ?></p>
<?php if(function_exists('get_search_form')) get_search_form(); ?>
<?php endif; ?>
