Support » Themes and Templates » add a immage over existing image

Viewing 10 replies - 1 through 10 (of 10 total)
  • esmi

    (@esmi)

    Forum Moderator

    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).

    TataVostru

    (@tatavostru)

    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; ?>
    TataVostru

    (@tatavostru)

    it is link tho the respective post

    esmi

    (@esmi)

    Forum Moderator

    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.

    wizardregis

    (@wizardregis)

    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.

    esmi

    (@esmi)

    Forum Moderator

    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.

    wizardregis

    (@wizardregis)

    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.

    TataVostru

    (@tatavostru)

    i give it a try.. i will notice you if it work..

    TataVostru

    (@tatavostru)

    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; ?>
    TataVostru

    (@tatavostru)

    ennybody?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘add a immage over existing image’ is closed to new replies.